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"; 17import {SpCheckDesBox} from "../../trace/component/setting/SpCheckDesBox.js"; 18 19@element('lit-check-text') 20export class LitCheckBoxWithText extends BaseElement { 21 private _checkBox: SpCheckDesBox | undefined; 22 private _lowerLimit: HTMLInputElement | undefined; 23 private _upLimit: HTMLInputElement | undefined; 24 25 static get observedAttributes() { 26 return ['text', 'lowerlimit', 'uplimit', 'checked'] 27 } 28 29 get text(): string { 30 return this.getAttribute("text") || "" 31 } 32 33 set text(text: string) { 34 this.setAttribute("text", text) 35 } 36 37 get lowerlimit(): string { 38 return this.getAttribute("lowerlimit") || "0" 39 } 40 41 set lowerlimit(lower: string) { 42 this.setAttribute("lowerlimit", lower) 43 } 44 45 get uplimit(): string { 46 return this.getAttribute("uplimit") || "∞" 47 } 48 49 set uplimit(uplimit: string) { 50 this.setAttribute("uplimit", uplimit) 51 } 52 53 get checked() { 54 return this.getAttribute("checked") != null; 55 } 56 57 set checked(checked: boolean) { 58 if (checked) { 59 this.setAttribute('checked', ''); 60 } else { 61 this.removeAttribute('checked'); 62 } 63 } 64 65 initElements(): void { 66 this._checkBox = this.shadowRoot?.getElementById('checkbox') as SpCheckDesBox; 67 this._lowerLimit = this.shadowRoot?.getElementById('textLowerLimit') as HTMLInputElement; 68 this._upLimit = this.shadowRoot?.getElementById('_upLimit') as HTMLInputElement; 69 } 70 71 initHtml(): string { 72 return ` 73<style> 74:host{ 75 display: grid; 76 grid-template-columns: 1fr min-content min-content; 77 grid-column-gap: 10px; 78 text-align: center; 79 height: 16px; 80} 81.input-style { 82 width: 48px; 83 height: 16px; 84 border: 1px solid #B3B3B3; 85 text-align: center; 86} 87 88</style> 89<check-des-box id ='checkbox' value="${this.text}"></check-des-box> 90<input class="input-style" id="textLowerLimit" value="${this.lowerlimit}"/><input class="input-style" id="_upLimit" value="${this.uplimit}"/> 91 `; 92 } 93 94 attributeChangedCallback(name: string, oldValue: string, newValue: string) { 95 if (name == 'checked') { 96 if (newValue !== null) { 97 this._checkBox!.checked = true; 98 } else { 99 this._checkBox!.checked = false; 100 } 101 } 102 if (name == 'text') { 103 this._checkBox?.setAttribute('value', newValue); 104 } 105 if (name == 'lowerlimit') { 106 this._lowerLimit!.textContent = newValue 107 } 108 if (name == 'uplimit') { 109 this._upLimit!.textContent = newValue 110 } 111 } 112} 113