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