Convert ha-progress-button to lit (#6728)

src/components/buttons/ha-progress-button.js

@@ -1,110 +0,0 @@
-import "@material/mwc-button";
-import "../ha-circular-progress";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HaProgressButton extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          outline: none;
-        }
-        .container {
-          position: relative;
-          display: inline-block;
-        }
-
-        mwc-button {
-          transition: all 1s;
-        }
-
-        .success mwc-button {
-          --mdc-theme-primary: white;
-          background-color: var(--success-color);
-          transition: none;
-        }
-
-        .error mwc-button {
-          --mdc-theme-primary: white;
-          background-color: var(--error-color);
-          transition: none;
-        }
-
-        .progress {
-          @apply --layout;
-          @apply --layout-center-center;
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-      </style>
-      <div class="container" id="container">
-        <mwc-button
-          id="button"
-          disabled="[[computeDisabled(disabled, progress)]]"
-          on-click="buttonTapped"
-        >
-          <slot></slot>
-        </mwc-button>
-        <template is="dom-if" if="[[progress]]">
-          <div class="progress">
-            <ha-circular-progress active size="small"></ha-circular-progress>
-          </div>
-        </template>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      progress: {
-        type: Boolean,
-        value: false,
-      },
-
-      disabled: {
-        type: Boolean,
-        value: false,
-      },
-    };
-  }
-
-  tempClass(className) {
-    const classList = this.$.container.classList;
-    classList.add(className);
-    setTimeout(() => {
-      classList.remove(className);
-    }, 1000);
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener("click", (ev) => this.buttonTapped(ev));
-  }
-
-  buttonTapped(ev) {
-    if (this.progress) ev.stopPropagation();
-  }
-
-  actionSuccess() {
-    this.tempClass("success");
-  }
-
-  actionError() {
-    this.tempClass("error");
-  }
-
-  computeDisabled(disabled, progress) {
-    return disabled || progress;
-  }
-}
-
-customElements.define("ha-progress-button", HaProgressButton);

src/components/buttons/ha-progress-button.ts

@@ -0,0 +1,97 @@
+import "@material/mwc-button";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+import "../ha-circular-progress";
+
+@customElement("ha-progress-button")
+class HaProgressButton extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public progress = false;
+
+  public render(): TemplateResult {
+    return html`
+      <mwc-button
+        .disabled=${this.disabled || this.progress}
+        @click=${this._buttonTapped}
+      >
+        <slot></slot>
+      </mwc-button>
+      ${this.progress
+        ? html`<div class="progress">
+            <ha-circular-progress size="small" active></ha-circular-progress>
+          </div>`
+        : ""}
+    `;
+  }
+
+  public actionSuccess(): void {
+    this._tempClass("success");
+  }
+
+  public actionError(): void {
+    this._tempClass("error");
+  }
+
+  private _tempClass(className: string): void {
+    this.classList.add(className);
+    setTimeout(() => {
+      this.classList.remove(className);
+    }, 1000);
+  }
+
+  private _buttonTapped(ev: Event): void {
+    if (this.progress) {
+      ev.stopPropagation();
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        outline: none;
+        display: inline-block;
+        position: relative;
+      }
+
+      mwc-button {
+        transition: all 1s;
+      }
+
+      .success mwc-button {
+        --mdc-theme-primary: white;
+        background-color: var(--success-color);
+        transition: none;
+      }
+
+      .error mwc-button {
+        --mdc-theme-primary: white;
+        background-color: var(--error-color);
+        transition: none;
+      }
+
+      .progress {
+        bottom: 0;
+        margin-top: 4px;
+        position: absolute;
+        text-align: center;
+        top: 0;
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-progress-button": HaProgressButton;
+  }
+}