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