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 */
15export class LitIcon extends HTMLElement {
16    constructor() {
17        super();
18        this.attachShadow({ mode: 'open' }).innerHTML = this.initHtml();
19        this.initElements();
20    }
21    static get observedAttributes() {
22        return ['name', 'size', 'color', 'path'];
23    }
24    get name() {
25        return this.getAttribute('name') || '';
26    }
27    set name(value) {
28        this.setAttribute('name', value);
29    }
30    get size() {
31        return parseInt(this.getAttribute('size') || '0', 10);
32    }
33    set size(value) {
34        this.setAttribute('size', `${value}`);
35    }
36    set color(value) {
37        this.setAttribute('color', value);
38    }
39    set path(value) {
40        this._path = value;
41        this.setAttribute('path', value);
42    }
43    initHtml() {
44        return `
45            <style>
46                :host{
47                    display: inline-block;
48                    font-size: inherit;
49                 }
50                 .icon{
51                    width: 1em;
52                    height: 1em;
53                    display: block;
54                    fill: currentColor;
55                    overflow: hidden;
56                    margin: auto;
57                 }
58                 @keyframes rotate {
59                    to{
60                        transform: rotate(360deg);
61                    }
62                 }
63                 :host([spin]){
64                    animation: rotate 1.75s linear infinite;
65                 }
66            </style>
67            <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 ${this.view || 1024} ${this.view || 1024}">
68                 ${this._path ? '<path id="path"></path>' : '<use id="use"></use>'}
69            </svg>
70            `;
71    }
72    initElements() {
73        if (this.shadowRoot) {
74            this.icon = this.shadowRoot.getElementById('icon');
75            this.use = this.shadowRoot.querySelector('use');
76            this.apPath = this.shadowRoot.querySelector('path');
77        }
78    }
79    attributeChangedCallback(name, oldValue, value) {
80        switch (name) {
81            case 'name':
82                if (this.use) {
83                    this.use.href.baseVal = `./base-ui/icon.svg#icon-${value}`;
84                }
85                break;
86            case 'path':
87                if (this.apPath) {
88                    this.apPath.setAttribute('apPath', value);
89                }
90                break;
91            case 'color':
92                if (this.icon) {
93                    this.icon.style.color = value;
94                }
95                break;
96            case 'size':
97                if (this.icon) {
98                    this.icon.style.fontSize = `${value}px`;
99                }
100                break;
101        }
102    }
103}
104if (!customElements.get('lit-icon')) {
105    customElements.define('lit-icon', LitIcon);
106}
107