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