• 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 "../../../base-ui/BaseElement.js";
17import {LitCheckBox} from "../../../base-ui/checkbox/LitCheckBox.js";
18
19@element('check-des-box')
20export class SpCheckDesBox extends BaseElement {
21    private _checkBox: LitCheckBox | undefined
22    private _des: HTMLSpanElement | undefined;
23
24    static get observedAttributes() {
25        return ['checked', 'value', 'des']
26    }
27
28    set des(des: string) {
29        this.setAttribute("des", des)
30    }
31
32    get value(): string {
33        return this.getAttribute("value") || '';
34    }
35
36    set value(value: string) {
37        this.setAttribute("value", value)
38        this._checkBox!.value = value
39    }
40
41    get checked() {
42        return this.getAttribute("checked") != null
43    }
44
45    set checked(checked: boolean) {
46        if (checked) {
47            this.setAttribute("checked", 'true')
48            this._checkBox!.checked = true
49        } else {
50            this.removeAttribute("checked")
51            this._checkBox!.checked = false
52        }
53    }
54
55    initElements(): void {
56        this._checkBox = this.shadowRoot?.getElementById('checkBox') as LitCheckBox
57        this._des = this.shadowRoot?.getElementById("des") as HTMLSpanElement;
58    }
59
60    initHtml(): string {
61        return `
62<style>
63.check-des{
64    opacity: 0.6;
65    font-family: Helvetica;
66    font-size: 1em;
67    color: var(--dark-color,#000000);
68    text-align: left;
69    line-height: 20px;
70    font-weight: 400;
71}
72lit-check-box {
73    margin-bottom: 10px;
74}
75#des-con{
76  margin-left: 30px;
77}
78</style>
79<lit-check-box id="checkBox"></lit-check-box>
80<div id="des-con">
81    <span id="des" class="check-des"></span>
82</div>`;
83    }
84
85    public connectedCallback() {
86        this._checkBox?.addEventListener("change", (ev: any) => {
87            let detail = ev.detail;
88            this.checked = detail.checked
89            this.dispatchEvent(new CustomEvent("onchange", {detail}))
90        })
91    }
92
93    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
94        if (name == 'checked') {
95            this._checkBox!.checked = newValue !== null;
96        }
97        if (name == 'value') {
98            this._checkBox!.value = newValue
99        }
100        if (name == 'des') {
101            this._des!.textContent = newValue
102        }
103    }
104}
105
106export interface checkDesBean {
107    value: string;
108    isSelect: boolean;
109    des: string;
110}
111