Migrate Icon Button

esphome · Feb 11, 2024 · 6ce2c78 · 6ce2c78
1 parent 7fb24ba
commit 6ce2c78
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/src/components/ew-icon-button.ts b/src/components/ew-icon-button.ts
@@ -0,0 +1,15 @@
+import { IconButton } from "@material/web/iconbutton/internal/icon-button.js";
+import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles.css.js";
+import { styles } from "@material/web/iconbutton/internal/standard-styles.css.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-icon-button": EwIconButton;
+  }
+}
+
+export class EwIconButton extends IconButton {
+  static override styles = [sharedStyles, styles];
+}
+
+customElements.define("ew-icon-button", EwIconButton);
diff --git a/src/components/ewt-icon-button.ts b/src/components/ewt-icon-button.ts
diff --git a/src/install-dialog.ts b/src/install-dialog.ts
@@ -5,7 +5,7 @@ import "./components/ewt-checkbox";
 import "./components/ewt-console";
 import "./components/ewt-dialog";
 import "./components/ewt-formfield";
-import "./components/ewt-icon-button";
+import "./components/ew-icon-button";
 import "./components/ewt-textfield";
 import type { EwtTextfield } from "./components/ewt-textfield";
 import "./components/ewt-select";
@@ -134,9 +134,9 @@ export class EwtInstallDialog extends LitElement {
       >
         ${heading && allowClosing
           ? html`
-              <ewt-icon-button dialogAction="close">
+              <ew-icon-button dialogAction="close">
                 ${closeIcon}
-              </ewt-icon-button>
+              </ew-icon-button>
             `
           : ""}
         ${content!}
@@ -476,9 +476,9 @@ export class EwtInstallDialog extends LitElement {
                   Join other…
                 </ewt-list-item>
               </ewt-select>
-              <ewt-icon-button @click=${this._updateSsids}>
+              <ew-icon-button @click=${this._updateSsids}>
                 ${refreshIcon}
-              </ewt-icon-button>
+              </ew-icon-button>
             `
           : ""}
         ${
@@ -975,7 +975,7 @@ export class EwtInstallDialog extends LitElement {
       :host {
         --mdc-dialog-max-width: 390px;
       }
-      ewt-icon-button {
+      ew-icon-button {
         position: absolute;
         right: 4px;
         top: 10px;