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 this._titleContext?.setAttribute('title', value || ''); 45 } 46 get titleTxt(): string { 47 return this.titleContent || ''; 48 } 49 connectedCallback(): void {} 50 initElements(): void { 51 this.closeBtn = this.shadowRoot?.querySelector('.icon-box'); 52 this.headline = this.shadowRoot?.querySelector('#headline'); 53 this._titleContext = this.shadowRoot?.querySelector('#titleContext'); 54 this.closeBtn!.addEventListener('click', () => { 55 this.headline!.style.display = 'none'; 56 this.closeCallback(); 57 }); 58 } 59 clear(): void { 60 this.titleTxt = ''; 61 this.isShow = false; 62 } 63 64 initHtml(): string { 65 return ` 66 <style> 67 :host([show]) #headline{ 68 display: block; 69 } 70 :host(:not([show])) #headline{ 71 display: none; 72 } 73 #headline { 74 width:${this.getAttribute('width') ? Number(this.getAttribute('width')) : '100%'}; 75 } 76 .icon-box { 77 background-color: var(--bark-expansion, #0c65d1); 78 border-radius: 5px; 79 color: #fff; 80 margin: 0px 10px; 81 width: 40px; 82 height: 20px; 83 text-align: center; 84 } 85 .icon { 86 width: 16px; 87 height: 16px; 88 cursor: pointer; 89 line-height: 16px; 90 text-align: center; 91 color: white; 92 } 93 #titleContext { 94 flex: 1; 95 overflow: hidden; 96 text-overflow: ellipsis; 97 white-space: nowrap; 98 } 99 </style> 100 <div id="headline"> 101 <div style="display: flex"> 102 <div class="icon-box"> 103 <lit-icon class='icon' name="close-light"></lit-icon> 104 </div> 105 <label id="titleContext">${this.getAttribute('titleTxt') ? this.getAttribute('titleTxt') : ''}</label> 106 </div> 107 </div> 108 `; 109 } 110} 111