• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// @ts-nocheck
2/*
3 * Copyright (C) 2022 Huawei Device Co., Ltd.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *     http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
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    initElements(): void {
53        this.rootEL = this.shadowRoot?.querySelector('.root');
54        this.titleEl = this.shadowRoot?.querySelector('.name');
55        this.iconEl = this.shadowRoot?.querySelector('.icon');
56        this.fileEL = this.shadowRoot?.querySelector('.file');
57    }
58
59    isFile(): boolean {
60        if (this.hasAttribute("file")) {
61            if (this.fileEL) {
62                return true
63            }
64        }
65        return false
66    }
67
68    connectedCallback() {
69        if (this.hasAttribute("file")) {
70            if (this.fileEL) {
71                this.fileEL.addEventListener('change', () => {
72                    let files = this.fileEL!.files;
73                    if (files && files.length > 0) {
74                        this.dispatchEvent(new CustomEvent('file-change', {target: this, detail: files[0]}))
75                        if (this.fileEL) this.fileEL.value = ''
76                    }
77                });
78            }
79        }
80        this.addEventListener('click', e => {
81            e.stopPropagation();
82        })
83    }
84
85    initHtml(): string {
86        return `
87<style>
88    :host{
89        user-select: none;
90        display: flex;
91        font-family: Helvetica;
92        opacity: 0.6;
93        font-size: 14px;
94        color: var(--dark-color,rgba(0,0,0,0.6));
95        text-align: left;
96        line-height: 20px;
97        font-weight: 400
98        background-color: #FFFFFF;
99        transition: background-color .3s;
100    }
101    :host(:not([disabled]):hover){
102        display: flex;
103        background-color: var(--dark-background8,#0A59F7);
104        color: #FFFFFF;
105        cursor: pointer;
106    }
107    :host([disabled]:hover){
108        display: flex;
109        cursor:not-allowed;
110    }
111    :host([disabled]) .root{
112        cursor:not-allowed;
113        display: flex;
114        align-items: center;
115        padding: 10px 24px;
116        width: 100%;
117    }
118    :host(:not([disabled])) .root{
119        cursor:pointer;
120        display: flex;
121        align-items: center;
122        padding: 10px 24px;
123        width: 100%;
124    }
125    .name{
126        padding-left: 10px;
127        cursor: pointer;
128    }
129    .icon{
130        pointer-events: none;
131    }
132    :host(:not([file])) .name{
133        pointer-events: none;
134    }
135    :host(:not([file])) .root{
136        pointer-events: none;
137    }
138    :host([file]) .name{
139        pointer-events: none;
140    }
141    :host([file]) .icon{
142        pointer-events: none;
143    }
144</style>
145<input id="file" class="file" type="file" style="display:none;pointer-events: none" />
146<label class="root" for="file">
147    <lit-icon class="icon" name="user" size="20"></lit-icon>
148    <label class="name"></label>
149</label>
150`;
151    }
152
153    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
154        switch (name) {
155            case "title":
156                if (this.titleEl) this.titleEl.textContent = newValue;
157                break;
158            case "icon":
159                if (this.iconEl) this.iconEl.setAttribute("name", newValue)
160                break;
161        }
162    }
163}
164