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(value: boolean) { 43 if (value === null || !value) { 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:inline-block; 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 } 81 .chekebox{ 82 position:relative; 83 display:flex; 84 justify-content: center; 85 align-items: center; 86 margin-right:12px; 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: 90%; 126 height: 55%; 127 transform: scale(0); 128 } 129 </style> 130 <input type="checkbox" id="checkbox"> 131 <label for="checkbox"> 132 <span class="chekebox"><lit-icon name="checkmark" class="icon" color="#3391FF" size="8"></lit-icon></span> 133 <slot id="slot"></slot> 134 </label> 135 `; 136 } 137 138 initElements(): void { 139 this.checkbox = this.shadowRoot?.getElementById('checkbox') as HTMLInputElement; 140 } 141 142 connectedCallback() { 143 this.checkbox!.addEventListener('change', (ev) => { 144 this.checked = this.checkbox!.checked; 145 this.dispatchEvent(new CustomEvent("change", { 146 detail: { 147 "checked": this.checked 148 } 149 })) 150 }) 151 } 152 153 attributeChangedCallback(name: string, oldValue: string, newValue: string) { 154 if (name == 'checked' && this.checkbox) { 155 if (newValue !== null) { 156 this.checkbox.checked = true; 157 } else { 158 this.checkbox.checked = false; 159 } 160 } 161 if (name == 'value') { 162 let slot = this.shadowRoot?.getElementById("slot") 163 slot!.textContent = newValue 164 } 165 } 166} 167