1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16export const LitTabsHtml = `
17        <style>
18        :host{ 
19            display: block;
20            text-align: unset;
21            color: var(--dark-color1,#252525);
22            background-color: var(--dark-background,#FFFFFF);
23            box-shadow: #00000033 0 0 10px ;
24        }
25        ::slotted(lit-tabpane){
26            box-sizing:border-box;
27            width:100%;
28            height:100%;
29            flex-shrink:0;
30            overflow: auto;
31        }
32        .nav-item{
33            display: inline-flex;
34            justify-content: center;
35            align-items: center;
36            /*padding: 6px 0px 6px 12px;*/
37            padding-left: 12px;
38            font-size: .9rem;
39            font-weight: normal;
40            cursor: pointer;
41            transition: all 0.3s;
42            flex-shrink: 0;
43        }
44        .nav-item lit-icon{
45            margin-right: 2px;
46            font-size: inherit;
47        }
48
49        .nav-item[data-disabled]{
50            pointer-events: all;
51            cursor: not-allowed;
52            color: #bfbfbf;
53        }
54        .nav-item[data-hidden]{
55            pointer-events: all;
56            cursor: not-allowed;
57            color: #bfbfbf;
58            display: none;
59        }
60
61        .tab-content{
62            display: block;
63            background-color: #fff;
64            flex:1;
65        }
66        
67        /*
68         *   top  top-left top-center top-right
69         */
70        :host(:not([position])) .nav-root,
71        :host([position^='top']) .nav-root{
72            display: flex;
73            position: relative;
74            height: 38px;
75            z-index: auto;
76            /*justify-content: center;*/
77            /*align-items: center;*/
78        }
79        :host(:not([mode]):not([position])) .tab-line,/*移动的线条*/
80        :host([mode='flat'][position^='top']) .tab-line{
81            position:absolute;
82        }
83        
84        :host(:not([position])) .tab-nav-vessel,
85        :host([position^='top']) .tab-nav-vessel{
86            display: flex;
87            /*position: relative;*/
88            /*flex-direction: column;*/
89            /*overflow-y: hidden;*/
90            /*overflow-x: auto;*/
91            /*overflow: -moz-scrollbars-none; */
92            /*-ms-overflow-style: none;*/
93            /*transition: all 0.3s;*/
94            
95            position: absolute;
96            overflow: auto;
97            height: 850px;
98            transform: rotateZ(-90deg) rotateY(180deg);
99            transform-origin: left top;
100            overflow-x: hidden;
101            width: 38px;
102            
103            cursor: row-resize;
104            user-select: none;
105        }
106        :host([position='top']) .tab-nav,
107        :host([position='top-left']) .tab-nav{
108            display: flex;
109            position: relative;
110            justify-content: flex-start;
111            cursor: row-resize;
112            user-select: none;
113            margin-top: 6px;
114            margin-left: 5px;
115            
116            transform: translateY(-38px) rotateZ(90deg) rotateX(180deg) translateY(38px);
117            transform-origin: left bottom;
118            flex-wrap: nowrap;
119            height: 38px;
120        }
121        :host([position='top-center']) .tab-nav{
122            display: flex;
123            justify-content: center;
124        }
125        :host([position='top-right']) .tab-nav{
126            display: flex;
127            justify-content: flex-end;
128        }
129        
130        :host([position^='top'][mode='card']) .nav-item{
131            border-top: 1px solid var(--dark-border1,#f0f0f0);
132            border-left: 1px solid var(--dark-border1,#f0f0f0);
133            border-right: 1px solid var(--dark-border1,#f0f0f0);
134            bottom: 0px;
135            margin-right: 2px;
136            position: relative;
137            height: 100%;
138        }
139        :host([position^='top']) .tab-nav-bg-line{
140            position: absolute;bottom: 0;height: 1px;
141            width: 100%
142        }
143        :host([position^='top'][mode='card']) .nav-item:not([data-selected]){
144            border-top-left-radius: 5px;
145            border-top-right-radius: 5px;
146            background-color: var(--dark-border1,#D8D8D8);
147            color: var(--dark-color1,#212121);
148        }
149        :host([position^='top'][mode='card']) .nav-item[data-selected]{
150            background-color: var(--dark-background,#ffffff);
151            bottom: 0px;
152            color: var(--dark-color1,#212121);
153            border-top: 1px solid var(--dark-border1,#bababa);
154            border-top-left-radius: 5px;
155            border-top-right-radius: 5px;
156            border-left: 1px solid var(--dark-border1,#bababa);
157            border-right: 1px solid var(--dark-border1,#bababa);
158        }
159        /*
160            bottom bottom-left bottom-center bottom-right
161        */
162        :host([position^='bottom']) .tab{
163            display: flex;
164            flex-direction: column-reverse;
165        }
166        :host([mode='flat'][position^='bottom']) .tab-line{
167            position:absolute;
168            top: -3px;
169            background-color: #42b983;
170            height: 2px;
171            transform: translateY(-100%);
172            transition: all 0.3s;
173        }
174        :host([position^='bottom']) .tab-nav-vessel{
175            display: flex;
176            position: relative;
177            flex-direction: column;
178            overflow-x: auto;
179            overflow-y: visible;
180            overflow: -moz-scrollbars-none; 
181            -ms-overflow-style: none;
182            transition: all 0.3s;
183            flex: 1;
184            border-top: #f0f0f0 1px solid;
185        }
186        :host([position^='bottom']) .nav-root{
187            display: flex;
188            justify-content: center;
189            align-items: center;
190        }
191        :host([position='bottom']) .tab-nav,
192        :host([position='bottom-left']) .tab-nav{
193            display: flex;
194            position: relative;
195            justify-content: flex-start;
196        }
197        :host([position='bottom-center']) .tab-nav{
198            display: flex;
199            justify-content: center;
200        }
201        :host([position='bottom-right']) .tab-nav{
202            display: flex;
203            justify-content: flex-end;
204        }
205        :host([position^='bottom'][mode='card']) .nav-item{
206            border-top: 1px solid #ffffff;
207            border-left: 1px solid #f0f0f0;
208            border-right: 1px solid #f0f0f0;
209            border-bottom: 1px solid #f0f0f0;
210            top: -1px;
211            margin-right: 2px;
212            position: relative;
213        }
214        :host([position^='bottom']) .tab-nav-bg-line{
215            position: absolute;top: 0;height: 1px;background-color: #f0f0f0;width: 100%
216        }
217        :host([position^='bottom'][mode='card']) .nav-item:not([data-selected]){
218            background-color: #f5f5f5;
219            border-top: 1px solid #f0f0f0;
220        }
221        :host([position^='bottom'][mode='card']) .nav-item[data-selected]{
222            background-color: #ffffff;
223            border-top: 1px solid #fff;
224            top: -1px;
225        }
226        /*
227        left left-top left-center left-bottom
228        */
229        :host([position^='left']) .tab{
230            display: flex;
231            flex-direction: row;
232        }
233        :host([mode='flat'][position^='left']) .tab-line{
234            position:absolute;
235            right: 1px;
236            background-color: #42b983;
237            width: 3px;
238            transform: translateX(100%);
239            transition: all 0.3s;
240        }
241        :host([position^='left']) .tab-nav-vessel{
242            display: flex;
243            position: relative;
244            flex-direction: row;
245            overflow-x: auto;
246            overflow-y: visible;
247            overflow: -moz-scrollbars-none; 
248            -ms-overflow-style: none;
249            transition: all 0.3s;
250            flex: 1;
251            border-right: #f0f0f0 1px solid;
252        }
253        :host([position^='left']) .nav-root{
254            display: flex;
255            flex-direction: column;
256            justify-content: center;
257            align-items: center;
258        }
259        :host([position='left']) .tab-nav,
260        :host([position='left-top']) .tab-nav{
261            display: flex;
262            position: relative;
263            flex-direction: column;
264            justify-content: flex-start;
265        }
266        :host([position='left-center']) .tab-nav{
267            display: flex;
268            position: relative;
269            flex-direction: column;
270            justify-content: center;
271        }
272        :host([position='left-bottom']) .tab-nav{
273            display: flex;
274            position: relative;
275            flex-direction: column;
276            justify-content: flex-end;
277        }
278        :host([position^='left'][mode='card']) .nav-item{
279            border-top: 1px solid #f0f0f0;
280            border-left: 1px solid #f0f0f0;
281            border-right: 1px solid #ffffff;
282            border-bottom: 1px solid #f0f0f0;
283            right: -1px;
284            margin-bottom: 2px;
285            position: relative;
286        }
287        :host([position^='left']) .tab-nav-bg-line{
288            position: absolute;right: 0;width: 1px;background-color: #f0f0f0;width: 100%
289        }
290        :host([position^='left'][mode='card']) .nav-item:not([data-selected]){
291            background-color: #f5f5f5;
292            border-right: 1px solid #f0f0f0;
293        }
294        :host([position^='left'][mode='card']) .nav-item[data-selected]{
295            background-color: #ffffff;
296            border-bottom: 1px solid #fff;
297            right: -1px;
298        }
299        /*
300        right right-top right-center right-bottom
301        */
302        :host([position^='right']) .tab{
303            display: flex;
304            flex-direction: row-reverse;
305        }
306        :host([mode='flat'][position^='right']) .tab-line{
307            position:absolute;
308            left: 1px;
309            background-color: #42b983;
310            width: 3px;
311            transform: translateX(-100%);
312            transition: all 0.3s;
313        }
314        :host([position^='right']) .tab-nav-vessel{
315            display: flex;
316            position: relative;
317            flex-direction: row-reverse;
318            overflow-x: auto;
319            overflow-y: visible;
320            overflow: -moz-scrollbars-none; 
321            -ms-overflow-style: none;
322            transition: all 0.3s;
323            flex: 1;
324            border-left: #f0f0f0 1px solid;
325        }
326        :host([position^='right']) .nav-root{
327            display: flex;
328            flex-direction: column;
329            justify-content: center;
330            align-items: center;
331        }
332        :host([position='right']) .tab-nav,
333        :host([position='right-top']) .tab-nav{
334            display: flex;
335            position: relative;
336            flex-direction: column;
337            justify-content: flex-start;
338        }
339        :host([position='right-center']) .tab-nav{
340            display: flex;
341            position: relative;
342            flex-direction: column;
343            justify-content: center;
344        }
345        :host([position='right-bottom']) .tab-nav{
346            display: flex;
347            position: relative;
348            flex-direction: column;
349            justify-content: flex-end;
350        }
351        :host([position^='right'][mode='card']) .nav-item{
352            border-top: 1px solid #f0f0f0;
353            border-left: 1px solid #ffffff;
354            border-right: 1px solid #f0f0f0;
355            border-bottom: 1px solid #f0f0f0;
356            left: -1px;
357            margin-top: 2px;
358            position: relative;
359        }
360        :host([position^='right']) .tab-nav-bg-line{
361            position: absolute;left: 0;width: 1px;background-color: #f0f0f0;width: 100%
362        }
363        :host([position^='right'][mode='card']) .nav-item:not([data-selected]){
364            background-color: #f5f5f5;
365            border-left: 1px solid #f0f0f0;
366        }
367        :host([position^='right'][mode='card']) .nav-item[data-selected]{
368            background-color: #ffffff;
369            left: -1px;
370        }
371        
372        
373        .tab-nav-vessel::-webkit-scrollbar {
374            display: none;
375        }
376        
377        .close-icon:hover{
378            color: #000;
379        }
380        .nav-item[data-closeable] .close-icon{
381            display: block;
382            padding: 2px 5px;
383            color: var(--dark-icon,#606060)
384        }
385        .nav-item[data-closeable] .no-close-icon{
386            display: none;
387        }
388        .nav-item:not([data-closeable]) .no-close-icon{
389            display: block;
390        }
391        .nav-item:not([data-closeable]) .close-icon{
392            display: none;
393        }
394        
395        </style>
396        <style id="filter"></style>
397        <div class="tab" >
398            <div class="nav-root" style="background-color: var(--dark-background4,#f2f2f2);">
399                <slot name="left" style="flex:1"></slot>
400                <div class="tab-nav-vessel" >
401                    <div class="tab-nav-bg-line"></div>
402                    <div class="tab-nav" id="nav" ></div>
403                    <div class="tab-line" id="tab-line"></div>
404                </div>
405                <div id="tab-filling" style="flex: 1"></div>
406                <slot name="options" style="flex:1"></slot>
407                <slot name="right" style="flex:1"></slot>
408            </div>
409            <div class="tab-content">
410                <slot id="slot">NEED CONTENT</slot>
411            </div>
412        </div>
413        `;
414