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@element("sp-search") 19export class SpSearch extends BaseElement { 20 private search: HTMLInputElement | undefined | null; 21 22 setPercent(name: string = "", value: number) { 23 let searchHide = this.shadowRoot!.querySelector<HTMLElement>(".root") 24 let searchIcon = this.shadowRoot!.querySelector<HTMLElement>("#search-icon") 25 if (value > 0 && value <= 100) { 26 searchHide!.style.display = "flex" 27 searchHide!.style.backgroundColor = "var(--dark-background5,#e3e3e3)" 28 searchIcon?.setAttribute('name', "cloud-sync"); 29 this.search!.setAttribute('placeholder', `${name}${value}%`); 30 this.search!.setAttribute('readonly', ""); 31 this.search!.className = "readonly" 32 } else if (value > 100) { 33 searchHide!.style.display = "none" //flex 34 searchHide!.style.backgroundColor = "var(--dark-background5,#fff)" 35 searchIcon?.setAttribute('name', "search"); 36 this.search?.setAttribute('placeholder', `search`); 37 this.search?.removeAttribute('readonly'); 38 this.search!.className = "write" 39 } else if (value == -1) { 40 searchHide!.style.display = "flex" 41 searchHide!.style.backgroundColor = "var(--dark-background5,#e3e3e3)" 42 searchIcon?.setAttribute('name', "cloud-sync"); 43 this.search!.setAttribute('placeholder', `${name}`); 44 this.search!.setAttribute('readonly', ""); 45 this.search!.className = "readonly" 46 } else { 47 searchHide!.style.display = "none" 48 } 49 } 50 51 52 initElements(): void { 53 this.search = this.shadowRoot!.querySelector<HTMLInputElement>("input"); 54 this.search!.addEventListener("focus", (e) => { 55 this.dispatchEvent(new CustomEvent("focus", { 56 detail: { 57 value: this.search!.value 58 } 59 })); 60 }); 61 this.search!.addEventListener("blur", (e) => { 62 this.dispatchEvent(new CustomEvent("blur", { 63 detail: { 64 value: this.search!.value 65 } 66 })); 67 }); 68 this.search!.addEventListener("keypress", (e: KeyboardEvent) => { 69 if (e.code == "Enter") { 70 this.dispatchEvent(new CustomEvent("enter", { 71 detail: { 72 value: this.search!.value 73 } 74 })); 75 } 76 }); 77 } 78 79 initHtml(): string { 80 return ` 81<style> 82 :host{ 83 } 84 .root{ 85 background-color: var(--dark-background5,#fff); 86 border-radius: 40px; 87 padding: 3px 20px; 88 display: flex; 89 justify-content: center; 90 align-items: center; 91 border: 1px solid var(--dark-border,#c5c5c5); 92 } 93 .root input{ 94 outline: none; 95 border: 0px; 96 background-color: transparent; 97 font-size: inherit; 98 color: var(--dark-color,#666666); 99 width: 30vw; 100 height: auto; 101 vertical-align:middle; 102 line-height:inherit; 103 height:inherit; 104 padding: 6px 6px 6px 6px}; 105 max-height: inherit; 106 box-sizing: border-box; 107 108} 109::placeholder { 110 color: #b5b7ba; 111 font-size: 1em; 112} 113.write::placeholder { 114 color: #b5b7ba; 115 font-size: 1em; 116} 117.readonly::placeholder { 118 color: #4f7ab3; 119 font-size: 1em; 120} 121</style> 122<div class="root" style="display: none"> 123 <lit-icon id="search-icon" name="search" size="20" color="#aaaaaa"></lit-icon> 124 <input class="readonly" placeholder="Search" readonly/> 125 </div> 126 `; 127 } 128} 129