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