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 16 17import {BaseElement, element} from "../BaseElement.js"; 18 19@element('lit-main-menu-item') 20export class LitMainMenuItem extends BaseElement { 21 private titleEl: HTMLElement | null | undefined; 22 private rootEL: HTMLElement | null | undefined; 23 private iconEl: HTMLElement | null | undefined; 24 private fileEL: HTMLInputElement | undefined | null; 25 26 static get observedAttributes() { 27 return ['title', 'icon', 'file', 'disabled'] 28 } 29 30 get title(): string { 31 return this.getAttribute("title") || "" 32 } 33 34 set title(val: string) { 35 this.setAttribute("title", val); 36 } 37 38 get disabled(): boolean { 39 return this.hasAttribute("disabled") 40 } 41 42 set disabled(val: boolean) { 43 if (val) { 44 this.setAttribute("disabled", val.toString()); 45 this.fileEL?.setAttribute("disabled", val.toString()); 46 } else { 47 this.removeAttribute("disabled"); 48 this.fileEL?.removeAttribute("disabled"); 49 } 50 } 51 52 get back(): boolean { 53 return this.hasAttribute("back") 54 } 55 56 set back(isShowBack: boolean) { 57 if (isShowBack) { 58 this.setAttribute("back", ''); 59 } else { 60 this.removeAttribute("back"); 61 } 62 } 63 64 initElements(): void { 65 this.rootEL = this.shadowRoot?.querySelector('.root'); 66 this.titleEl = this.shadowRoot?.querySelector('.name'); 67 this.iconEl = this.shadowRoot?.querySelector('.icon'); 68 this.fileEL = this.shadowRoot?.querySelector('.file'); 69 } 70 71 isFile(): boolean { 72 if (this.hasAttribute("file")) { 73 if (this.fileEL) { 74 return true 75 } 76 } 77 return false 78 } 79 80 connectedCallback() { 81 if (this.hasAttribute("file")) { 82 if (this.fileEL) { 83 this.fileEL.addEventListener('change', () => { 84 let files = this.fileEL!.files; 85 if (files && files.length > 0) { 86 // @ts-ignore 87 this.dispatchEvent(new CustomEvent('file-change', {target: this, detail: files[0]})) 88 if (this.fileEL) this.fileEL.value = '' 89 } 90 }); 91 } 92 } 93 this.addEventListener('click', e => { 94 e.stopPropagation(); 95 }) 96 } 97 98 initHtml(): string { 99 return ` 100 <style> 101 :host{ 102 user-select: none; 103 display: flex; 104 font-family: Helvetica; 105 opacity: 0.6; 106 font-size: 14px; 107 color: var(--dark-color,rgba(0,0,0,0.6)); 108 text-align: left; 109 line-height: 20px; 110 font-weight: 400 111 background-color: #FFFFFF; 112 transition: background-color .3s; 113 } 114 :host(:not([disabled]):hover){ 115 display: flex; 116 background-color: var(--dark-background8,#0A59F7); 117 color: #FFFFFF; 118 cursor: pointer; 119 } 120 :host([disabled]:hover){ 121 display: flex; 122 /*background-color:#3391FF;*/ 123 /*color: #FFFFFF;*/ 124 cursor:not-allowed; 125 } 126 :host([disabled]) .root{ 127 cursor:not-allowed; 128 display: flex; 129 align-items: center; 130 padding: 10px 24px; 131 width: 100%; 132 } 133 :host(:not([disabled])) .root{ 134 cursor:pointer; 135 display: flex; 136 align-items: center; 137 padding: 10px 24px; 138 width: 100%; 139 } 140 .name{ 141 padding-left: 10px; 142 cursor: pointer; 143 } 144 .icon{ 145 pointer-events: none; 146 } 147 :host(:not([file])) .name{ 148 pointer-events: none; 149 } 150 :host(:not([file])) .root{ 151 pointer-events: none; 152 } 153 :host([file]) .name{ 154 pointer-events: none; 155 } 156 :host([file]) .icon{ 157 pointer-events: none; 158 } 159 160 :host([back]) { 161 background-color: var(--dark-background8,#0A59F7); 162 } 163 164 </style> 165 <input id="file" class="file" type="file" style="display:none;pointer-events: none" /> 166 <label class="root" for="file"> 167 <lit-icon class="icon" name="user" size="20"></lit-icon> 168 <label class="name"></label> 169 </label> 170 `; 171 } 172 173 attributeChangedCallback(name: string, oldValue: string, newValue: string) { 174 switch (name) { 175 case "title": 176 if (this.titleEl) this.titleEl.textContent = newValue; 177 break; 178 case "icon": 179 if (this.iconEl) this.iconEl.setAttribute("name", newValue) 180 break; 181 } 182 } 183} 184