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"; 17 18 19@element('tab-progress-bar') 20export class TabProgressBar extends BaseElement { 21 22 initElements(): void { 23 let data: Array<string> = this.getAttribute("data")!.split(",") 24 let first: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector<HTMLDivElement>("#first") 25 let second: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector<HTMLDivElement>("#second") 26 if (data!.length > 0 && data && data![2] != "0") { 27 if (parseInt(data[0]) < 0) { 28 first!.style.width = (Number((Math.abs(parseInt(data[0])) / parseInt(data[2])) * 100)).toFixed(2) + "%" 29 first!.style.background = "#FC74FF" 30 } else { 31 first!.style.width = (Number((parseInt(data[0]) / parseInt(data[2])) * 100)).toFixed(2) + "%" 32 } 33 if (parseInt(data[1]) < 0) { 34 second!.style.width = (Number((Math.abs(parseInt(data[1])) / parseInt(data[2])) * 100)).toFixed(2) + "%" 35 first!.style.background = "#CC34CF" 36 } else { 37 second!.style.width = (Number((parseInt(data[1]) / parseInt(data[2])) * 100)).toFixed(2) + "%" 38 } 39 } 40 41 } 42 43 initHtml(): string { 44 return ` 45 <style> 46 :host{ 47 width: 100%;height: 15px;display: flex; 48 } 49 </style> 50 <div style="width: 0%;background: #AC49F5;" id="first"> 51 </div> 52 <div style="width: 0%;background: #8D32FF;" id="second"> 53 </div> 54 `; 55 } 56} 57