Migrate more-info configurator (#11792)

* Migrate more-info configurator

* Update more-info-configurator.ts

* Update src/dialogs/more-info/controls/more-info-configurator.ts

* Update src/dialogs/more-info/controls/more-info-configurator.ts

Co-authored-by: Zack Barett <zackbarett@hey.com>

* Import

Co-authored-by: Zack Barett <zackbarett@hey.com>

src/dialogs/more-info/controls/more-info-configurator.js

@@ -1,148 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../components/ha-circular-progress";
-import "../../../components/ha-markdown";
-
-class MoreInfoConfigurator extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="iron-flex"></style>
-      <style>
-        p {
-          margin: 8px 0;
-        }
-
-        a {
-          color: var(--primary-color);
-        }
-
-        p > img {
-          max-width: 100%;
-        }
-
-        p.center {
-          text-align: center;
-        }
-
-        p.error {
-          color: #c62828;
-        }
-
-        p.submit {
-          text-align: center;
-          height: 41px;
-        }
-
-        ha-circular-progress {
-          width: 14px;
-          height: 14px;
-          margin-right: 20px;
-        }
-
-        [hidden] {
-          display: none;
-        }
-      </style>
-
-      <div class="layout vertical">
-        <template is="dom-if" if="[[isConfigurable]]">
-          <ha-markdown
-            breaks
-            content="[[stateObj.attributes.description]]"
-          ></ha-markdown>
-
-          <p class="error" hidden$="[[!stateObj.attributes.errors]]">
-            [[stateObj.attributes.errors]]
-          </p>
-
-          <template is="dom-repeat" items="[[stateObj.attributes.fields]]">
-            <paper-input
-              label="[[item.name]]"
-              name="[[item.id]]"
-              type="[[item.type]]"
-              on-change="fieldChanged"
-            ></paper-input>
-          </template>
-
-          <p class="submit" hidden$="[[!stateObj.attributes.submit_caption]]">
-            <mwc-button
-              raised=""
-              disabled="[[isConfiguring]]"
-              on-click="submitClicked"
-            >
-              <ha-circular-progress
-                active="[[isConfiguring]]"
-                hidden="[[!isConfiguring]]"
-                alt="Configuring"
-              ></ha-circular-progress>
-              [[stateObj.attributes.submit_caption]]
-            </mwc-button>
-          </p>
-        </template>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      stateObj: {
-        type: Object,
-      },
-
-      action: {
-        type: String,
-        value: "display",
-      },
-
-      isConfigurable: {
-        type: Boolean,
-        computed: "computeIsConfigurable(stateObj)",
-      },
-
-      isConfiguring: {
-        type: Boolean,
-        value: false,
-      },
-
-      fieldInput: {
-        type: Object,
-        value: function () {
-          return {};
-        },
-      },
-    };
-  }
-
-  computeIsConfigurable(stateObj) {
-    return stateObj.state === "configure";
-  }
-
-  fieldChanged(ev) {
-    const el = ev.target;
-    this.fieldInput[el.name] = el.value;
-  }
-
-  submitClicked() {
-    const data = {
-      configure_id: this.stateObj.attributes.configure_id,
-      fields: this.fieldInput,
-    };
-
-    this.isConfiguring = true;
-
-    this.hass.callService("configurator", "configure", data).then(
-      () => {
-        this.isConfiguring = false;
-      },
-      () => {
-        this.isConfiguring = false;
-      }
-    );
-  }
-}
-
-customElements.define("more-info-configurator", MoreInfoConfigurator);

src/dialogs/more-info/controls/more-info-configurator.ts

@@ -0,0 +1,128 @@
+import "@material/mwc-button";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-alert";
+import "../../../components/ha-circular-progress";
+import "../../../components/ha-markdown";
+import "../../../components/ha-textfield";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-configurator")
+export class MoreInfoConfigurator extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @state() private _isConfiguring = false;
+
+  private _fieldInput = {};
+
+  protected render(): TemplateResult {
+    if (this.stateObj?.state !== "configure") {
+      return html``;
+    }
+
+    return html`
+      <div class="container">
+        <ha-markdown
+          breaks
+          .content=${this.stateObj.attributes.description}
+        ></ha-markdown>
+
+        ${this.stateObj.attributes.errors
+          ? html`<ha-alert alert-type="error">
+              ${this.stateObj.attributes.errors}
+            </ha-alert>`
+          : ""}
+        ${this.stateObj.attributes.fields.map(
+          (field) => html`<ha-textfield
+            .label=${field.name}
+            .name=${field.id}
+            .type=${field.type}
+            @change=${this._fieldChanged}
+          ></ha-textfield>`
+        )}
+        ${this.stateObj.attributes.submit_caption
+          ? html`<p class="submit">
+              <mwc-button
+                raised
+                .disabled=${this._isConfiguring}
+                @click=${this._submitClicked}
+              >
+                ${this._isConfiguring
+                  ? html`<ha-circular-progress
+                      active
+                      alt="Configuring"
+                    ></ha-circular-progress>`
+                  : ""}
+                ${this.stateObj.attributes.submit_caption}
+              </mwc-button>
+            </p>`
+          : ""}
+      </div>
+    `;
+  }
+
+  private _fieldChanged(ev) {
+    const el = ev.target;
+    this._fieldInput[el.name] = el.value;
+  }
+
+  private _submitClicked() {
+    const data = {
+      configure_id: this.stateObj!.attributes.configure_id,
+      fields: this._fieldInput,
+    };
+
+    this._isConfiguring = true;
+
+    this.hass.callService("configurator", "configure", data).then(
+      () => {
+        this._isConfiguring = false;
+      },
+      () => {
+        this._isConfiguring = false;
+      }
+    );
+  }
+
+  static styles = css`
+    .container {
+      display: flex;
+      flex-direction: column;
+    }
+    p {
+      margin: 8px 0;
+    }
+
+    a {
+      color: var(--primary-color);
+    }
+
+    p > img {
+      max-width: 100%;
+    }
+
+    p.center {
+      text-align: center;
+    }
+
+    p.submit {
+      text-align: center;
+      height: 41px;
+    }
+
+    ha-circular-progress {
+      width: 14px;
+      height: 14px;
+      margin-right: 20px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-configurator": MoreInfoConfigurator;
+  }
+}