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';
17
18@element('lit-headline')
19export class LitHeadLine extends BaseElement {
20  private titleContent: string = '';
21  private _isShow: Boolean = false;
22  private headline: HTMLDivElement | null | undefined;
23  private closeBtn: HTMLDivElement | null | undefined;
24  private _titleContext: HTMLLabelElement | null | undefined;
25  private _width: number = 0;
26  public closeCallback = function (): void {};
27  static get observedAttributes(): string[] {
28    return ['_isShow', 'width', 'titleTxt'];
29  }
30  set isShow(value: Boolean) {
31    this._isShow = value;
32    if (value) {
33      this.headline!.style.display = 'block';
34    } else {
35      this.headline!.style.display = 'none';
36    }
37  }
38  get isShow(): Boolean {
39    return this._isShow;
40  }
41  set titleTxt(value: string) {
42    this.titleContent = value;
43    this._titleContext!.innerHTML = value;
44  }
45  get titleTxt(): string {
46    return this.titleContent || '';
47  }
48  connectedCallback(): void {}
49  initElements(): void {
50    this.closeBtn = this.shadowRoot?.querySelector('.icon-box');
51    this.headline = this.shadowRoot?.querySelector('#headline');
52    this._titleContext = this.shadowRoot?.querySelector('#titleContext');
53    this.closeBtn!.addEventListener('click', () => {
54      this.headline!.style.display = 'none';
55      this.closeCallback();
56    });
57  }
58  clear(): void {
59    this.titleTxt = '';
60    this.isShow = false;
61  }
62
63  initHtml(): string {
64    return `
65        <style>
66        :host([show]) #headline{
67          display: block;
68        }
69        :host(:not([show])) #headline{
70          display: none;
71        }
72        #headline {
73          width:${this.getAttribute('width') ? Number(this.getAttribute('width')) : '100%'};
74        }
75        .icon-box {
76          background-color: var(--bark-expansion, #0c65d1);
77          border-radius: 5px;
78          color: #fff;
79          margin: 0px 10px;
80          width: 40px;
81          height: 20px;
82          text-align: center;
83        }
84        .icon {
85          width: 16px;
86          height: 16px;
87          cursor: pointer;
88          line-height: 16px;
89          text-align: center;
90          color: white;
91        }
92        #titleContext {
93          flex: 1;
94          overflow: hidden;
95          text-overflow: ellipsis;
96          white-space: nowrap;
97        }
98        </style>
99        <div id="headline">
100          <div style="display: flex">
101            <div class="icon-box">
102              <lit-icon class='icon' name="close-light"></lit-icon>
103            </div>
104            <label id="titleContext">${this.getAttribute('titleTxt') ? this.getAttribute('titleTxt') : ''}</label>
105          </div>
106        </div> 
107        `;
108  }
109}
110