Convert Z-Wave panel to TS/Lit (#3345)

* Convert zwave-network to typescript/lit

* Convert zwave-network to ts/lit

* Updates per code review

* missed one (hass? => hass!)

* Remove constructor

src/panels/config/zwave/zwave-network.ts

@@ -1,6 +1,17 @@
 import "@polymer/paper-icon-button/paper-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
 
 import "../../../components/buttons/ha-call-api-button";
 import "../../../components/buttons/ha-call-service-button";
@@ -8,10 +19,184 @@ import "../../../components/ha-service-description";
 import "../../../components/ha-card";
 import "../ha-config-section";
 
-class ZwaveNetwork extends PolymerElement {
+@customElement("zwave-network")
-  static get template() {
+export class ZwaveNetwork extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public isWide!: boolean;
+  @property() private _showHelp = false;
+
+  protected render(): TemplateResult | void {
     return html`
-      <style include="iron-flex ha-style">
+      <ha-config-section .isWide="${this.isWide}">
+        <div style="position: relative" slot="header">
+          <span>Z-Wave Network Management</span>
+          <paper-icon-button
+            class="toggle-help-icon"
+            @click="${this._onHelpTap}"
+            icon="hass:help-circle"
+          ></paper-icon-button>
+        </div>
+        <span slot="introduction">
+          Run commands that affect the Z-Wave network. You won't get feedback on
+          whether the command succeeded, but you can look in the OZW Log to try
+          to figure out.
+        </span>
+
+        <ha-card class="content">
+          <div class="card-actions">
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="add_node_secure"
+            >
+              Add Node Secure
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="add_node_secure"
+              ?hidden=${!this._showHelp}
+            >
+            </ha-service-description>
+
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="add_node"
+            >
+              Add Node
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="add_node"
+              ?hidden=${!this._showHelp}
+            >
+            </ha-service-description>
+
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="remove_node"
+            >
+              Remove Node
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="remove_node"
+              ?hidden=${!this._showHelp}
+            >
+            </ha-service-description>
+          </div>
+          <div class="card-actions warning">
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="cancel_command"
+            >
+              Cancel Command
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="cancel_command"
+              ?hidden=${!this._showHelp}
+            >
+            </ha-service-description>
+          </div>
+          <div class="card-actions">
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="heal_network"
+            >
+              Heal Network
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="heal_network"
+              ?hidden=${!this._showHelp}
+            ></ha-service-description>
+
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="start_network"
+            >
+              Start Network
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="start_network"
+              ?hidden=${!this._showHelp}
+            >
+            </ha-service-description>
+
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="stop_network"
+            >
+              Stop Network
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="stop_network"
+              ?hidden=${!this._showHelp}
+            >
+            </ha-service-description>
+
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="soft_reset"
+            >
+              Soft Reset
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="soft_reset"
+              ?hidden=${!this._showHelp}
+            >
+            </ha-service-description>
+
+            <ha-call-service-button
+              .hass=${this.hass}
+              domain="zwave"
+              service="test_network"
+            >
+              Test Network
+            </ha-call-service-button>
+            <ha-service-description
+              .hass=${this.hass}
+              domain="zwave"
+              service="test_network"
+              ?hidden=${!this._showHelp}
+            >
+            </ha-service-description>
+
+            <ha-call-api-button .hass=${this.hass} path="zwave/saveconfig">
+              Save Config
+            </ha-call-api-button>
+          </div>
+        </ha-card>
+      </ha-config-section>
+    `;
+  }
+
+  private _onHelpTap(): void {
+    this._showHelp = !this._showHelp;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
         .content {
           margin-top: 24px;
         }
@@ -35,187 +220,19 @@ class ZwaveNetwork extends PolymerElement {
         ha-service-description {
           display: block;
           color: grey;
+          padding: 0 8px 12px;
         }
 
         [hidden] {
           display: none;
         }
-      </style>
+      `,
-      <ha-config-section is-wide="[[isWide]]">
+    ];
-        <div style="position: relative" slot="header">
-          <span>Z-Wave Network Management</span>
-          <paper-icon-button
-            class="toggle-help-icon"
-            on-click="helpTap"
-            icon="hass:help-circle"
-          ></paper-icon-button>
-        </div>
-        <span slot="introduction">
-          Run commands that affect the Z-Wave network. You won't get feedback on
-          whether the command succeeded, but you can look in the OZW Log to try
-          to figure out.
-        </span>
-
-        <ha-card class="content">
-          <div class="card-actions">
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="add_node_secure"
-            >
-              Add Node Secure
-            </ha-call-service-button>
-            <ha-service-description
-              hass="[[hass]]"
-              domain="zwave"
-              service="add_node_secure"
-              hidden$="[[!showDescription]]"
-            >
-            </ha-service-description>
-
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="add_node"
-            >
-              Add Node
-            </ha-call-service-button>
-            <ha-service-description
-              hass="[[hass]]"
-              domain="zwave"
-              service="add_node"
-              hidden$="[[!showDescription]]"
-            >
-            </ha-service-description>
-
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="remove_node"
-            >
-              Remove Node
-            </ha-call-service-button>
-            <ha-service-description
-              hass="[[hass]]"
-              domain="zwave"
-              service="remove_node"
-              hidden$="[[!showDescription]]"
-            >
-            </ha-service-description>
-          </div>
-          <div class="card-actions warning">
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="cancel_command"
-            >
-              Cancel Command
-            </ha-call-service-button>
-            <ha-service-description
-              hass="[[hass]]"
-              domain="zwave"
-              service="cancel_command"
-              hidden$="[[!showDescription]]"
-            >
-            </ha-service-description>
-          </div>
-          <div class="card-actions">
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="heal_network"
-            >
-              Heal Network
-            </ha-call-service-button>
-
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="start_network"
-            >
-              Start Network
-            </ha-call-service-button>
-            <ha-service-description
-              hass="[[hass]]"
-              domain="zwave"
-              service="start_network"
-              hidden$="[[!showDescription]]"
-            >
-            </ha-service-description>
-
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="stop_network"
-            >
-              Stop Network
-            </ha-call-service-button>
-            <ha-service-description
-              hass="[[hass]]"
-              domain="zwave"
-              service="stop_network"
-              hidden$="[[!showDescription]]"
-            >
-            </ha-service-description>
-
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="soft_reset"
-            >
-              Soft Reset
-            </ha-call-service-button>
-            <ha-service-description
-              hass="[[hass]]"
-              domain="zwave"
-              service="soft_reset"
-              hidden$="[[!showDescription]]"
-            >
-            </ha-service-description>
-
-            <ha-call-service-button
-              hass="[[hass]]"
-              domain="zwave"
-              service="test_network"
-            >
-              Test Network
-            </ha-call-service-button>
-            <ha-service-description
-              hass="[[hass]]"
-              domain="zwave"
-              service="test_network"
-              hidden$="[[!showDescription]]"
-            >
-            </ha-service-description>
-
-            <ha-call-api-button hass="[[hass]]" path="zwave/saveconfig">
-              Save Config
-            </ha-call-api-button>
-          </div>
-        </ha-card>
-      </ha-config-section>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-
-      isWide: {
-        type: Boolean,
-        value: false,
-      },
-
-      showDescription: {
-        type: Boolean,
-        value: false,
-      },
-    };
-  }
-
-  helpTap() {
-    this.showDescription = !this.showDescription;
   }
 }
 
-customElements.define("zwave-network", ZwaveNetwork);
+declare global {
+  interface HTMLElementTagNameMap {
+    "zwave-network": ZwaveNetwork;
+  }
+}