• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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, element } from '../BaseElement';
17
18const initHtmlStyle = `
19    <style>
20        :host{
21            display:flex;
22            opacity: 0.86;
23            font-family: Helvetica;
24            font-size: 14px;
25            text-align: left;
26            line-height: 16px;
27            font-weight: 400;
28        }
29        #checkbox{
30            position:absolute;
31            clip:rect(0,0,0,0);
32        }
33
34        label{
35            box-sizing:border-box;
36            cursor:pointer;
37            display:flex;
38            align-items:center;
39            gap: 12px;
40        }
41        .chekebox{
42            position:relative;
43            display:flex;
44            justify-content: center;
45            align-items: center;
46            width: 16px;
47            height:16px;
48            border: 1px solid var(--dark-color1,#4D4D4D);
49            border-radius: 20%;
50        }
51        .chekebox::before{
52            position:absolute;
53            content:'';
54            width:74%;
55            height:0.15em;
56            background:#3391FF;
57            transform:scale(0);
58            border-radius: 0.15em;
59        }
60        .chekebox{
61            background:var(--dark-background,#FFFFFF);
62        }
63        .chekebox::after{
64            content:'';
65            position:absolute;
66            width:100%;
67            height:100%;
68            border-radius:50%;
69            background:#FFFFFF;
70            opacity:0.2;
71            transform:scale(0);
72            z-index:-1;
73        }
74        #checkbox:checked:not(:indeterminate)+label .chekebox .icon{
75            transform: scale(1.5);
76        }
77        #checkbox:checked+label .chekebox,#checkbox:indeterminate+label .chekebox{
78            border-color:#3391FF;
79        }
80        #checkbox:indeterminate+label .chekebox::before{
81            transform:scale(1);
82        }
83        .icon{
84            width: 100%;
85            height: 94%;
86            transform: scale(0);
87        }
88        :host([disabled]){
89          pointer-events: none;
90        }
91        </style>
92    `;
93
94@element('lit-check-box')
95export class LitCheckBox extends BaseElement {
96  private checkbox: HTMLInputElement | undefined;
97
98  static get observedAttributes(): string[] {
99    return ['checked', 'value', 'disabled'];
100  }
101
102  set disabled(value) {
103    if (value === null || value === false) {
104      this.removeAttribute('disabled');
105    } else {
106      this.setAttribute('disabled', '');
107    }
108  }
109
110  get indeterminate(): boolean {
111    return this.checkbox!.indeterminate;
112  }
113
114  set indeterminate(value) {
115    if (value === null || value === false) {
116      this.checkbox!.indeterminate = false;
117    } else {
118      this.checkbox!.indeterminate = true;
119    }
120  }
121
122  get disabled(): boolean {
123    return this.getAttribute('disabled') !== null;
124  }
125
126  get checked(): boolean {
127    return this.getAttribute('checked') !== null;
128  }
129
130  set checked(boxCheck: boolean) {
131    if (boxCheck === null || !boxCheck) {
132      this.removeAttribute('checked');
133    } else {
134      this.setAttribute('checked', '');
135    }
136  }
137
138  get value(): string {
139    return this.getAttribute('value') || '';
140  }
141
142  set value(value: string) {
143    this.setAttribute('value', value);
144  }
145
146  initHtml(): string {
147    return `
148        ${initHtmlStyle}
149        <input type="checkbox" id="checkbox">
150        <label for="checkbox">
151          <span class="chekebox">
152          <lit-icon name="checkmark" class="icon" color="#3391FF" size="15">
153          </lit-icon>
154          </span>
155          <slot id="slot"></slot>
156       </label>
157        `;
158  }
159
160  initElements(): void {
161    this.checkbox = this.shadowRoot?.getElementById('checkbox') as HTMLInputElement;
162  }
163
164  connectedCallback(): void {
165    this.checkbox!.addEventListener('change', () => {
166      this.checked = this.checkbox!.checked;
167      let changeEvent: CustomEventInit<LitCheckBoxChangeEvent> = {
168        detail: {
169          checked: this.checked,
170        },
171      };
172      this.dispatchEvent(new CustomEvent('change', changeEvent));
173    });
174  }
175
176  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
177    if (name === 'checked' && this.checkbox) {
178      this.checkbox.checked = newValue !== null;
179    }
180    if (name === 'value') {
181      let slot = this.shadowRoot?.getElementById('slot');
182      slot!.textContent = newValue;
183    }
184  }
185}
186
187export interface LitCheckBoxChangeEvent {
188  checked: boolean;
189}
190