1/* 2 * Copyright (C) 2024 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 */ 15export const SearchHtml = ` 16 <style> 17 :host{ 18 } 19 .root{ 20 background-color: var(--dark-background5,#fff); 21 border-radius: 40px; 22 padding: 3px 20px; 23 display: flex; 24 justify-content: center; 25 align-items: center; 26 border: 1px solid var(--dark-border,#c5c5c5); 27 width: 35vw; 28 overflow: hidden; 29 } 30 .root input{ 31 outline: none; 32 width: max-content; 33 border: 0px; 34 background-color: transparent; 35 font-size: inherit; 36 color: var(--dark-color,#666666); 37 flex: 1; 38 height: auto; 39 vertical-align:middle; 40 line-height:inherit; 41 height:inherit; 42 padding: 6px 6px 6px 6px; 43 max-height: inherit; 44 box-sizing: border-box; 45 } 46 ::placeholder { 47 color: #b5b7ba; 48 font-size: 1em; 49 } 50 .write::placeholder { 51 color: #b5b7ba; 52 font-size: 1em; 53 } 54 .readonly::placeholder { 55 color: #4f7ab3; 56 font-size: 1em; 57 } 58 .text-Roll::placeholder { 59 font-weight: 700; 60 color: #DB5860; 61 font-size: 1em; 62 } 63 :host([show-search-info]) .search-info{ 64 display: inline-flex; 65 higth:100%!important; 66 justify-content: center; 67 align-items: center; 68 } 69 :host(:not([show-search-info])) .search-info{ 70 display: none; 71 } 72 :host(:not([distributed])) #trace_select{ 73 display: none; 74 } 75 :host([distributed]) #trace_select{ 76 display: block; 77 } 78 .search-info span{ 79 color:#ABABAB; 80 } 81 .search-info lit-icon{ 82 font-weight: bold; 83 } 84 85 :host([textRoll]) input { 86 position: relative; 87 animation: textRoll 5s ease-in-out 0s backwards; 88 white-space: nowrap; 89 overflow: hidden; 90 display: block; 91 text-overflow: ellipsis; 92 } 93 94 @keyframes textRoll { 95 0% { 96 left: 0; 97 } 98 100% { 99 left: 100%; 100 } 101 } 102 .search-history { 103 position: relative; 104 } 105 .search-history-list { 106 list-style-type: none; 107 margin: 0; 108 padding: 0; 109 position: absolute; 110 width: 37vw; 111 top: 100%; 112 background-color: #FFFFFF; 113 border: 1px solid #ddd; 114 max-height: 200px; 115 overflow-y: auto; 116 display: none; 117 border-radius: 0 0 20px 20px; 118 } 119 .search-history-list:hover{ 120 cursor: pointer; 121 } 122 .search-history-list-item { 123 overflow: hidden; 124 white-space: nowrap; 125 text-overflow: ellipsis; 126 cursor: pointer; 127 width: 100%; 128 } 129 .search-list:hover { 130 background-color: #e9e9e9; 131 } 132 .search-list { 133 display: flex; 134 justify-content: space-between; 135 padding-right: 20px; 136 padding-left: 45px; 137 } 138 #trace_selector{ 139 position: unset; 140 width: 100px; 141 margin-left: -10px; 142 border:none; 143 } 144 input[name="retarge_index"]{ 145 width:100px!important; 146 } 147 </style> 148 <div class="root" style="display: none"> 149 <div id="trace_select" style="border-right: 1px solid var(--dark-border,#c5c5c5)"> 150 <lit-select id="trace_selector" default-value="1" placement="bottom"></lit-select> 151 </div> 152 <lit-icon id="search-icon" name="search" size="22" color="#aaaaaa"></lit-icon> 153 154 <input name="search" class="readonly" placeholder="Search" readonly/> 155 <div class="search-info"> 156 <input name="retarge_index" placeholder="Go" oninput="value=value.replace(/^(0+)|[^0-9]/g,'')"/> 157 </div> 158 </div> 159 <div id="prompt" style="display: none"></div> 160 <div class="search-history"> 161 <ul class="search-history-list"></ul> 162 </div> 163 `; 164