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