• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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-icon')
20export class LitIcon extends BaseElement {
21    private view?: number
22    private icon: HTMLElement | undefined | null
23    private use: SVGUseElement | undefined | null
24    private d: SVGPathElement | undefined | null
25    private _name?: string
26    private _size?: number
27    private _color?: string
28    private _path?: string
29
30    static get observedAttributes() {
31        return ["name", "size", "color", "path"]
32    }
33
34    get name(): string {
35        return this.getAttribute("name") || "";
36    }
37
38    set name(value: string) {
39        this._name = value;
40        this.setAttribute("name", value)
41    }
42
43    get size(): number {
44        return parseInt(this.getAttribute("size") || '0', 10)
45    }
46
47    set size(value: number) {
48        this._size = value;
49        this.setAttribute("size", `${value}`)
50    }
51
52    set color(value: string) {
53        this._color = value;
54        this.setAttribute('color', value)
55    }
56
57    set path(value: string) {
58        this._path = value
59        this.setAttribute('path', value);
60    }
61
62    initHtml(): string {
63        return `
64            <style>
65                :host{
66                    font-size: inherit;
67                    display: inline-block;
68                    /*transition: .3s;*/
69                 }
70                 :host([spin]){
71                    animation: rotate 1.75s linear infinite;
72                 }
73                 @keyframes rotate {
74                    to{
75                        transform: rotate(360deg);
76                    }
77                 }
78                 .icon{
79                    display: block;
80                    width: 1em;
81                    height: 1em;
82                    margin: auto;
83                    fill: currentColor;
84                    overflow: hidden;
85                 }
86            </style>
87            <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 ${this.view || 1024} ${this.view || 1024}">
88                 ${this._path ? '<path id="path"></path>' : '<use id="use"></use>'}
89            </svg>
90            `;
91    }
92
93    initElements() {
94        if (this.shadowRoot) {
95            this.icon = this.shadowRoot.getElementById("icon");
96            this.use = this.shadowRoot.querySelector("use");
97            this.d = this.shadowRoot.querySelector("path");
98        }
99    }
100
101    attributeChangedCallback(name: string, oldValue: string, value: string) {
102        switch (name) {
103            case "name":
104                if (this.use) this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `./base-ui/icon.svg#icon-${value}`);
105                break;
106            case "path":
107                if (this.d) this.d.setAttribute("d", value);
108                break;
109            case "color":
110                if (this.icon) this.icon.style.color = value as string;
111                break;
112            case "size":
113                if (this.icon) this.icon.style.fontSize = `${value}px`;
114                break;
115        }
116    }
117}
118
119