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