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 ProgressBar extends HTMLElement {
16    static get observedAttributes() {
17        return ['loading'];
18    }
19
20    constructor() {
21        super();
22        this.attachShadow({mode: 'open'}).innerHTML = this.initHtml();
23    }
24
25    get loading() {
26        return this.hasAttribute('loading');
27    }
28
29    set loading(value) {
30        if (value) {
31            this.setAttribute('loading', '');
32        } else {
33            this.removeAttribute('loading');
34        }
35    }
36
37    initHtml() {
38        return `
39        <style>
40            :host{
41                width: 100%;
42                height: 1px;
43                display: flex;
44                position: absolute;
45                overflow: hidden;
46            }
47            .root{
48                width: 100%;
49                height: 100%;
50                position:relative;
51            }
52            :host([loading]) .track1{
53                position: absolute;
54                width: 30%;
55                height: 100%;
56                background-image:
57                linear-gradient(to right, transparent, #535da6, #535da6, #535da6, #535da6, #535da6, transparent);
58                left: -30%;
59                animation: anim 1.7s linear 0s infinite;
60            }
61            :host([loading]) .track2{
62                position: absolute;
63                width: 30%;
64                height: 100%;
65                background-image:
66                linear-gradient(to right,transparent, #535da6, #535da6, #535da6, #535da6, #535da6, transparent);
67                left: -30%;
68                animation: anim 1.7s  ease-in-out  0.7s infinite;
69            }
70            @keyframes anim {
71              0% {
72                left:-30%;
73              }
74
75              100% {
76                left:100%;
77              }
78            }
79
80        </style>
81        <div class="root">
82            <div class="track1"></div>
83            <div class="track2"></div>
84        </div>
85        `;
86    }
87}
88
89if (!customElements.get('lit-progress-bar')) {
90    customElements.define('lit-progress-bar', ProgressBar);
91}
92