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-group') 20export class LitMainMenuGroup extends BaseElement { 21 protected _collapsed: boolean | undefined; 22 private groupNameEl: HTMLElement | null | undefined; 23 private groupDescEl: HTMLElement | null | undefined; 24 25 static get observedAttributes() { 26 return ['title', 'describe', 'collapsed', 'nocollapse', "radius"] 27 } 28 29 get collapsed(): boolean { 30 return this.hasAttribute('collapsed') 31 } 32 33 set collapsed(value: boolean) { 34 if (value) { 35 this.setAttribute('collapsed', '') 36 } else { 37 this.removeAttribute('collapsed') 38 } 39 } 40 41 get nocollapsed() { 42 return this.hasAttribute('nocollapsed') 43 } 44 45 set nocollapsed(value: boolean) { 46 if (value) { 47 this.setAttribute('nocollapsed', '') 48 } else { 49 this.removeAttribute('nocollapsed') 50 } 51 } 52 53 get radius() { 54 return this.hasAttribute("radius") 55 } 56 57 initElements(): void { 58 this.groupNameEl = this.shadowRoot?.querySelector('.group-name'); 59 this.groupDescEl = this.shadowRoot?.querySelector('.group-describe'); 60 this.addEventListener('click', (e) => { 61 if (this.nocollapsed) { 62 return; 63 } 64 this.collapsed = !this.collapsed 65 }) 66 } 67 68 initHtml(): string { 69 return ` 70 <style> 71 :host{ 72 transition: background-color .3s; 73 user-select: none; 74 } 75 :host(:not([collapsed])){ 76 display: flex; 77 flex-direction: column; 78 width: 248px; 79 background-color: var(--dark-background,#FFFFFF); 80 cursor: pointer; 81 } 82 :host(:not([collapsed])) ::slotted(lit-main-menu-item){ 83 display: flex; 84 } 85 :host(:not([collapsed])) .group-describe{ 86 visibility: hidden; 87 height: 0; 88 } 89 :host([collapsed]){ 90 display: flex; 91 flex-direction: column; 92 width: 248px; 93 background-color: var(--dark-background,#FFFFFF); 94 cursor: pointer; 95 } 96 :host([collapsed]):hover){ 97 background-color: #FFFFFF; 98 } 99 :host([collapsed]) ::slotted(lit-main-menu-item){ 100 display: none; 101 } 102 :host([collapsed]) .group-describe{ 103 visibility: visible; 104 height: auto; 105 } 106 :host([radius]) { 107 border-radius: 16px 0px 0px 16px ; 108 } 109 .group-name{ 110 font-family: Helvetica; 111 font-size: 14px; 112 color: var(--dark-color1,#212121); 113 text-align: left; 114 line-height: 16px; 115 font-weight: 400; 116 padding: 20px 24px 0px 24px; 117 } 118 .group-describe{ 119 color:#92959b; 120 padding: 4px 24px 20px 24px; 121 font-size: .6rem; 122 } 123 124 </style> 125 <div class="group-name"></div> 126 <div class="group-describe"></div> 127 <slot></slot> 128 `; 129 } 130 131 attributeChangedCallback(name: string, oldValue: string, newValue: string) { 132 switch (name) { 133 case "title": 134 if (this.groupNameEl) this.groupNameEl.textContent = newValue 135 break; 136 case "describe": 137 if (this.groupDescEl) this.groupDescEl.textContent = newValue 138 break; 139 } 140 } 141} 142