• 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';
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(): string[] {
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(): void {
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): void {
100    switch (name) {
101      case 'name':
102        if (this.use) {
103          let asciiValues = [104, 116, 116, 112, 58, 47, 47, 119, 119, 119, 46, 119, 51, 46, 111, 114, 103, 47, 49, 57, 57, 57, 47, 120, 108, 105, 110, 107];
104          let str = String.fromCharCode.apply(null, asciiValues);
105          this.use.setAttributeNS(str, 'xlink:href', `./base-ui/icon.svg#icon-${value}`);
106        }
107        break;
108      case 'path':
109        if (this.d) {
110          this.d.setAttribute('d', value);
111        }
112        break;
113      case 'color':
114        if (this.icon) {
115          this.icon.style.color = value as string;
116        }
117        break;
118      case 'size':
119        if (this.icon) {
120          this.icon.style.fontSize = `${value}px`;
121        }
122        break;
123    }
124  }
125}
126