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 { BaseElement } from '../BaseElement';
17import '../icon/LitIcon';
18
19const initHtmlStyle: string = `
20    <style>
21        :host{ 
22            display: flex;
23            padding: 8px 10px;
24            transition: all .3s;
25            color: var(--dark-color2,#333);
26            tab-index: -1;
27            align-items: center;
28            width: max-content;
29            min-width: 100%;
30            max-lines: 1;
31            white-space: nowrap;
32            font-size: 0.8rem;
33        }
34        :host(:not([disabled])[selected]){
35            background-color: #0A59F7;
36            color: #ffffff;
37            font-weight: bold;
38        }
39        :host(:not([disabled]):not([selected]):hover){
40            background-color: var(--dark-background7,#f5f5f5);
41        }
42        :host([disabled]){
43            cursor: not-allowed;
44            color: var(--dark-color,#bfbfbf);
45        }
46        :host([selected][check]) .check{
47             display: flex;
48        }
49        :host(:not([selected])) .check{
50             display: none;
51        }
52        :host(:not([check])) .check{
53            display: none;
54        }
55        
56        :host([disabled]) .selected-box{
57             display: none;
58        }
59        :host([selected]) .selected{
60            display: flex;
61            color: #FFFFFF;
62        }
63        :host(:not([selected])) .selected{
64            display: none;
65        }
66        </style>
67    `;
68
69export class LitSelectOption extends BaseElement {
70  static get observedAttributes(): string[] {
71    return ['selected', 'disabled', 'check'];
72  }
73
74  initHtml(): string {
75    return `
76        ${initHtmlStyle}
77        <div class="selected-box">
78            <lit-icon class="selected" name="check" size="20"></lit-icon>
79        </div>
80        <slot></slot>
81<!--        <lit-icon class="check" name="check"></lit-icon>-->
82        `;
83  }
84
85  initElements(): void {}
86
87  //当 custom element首次被插入文档DOM时，被调用。
88  connectedCallback(): void {
89    if (!this.hasAttribute('disabled')) {
90      this.onclick = (ev): void => {
91        this.dispatchEvent(
92          new CustomEvent('onSelected', {
93            detail: {
94              selected: true,
95              value: this.getAttribute('value'),
96              text: this.textContent,
97            },
98          })
99        );
100        ev.stopPropagation();
101      };
102    }
103  }
104
105  //当 custom element从文档DOM中删除时，被调用。
106  disconnectedCallback(): void {}
107
108  //当 custom element被移动到新的文档时，被调用。
109  adoptedCallback(): void {}
110
111  //当 custom element增加、删除、修改自身属性时，被调用。
112  attributeChangedCallback(name: unknown, oldValue: unknown, newValue: unknown): void {}
113}
114
115if (!customElements.get('lit-select-option')) {
116  customElements.define('lit-select-option', LitSelectOption);
117}
118