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
16import { replacePlaceholders } from '../utils/Template';
17
18let css = `
19<style>
20      :host{
21          display: inline-flex;
22          position: relative;
23          overflow: visible;
24          cursor: pointer;
25          border-radius: 2px;
26          outline: none;
27          -webkit-user-select:none ;
28          -moz-user-select:none;
29          user-select:none;
30      }
31      :host(:not([border])),
32      :host([border='true']){
33          border: 1px solid var(--bark-prompt,#dcdcdc);
34      }
35      input{
36          width: 100%;
37          border: 0;
38          outline: none;
39          background-color: transparent;
40          cursor: pointer;
41          -webkit-user-select:none ;
42          -moz-user-select:none;
43          user-select:none;
44          display: inline-flex;
45          color: var(--dark-color2,rgba(0,0,0,0.9));
46      }
47      :host([highlight]) input {
48          color: rgba(255,255,255,0.9);
49      }
50      :host([mode])  input{
51          padding: 6px 0px;
52      }
53      :host([mode])  .root{
54          padding: 1px 8px;
55      }
56      .root{
57          position: relative;
58          padding: 1px 8px;
59          display: flex;
60          align-items: center;
61          justify-content: space-between;
62          border-radius: 2px;
63          outline: none;
64          font-size: 1rem;
65          z-index: 2;
66          -webkit-user-select:none ;
67          -moz-user-select:none;
68          user-select:none;
69          width: 100%;
70      }
71      .body{
72          position: absolute;
73          bottom: 100%;
74          z-index: 99;
75          padding-top: 5px;
76          margin-top: 2px;
77          background-color: var(--dark-background4,#fff);
78          width: 100%;
79          transform: scaleY(.6);
80          visibility: hidden;
81          opacity: 0;
82          transform-origin: bottom center;
83          display: block;
84          flex-direction: column;
85      }
86      .body-bottom{
87          bottom: auto;
88          top: 100%;
89          transform-origin: top center;
90      }
91      :host([placement="bottom"]) .body{
92          bottom:unset;
93          top: 100%;
94          transition: none;
95          transform: none;
96      }
97
98      :host([rounded]) .body {
99          border-radius: 16px;
100      }
101      :host([rounded]) .root {
102          border-radius: 16px;
103          height: 25px;
104      }
105      .icon{
106          pointer-events: none;
107      }
108      .noSelect{
109        -moz-user-select:none;
110        -ms-user-select:none;
111        user-select:none;
112        -khtml-user-select:none;
113        -webkit-touch-callout:none;
114        -webkit-user-select:none;
115      }
116
117      :host(:not([border]):not([disabled]):focus),
118      :host([border='true']:not([disabled]):focus),
119      :host(:not([border]):not([disabled]):hover),
120      :host([border='true']:not([disabled]):hover){
121          border:1px solid var(--bark-prompt,#ccc)
122      }
123      :host(:not([disabled]):focus) .body,
124      :host(:not([disabled]):focus-within) .body{
125          transform: scaleY(1);
126          opacity: 1;
127          z-index: 99;
128          visibility: visible;
129      }
130      :host(:not([disabled]):focus)  input{
131          color: var(--dark-color,#bebebe);
132      }
133      :host(:not([border])[disabled]) *,
134      :host([border='true'][disabled]) *{
135          background-color: var(--dark-background1,#f5f5f5);
136          color: #b7b7b7;
137          cursor: not-allowed;
138      }
139      :host([border='false'][disabled]) *{
140          color: #b7b7b7;
141          cursor: not-allowed;
142      }
143      :host(:not([mode]))  input{
144          width: 100%;
145          padding: 6px 0px;
146      }
147      .body{
148          max-height: 286px;
149          border-radius: 2px;
150          box-shadow: 0 5px 15px 0px #00000033;
151      }
152      .multipleRoot input::-webkit-input-placeholder {
153          color: var(--dark-color,#aab2bd);
154      }
155      :host(:not([loading])) .loading{
156          display: none;
157      }
158      :host([loading]) .loading{
159          display: flex;
160      }
161      :host(:not([allow-clear])) .clear{
162          display: none;
163      }
164      :host([loading]) .icon{
165          display: none;
166      }
167      :host(:not([loading])) .icon{
168          display: flex;
169      }
170      .clear:hover{
171          color: #8c8c8c;
172      }
173      .clear{
174          color: #bfbfbf;
175          display: none;
176      }
177      .multipleRoot{
178          width:100%;
179          display: flex;
180          align-items: center;
181          flex-flow: wrap;
182          flex-wrap: wrap;
183          flex-direction: column;
184      }
185      .search{
186          color: #bfbfbf;
187          display: none;
188      }
189      .tag{
190          overflow: auto;
191          height: auto;
192          display: inline-flex;
193          position: relative;
194          align-items: center;
195          font-size: .75rem;
196          font-weight: bold;
197          padding: 1px 4px;
198          margin-right: 4px;
199          margin-top: 1px;
200          margin-bottom: 1px;
201          color: #242424;
202          background-color: #f5f5f5;
203      }
204      .tag-close:hover{
205          color: #333;
206      }
207      .tag-close{
208          padding: 2px;
209          font-size: .8rem;
210          color: #999999;
211          margin-left: 0px;
212      }
213      #search-input {
214        outline: none;
215        border: none;
216        margin-left: 15px;
217      }
218      .body-select {
219        margin-top: 3px;
220        background-color: var(--dark-background4,#fff);
221        width: 100%;
222        border-bottom: none;
223     }
224     .body-opt{
225        width: 100%;
226        max-height: 256px;
227        border-top: none;
228        overflow: auto;
229        border-bottom-left-radius: 10px;
230        border-bottom-right-radius: 10px;
231        background-color: var(--dark-background4,#fff);
232    }
233    input::-webkit-input-placeholder {
234        color: var(--dark-color,#aab2bd);
235    }
236    /*Define the height, width and background of the scroll bar*/
237    ::-webkit-scrollbar{
238        width: 8px;
239        border-radius: 10px;
240        background-color: var(--dark-background3,#FFFFFF);
241    }
242    /*define slider*/
243    ::-webkit-scrollbar-thumb{
244        border-radius: 6px;
245        background-color: var(--dark-background7,rgba(0,0,0,0.1));
246    }
247      </style>
248`;
249
250export const selectHtmlStr = (height: string): string => {
251  return replacePlaceholders(css, height);
252};
253
254export const selectVHtmlStr = `
255  <style>
256        :host{
257            display: inline-flex;
258            position: relative;
259            overflow: visible;
260            cursor: pointer;
261            border-radius: 16px;
262            outline: none;
263            -webkit-user-select:none ;
264            -moz-user-select:none;
265            user-select:none;
266        }
267        :host(:not([border])),
268        :host([border='true']){
269            border: 1px solid var(--bark-prompt,#dcdcdc);
270        }
271        input{
272            border: 0;
273            outline: none;
274            background-color: transparent;
275            cursor: pointer;
276            -webkit-user-select:none ;
277            -moz-user-select:none;
278            user-select:none;
279            display: inline-flex;
280            color: var(--dark-color2,rgba(0,0,0,0.9));
281        }
282        :host([highlight]) input {
283            color: rgba(255,255,255,0.9);
284        }
285        :host([mode])  input{
286            padding: 6px 0px;
287        }
288        :host([mode])  .root{
289            padding: 1px 8px;
290        }
291        .root{
292            position: relative;
293            padding: 3px 6px;
294            display: flex;
295            align-items: center;
296            justify-content: space-between;
297            border-radius: 2px;
298            outline: none;
299            font-size: 1rem;
300            z-index: 2;
301            -webkit-user-select:none ;
302            -moz-user-select:none;
303            user-select:none;
304            width: 100%;
305        }
306        .body{
307            position: absolute;
308            bottom: 100%;
309            z-index: 99;
310            padding-top: 5px;
311            margin-top: 2px;
312            background-color: var(--dark-background4,#fff);
313            width: 100%;
314            transform: scaleY(.6);
315            visibility: hidden;
316            opacity: 0;
317            transform-origin: bottom center;
318            display: block;
319            flex-direction: column;
320        }
321        .body-bottom{
322            bottom: auto;
323            top: 100%;
324            transform-origin: top center;
325        }
326        :host([placement="bottom"]) .body{
327            bottom:unset;
328            top: 100%;
329            transition: none;
330            transform: none;
331        }
332
333        :host([rounded]) .body {
334            border-radius: 16px;
335        }
336        :host([rounded]) .root {
337            border-radius: 16px;
338            height: 25px;
339        }
340        .icon{
341            pointer-events: none;
342        }
343        .noSelect{
344          -moz-user-select:none;
345          -ms-user-select:none;
346          user-select:none;
347          -khtml-user-select:none;
348          -webkit-touch-callout:none;
349          -webkit-user-select:none;
350        }
351
352        :host(:not([border]):not([disabled]):focus),
353        :host([border='true']:not([disabled]):focus),
354        :host(:not([border]):not([disabled]):hover),
355        :host([border='true']:not([disabled]):hover){
356            border:1px solid var(--bark-prompt,#ccc)
357        }
358        :host(:not([disabled]):focus) .body,
359        :host(:not([disabled]):focus-within) .body{
360            transform: scaleY(1);
361            opacity: 1;
362            z-index: 99;
363            visibility: visible;
364        }
365        :host(:not([disabled]):focus)  input{
366            color: var(--dark-color,#bebebe);
367        }
368        :host(:not([border])[disabled]) *,
369        :host([border='true'][disabled]) *{
370            background-color: var(--dark-background1,#f5f5f5);
371            color: #b7b7b7;
372            cursor: not-allowed;
373        }
374        :host([border='false'][disabled]) *{
375            color: #b7b7b7;
376            cursor: not-allowed;
377        }
378        .body{
379            max-height: 286px;
380            box-shadow: 0 5px 15px 0px #00000033;
381            border-radius: 10px;
382        }
383        input{
384            width: 100%;
385        }
386        #search-input {
387          outline: none;
388          border: none;
389        }
390        .body-select {
391           margin-top: 3px;
392           background-color: var(--dark-background4,#fff);
393           width: 100%;
394           border-bottom: none;
395        }
396        .body-opt{
397            width: 100%;
398            max-height: 256px;
399            border-top: none;
400            overflow: auto;
401            border-bottom-left-radius: 10px;
402            border-bottom-right-radius: 10px;
403            background-color: var(--dark-background4,#fff);
404        }
405        .loading{
406            display: none;
407        }
408        input::-webkit-input-placeholder {
409                color: var(--dark-color,#aab2bd);
410        }
411        #search-input{
412           margin-left: 15px;
413        }
414        .icon{
415            display: flex;
416        }
417        /*Define the height, width and background of the scroll bar*/
418        ::-webkit-scrollbar
419        {
420          width: 8px;
421          border-radius: 10px;
422          background-color: var(--dark-background3,#FFFFFF);
423        }
424
425        /*define slider*/
426        ::-webkit-scrollbar-thumb
427        {
428          border-radius: 6px;
429          background-color: var(--dark-background7,rgba(0,0,0,0.1));
430        }
431        
432        </style>
433        `;
434