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';
17import { SpCheckDesBox } from '../../trace/component/setting/SpCheckDesBox';
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(): string[] {
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(): boolean {
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): void {
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