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 */ 15import {BaseElement} from '../BaseElement.js'; 16 17const initHtmlStyle = ` 18 <style> 19 :host(:not([collapsed])){ 20 width: 248px; 21 display: flex; 22 background-color: var(--dark-background); 23 cursor: pointer; 24 flex-direction: column; 25 } 26 :host{ 27 user-select: none; 28 transition: background-color .3s; 29 } 30 :host(:not([collapsed])),:host(:not([second])) ::slotted(lit-main-menu-item){ 31 display: flex; 32 } 33 host(:not([collapsed])) :host([second]) ::slotted(lit-main-menu-group){ 34 display:flex; 35 } 36 :host([second]) .group-name{ 37 padding-left:40px; 38 } 39 :host(:not([collapsed])) .group-describe{ 40 height: 0; 41 visibility: hidden; 42 padding:0; 43 } 44 :host([collapsed]):hover){ 45 background-color: #FFFFFF; 46 } 47 :host([collapsed]){ 48 width: 248px; 49 display: flex; 50 flex-direction: column; 51 cursor: pointer; 52 background-color: var(--dark-background); 53 } 54 :host([collapsed]) .group-describe{ 55 height: auto; 56 visibility: visible; 57 } 58 :host([radius]) { 59 border-radius: 16px 0px 0px 16px ; 60 } 61 :host([collapsed]) ::slotted(lit-main-menu-item){ 62 display: none; 63 } 64 :host([collapsed]) ::slotted(lit-main-menu-group){ 65 display:none; 66 } 67 :host(:not([describe])) .group-describe{ 68 display:none; 69 } 70 :host([describe]) .group-describe{ 71 padding: 4px 24px 0 24px; 72 color: #999 !important; 73 font-size: 12px; 74 } 75 :host([describe]) .group-name{ 76 margin-top: 10px; 77 } 78 .group-name{ 79 display:flex; 80 font-size: 14px; 81 font-family: Helvetica; 82 color: #000; 83 padding: 15px 24px 5px 10px; 84 line-height: 16px; 85 font-weight: 400; 86 text-align: left; 87 } 88 :host([collapsed]) .icon{ 89 transform: rotateZ(-90deg); 90 } 91 </style> 92 `; 93 94export class LitMainMenuGroup extends BaseElement { 95 static get observedAttributes() { 96 return ['title', 'describe', 'collapsed', 'nocollapse', 'radius', 'second', 'icon']; 97 } 98 99 get second() { 100 return this.hasAttribute('second'); 101 } 102 103 set second(value) { 104 if (value) { 105 this.setAttribute('second', ''); 106 } else { 107 this.removeAttribute('second'); 108 } 109 } 110 111 get collapsed() { 112 return this.hasAttribute('collapsed'); 113 } 114 115 set collapsed(value) { 116 if (value) { 117 this.setAttribute('collapsed', ''); 118 } else { 119 this.removeAttribute('collapsed'); 120 } 121 } 122 123 get nocollapsed() { 124 return this.hasAttribute('nocollapsed'); 125 } 126 127 set nocollapsed(value) { 128 if (value) { 129 this.setAttribute('nocollapsed', ''); 130 } else { 131 this.removeAttribute('nocollapsed'); 132 } 133 } 134 135 get radius() { 136 return this.hasAttribute('radius'); 137 } 138 139 initElements() { 140 this.groupNameEl = this.shadowRoot.querySelector('.group-title'); 141 this.groupDescEl = this.shadowRoot.querySelector('.group-describe'); 142 this.iconEl = this.shadowRoot.querySelector('.icon'); 143 this.group = this.shadowRoot.querySelector('#group'); 144 this.group.addEventListener('click', (e) => { 145 if (this.nocollapsed) { 146 return; 147 } 148 this.collapsed = !this.collapsed; 149 }); 150 } 151 152 initHtml() { 153 return ` 154 ${initHtmlStyle} 155 <div id="group"> 156 <div class="group-name"> 157 <lit-icon class="icon" name="user" size="20"></lit-icon> 158 <span class="group-title"></span> 159 </div> 160 <div class="group-describe"></div> 161 </div> 162 <slot></slot> 163 `; 164 } 165 166 attributeChangedCallback(name, oldValue, newValue) { 167 switch (name) { 168 case 'title': 169 if (this.groupNameEl) { 170 this.groupNameEl.textContent = newValue; 171 } 172 break; 173 case 'describe': 174 if (this.groupDescEl) { 175 this.groupDescEl.textContent = newValue; 176 } 177 break; 178 case 'icon': 179 if (this.iconEl) { 180 this.iconEl.setAttribute('name', newValue); 181 } 182 break; 183 } 184 } 185} 186 187if (!customElements.get('lit-main-menu-group')) { 188 customElements.define('lit-main-menu-group', LitMainMenuGroup); 189} 190