• 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, LitCheckBoxChangeEvent } 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: CustomEventInit<LitCheckBoxChangeEvent>) => {
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