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