• 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.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}"/>
91        <input class="input-style" id="_upLimit" value="${this.upLimit}"/>
92        `;
93    }
94
95    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
96        if (name == 'checked') {
97            this._checkBox!.checked = newValue !== null;
98        }
99        if (name == 'text') {
100            this._checkBox?.setAttribute('value', newValue);
101        }
102        if (name == 'lowerLimit') {
103            this._lowerLimit!.textContent = newValue
104        }
105        if (name == 'upLimit') {
106            this._upLimit!.textContent = newValue
107        }
108    }
109
110}