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-button')
19export class LitButton extends BaseElement {
20  private slotHtml: HTMLElement | undefined;
21  private button: HTMLButtonElement | null | undefined;
22  private litIcon: LitButton | null | undefined;
23
24  static get observedAttributes(): string[] {
25    return [
26      'text',
27      'back',
28      'icon',
29      'height',
30      'width',
31      'color',
32      'font_size',
33      'border',
34      'padding',
35      'justify_content',
36      'border_radius',
37      'margin_icon',
38      'opacity',
39    ];
40  }
41
42  get text(): string {
43    return this.getAttribute('text') || '';
44  }
45
46  set text(text: string) {
47    this.setAttribute('text', text);
48  }
49
50  get back(): string {
51    return this.getAttribute('back') || '';
52  }
53
54  set back(backColor: string) {
55    this.button!.style.backgroundColor = backColor;
56    this.setAttribute('back', backColor);
57  }
58
59  get icon(): string {
60    return this.getAttribute('icon') || '';
61  }
62
63  set icon(icon: string) {
64    this.litIcon?.setAttribute('name', icon);
65    this.setAttribute('icon', icon);
66    if (icon) {
67      this.litIcon!.style.display = 'block';
68    }
69  }
70
71  get height(): string {
72    return this.getAttribute('height') || '';
73  }
74
75  set height(height: string) {
76    this.setAttribute('height', height);
77  }
78
79  get width(): string {
80    return this.getAttribute('width') || '';
81  }
82
83  set width(width: string) {
84    this.setAttribute('width', width);
85  }
86
87  set color(color: string) {
88    this.setAttribute('color', color);
89  }
90
91  set font_size(fontSize: string) {
92    this.setAttribute('font_size', fontSize);
93  }
94
95  set border(border: string) {
96    this.setAttribute('border', border);
97  }
98
99  set padding(padding: string) {
100    this.setAttribute('padding', padding);
101  }
102
103  set justify_content(justifyContent: string) {
104    this.setAttribute('justify_content', justifyContent);
105  }
106
107  set border_radius(borderRadius: string) {
108    this.setAttribute('border_radius', borderRadius);
109  }
110
111  set margin_icon(value: string) {
112    this.litIcon?.setAttribute('margin_icon', value);
113  }
114
115  set opacity(value: string) {
116    this.litIcon?.setAttribute('opacity', value);
117  }
118
119  set hidden(hidden: boolean) {
120    if (hidden) {
121      this.setAttribute('hidden', 'true');
122      this.style.display = 'none';
123    } else {
124      this.removeAttribute('hidden');
125      this.style.display = 'block';
126    }
127  }
128
129  initHtml(): string {
130    return `
131        ${this.initHtmlStyle()}
132        <div id='custom-div'>
133                <button id="custom-button" type="button">
134                    <slot id="sl" tyle= "padding: 10px"></slot>
135                    <lit-icon id="button-icon" name="" size="18" style= "margin-left: 10px" color="var(--dark-color1,#4D4D4D)"></lit-icon>
136                 </button>
137            </div>
138            `;
139  }
140
141  private initHtmlStyle(): string {
142    return `
143    <style>
144        :host{ 
145            display: block;
146            width: 100%;
147            height: 100%;
148            position: relative;
149            background: background: var(--dark-background3,#FFFFFF);
150        }
151        
152        #custom-button{ 
153            display: flex;
154            flex-direction: row;
155            align-items: center;
156            align-content: center;
157            justify-content: right;
158            cursor: pointer;
159            color: var(--dark-background3,#FFFFFF);
160            background: var(--dark-background3,#FFFFFF);
161            border: 2px solid #409eff;
162            border-radius: 20px;
163            padding: 15px;
164            transition: opacity 0.2s;
165            outline: none;
166            position: relative;
167         }
168            #custom-button::before {
169              position: absolute;
170              top: 50%;
171              left: 50%;
172              width: 100%;
173              height: 100%;
174              background-color: #000;
175              border: inherit;
176              border-color: #000;
177              border-radius: inherit;
178              transform: translate(-50%, -50%);
179              opacity: 0;
180              content: ' ';
181            }
182            #custom-button:active::before {
183              opacity: 0.1;
184            }
185        </style>
186    `;
187  }
188
189  initElements(): void {
190    this.slotHtml = this.shadowRoot?.querySelector('#sl') as HTMLElement;
191    this.button = this.shadowRoot?.querySelector('#custom-button');
192    this.litIcon = this.shadowRoot?.querySelector('#button-icon') as LitButton;
193    if (this.litIcon.getAttribute('name') === '') {
194      this.litIcon!.style.display = 'none';
195    }
196  }
197
198  attributeChangedCallback(name: string, oldValue: string, value: string): void {
199    switch (name) {
200      case 'text':
201        this.slotHtml!.innerText = value;
202        break;
203      case 'back':
204        this.button!.style.backgroundColor = value;
205        break;
206      case 'icon':
207        this.litIcon?.setAttribute('name', value);
208        if (value) {
209          this.litIcon!.style.display = 'block';
210        }
211        break;
212      case 'height':
213        this.button!.style.height = value;
214        break;
215      case 'color':
216        this.button!.style.color = value;
217        break;
218      case 'font_size':
219        this.button!.style.fontSize = value;
220        break;
221      case 'border':
222        this.button!.style.border = value;
223        break;
224      case 'padding':
225        this.button!.style.padding = value;
226        break;
227      case 'justify_content':
228        this.button!.style.justifyContent = value;
229        break;
230      case 'border_radius':
231        this.button!.style.borderRadius = value;
232        break;
233      case 'margin_icon':
234        this.litIcon!.style.margin = value;
235        break;
236      case 'opacity':
237        this.button!.style.opacity = value;
238        break;
239    }
240  }
241}
242