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