Convert ha-cover-controls to TypeScript/LitElement (#7521)

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

src/common/entity/cover_icon.ts

@@ -78,3 +78,25 @@ export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
       return "hass:window-open";
   }
 };
+
+export const computeOpenIcon = (stateObj: HassEntity): string => {
+  switch (stateObj.attributes.device_class) {
+    case "awning":
+    case "door":
+    case "gate":
+      return "hass:arrow-expand-horizontal";
+    default:
+      return "hass:arrow-up";
+  }
+};
+
+export const computeCloseIcon = (stateObj: HassEntity): string => {
+  switch (stateObj.attributes.device_class) {
+    case "awning":
+    case "door":
+    case "gate":
+      return "hass:arrow-collapse-horizontal";
+    default:
+      return "hass:arrow-down";
+  }
+};

src/components/ha-cover-controls.js

@@ -1,126 +0,0 @@
-import "./ha-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { UNAVAILABLE } from "../data/entity";
-import CoverEntity from "../util/cover-model";
-
-class HaCoverControls extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        .state {
-          white-space: nowrap;
-        }
-        [invisible] {
-          visibility: hidden !important;
-        }
-      </style>
-
-      <div class="state">
-        <ha-icon-button
-          aria-label="Open cover"
-          icon="[[computeOpenIcon(stateObj)]]"
-          on-click="onOpenTap"
-          invisible$="[[!entityObj.supportsOpen]]"
-          disabled="[[computeOpenDisabled(stateObj, entityObj)]]"
-        ></ha-icon-button>
-        <ha-icon-button
-          aria-label="Stop the cover from moving"
-          icon="hass:stop"
-          on-click="onStopTap"
-          invisible$="[[!entityObj.supportsStop]]"
-          disabled="[[computeStopDisabled(stateObj)]]"
-        ></ha-icon-button>
-        <ha-icon-button
-          aria-label="Close cover"
-          icon="[[computeCloseIcon(stateObj)]]"
-          on-click="onCloseTap"
-          invisible$="[[!entityObj.supportsClose]]"
-          disabled="[[computeClosedDisabled(stateObj, entityObj)]]"
-        ></ha-icon-button>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-      stateObj: {
-        type: Object,
-      },
-      entityObj: {
-        type: Object,
-        computed: "computeEntityObj(hass, stateObj)",
-      },
-    };
-  }
-
-  computeEntityObj(hass, stateObj) {
-    return new CoverEntity(hass, stateObj);
-  }
-
-  computeOpenIcon(stateObj) {
-    switch (stateObj.attributes.device_class) {
-      case "awning":
-      case "door":
-      case "gate":
-        return "hass:arrow-expand-horizontal";
-      default:
-        return "hass:arrow-up";
-    }
-  }
-
-  computeCloseIcon(stateObj) {
-    switch (stateObj.attributes.device_class) {
-      case "awning":
-      case "door":
-      case "gate":
-        return "hass:arrow-collapse-horizontal";
-      default:
-        return "hass:arrow-down";
-    }
-  }
-
-  computeStopDisabled(stateObj) {
-    if (stateObj.state === UNAVAILABLE) {
-      return true;
-    }
-    return false;
-  }
-
-  computeOpenDisabled(stateObj, entityObj) {
-    if (stateObj.state === UNAVAILABLE) {
-      return true;
-    }
-    const assumedState = stateObj.attributes.assumed_state === true;
-    return (entityObj.isFullyOpen || entityObj.isOpening) && !assumedState;
-  }
-
-  computeClosedDisabled(stateObj, entityObj) {
-    if (stateObj.state === UNAVAILABLE) {
-      return true;
-    }
-    const assumedState = stateObj.attributes.assumed_state === true;
-    return (entityObj.isFullyClosed || entityObj.isClosing) && !assumedState;
-  }
-
-  onOpenTap(ev) {
-    ev.stopPropagation();
-    this.entityObj.openCover();
-  }
-
-  onCloseTap(ev) {
-    ev.stopPropagation();
-    this.entityObj.closeCover();
-  }
-
-  onStopTap(ev) {
-    ev.stopPropagation();
-    this.entityObj.stopCover();
-  }
-}
-
-customElements.define("ha-cover-controls", HaCoverControls);

src/components/ha-cover-controls.ts

@@ -0,0 +1,135 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import type { HassEntity } from "home-assistant-js-websocket";
+
+import type { HomeAssistant } from "../types";
+import { UNAVAILABLE } from "../data/entity";
+import CoverEntity from "../util/cover-model";
+
+import "./ha-icon-button";
+import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
+
+@customElement("ha-cover-controls")
+class HaCoverControls extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: HassEntity;
+
+  @internalProperty() private _entityObj?: CoverEntity;
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("stateObj")) {
+      this._entityObj = new CoverEntity(this.hass, this.stateObj);
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this._entityObj) {
+      return html``;
+    }
+
+    return html`
+      <div class="state">
+        <ha-icon-button
+          class=${classMap({
+            hidden: !this._entityObj.supportsOpen,
+          })}
+          .label=${this.hass.localize(
+            "ui.dialogs.more_info_control.open_cover"
+          )}
+          .icon=${computeOpenIcon(this.stateObj)}
+          @click=${this._onOpenTap}
+          .disabled=${this._computeOpenDisabled()}
+        ></ha-icon-button>
+        <ha-icon-button
+          class=${classMap({
+            hidden: !this._entityObj.supportsStop,
+          })}
+          .label=${this.hass.localize(
+            "ui.dialogs.more_info_control.stop_cover"
+          )}
+          icon="hass:stop"
+          @click=${this._onStopTap}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
+        ></ha-icon-button>
+        <ha-icon-button
+          class=${classMap({
+            hidden: !this._entityObj.supportsClose,
+          })}
+          .label=${this.hass.localize(
+            "ui.dialogs.more_info_control.close_cover"
+          )}
+          .icon=${computeCloseIcon(this.stateObj)}
+          @click=${this._onCloseTap}
+          .disabled=${this._computeClosedDisabled()}
+        ></ha-icon-button>
+      </div>
+    `;
+  }
+
+  private _computeOpenDisabled(): boolean {
+    if (this.stateObj.state === UNAVAILABLE) {
+      return true;
+    }
+    const assumedState = this.stateObj.attributes.assumed_state === true;
+    return (
+      (this._entityObj.isFullyOpen || this._entityObj.isOpening) &&
+      !assumedState
+    );
+  }
+
+  private _computeClosedDisabled(): boolean {
+    if (this.stateObj.state === UNAVAILABLE) {
+      return true;
+    }
+    const assumedState = this.stateObj.attributes.assumed_state === true;
+    return (
+      (this._entityObj.isFullyClosed || this._entityObj.isClosing) &&
+      !assumedState
+    );
+  }
+
+  private _onOpenTap(ev): void {
+    ev.stopPropagation();
+    this._entityObj.openCover();
+  }
+
+  private _onCloseTap(ev): void {
+    ev.stopPropagation();
+    this._entityObj.closeCover();
+  }
+
+  private _onStopTap(ev): void {
+    ev.stopPropagation();
+    this._entityObj.stopCover();
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .state {
+        white-space: nowrap;
+      }
+      .hidden {
+        visibility: hidden !important;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-cover-controls": HaCoverControls;
+  }
+}

src/translations/en.json

@@ -585,6 +585,9 @@
           "create_zone": "Create zone from current location"
         },
         "cover": {
+          "open_cover": "Open cover",
+          "stop_cover": "Stop the cover from moving",
+          "close_cover": "Close cover",
           "open_tilt_cover": "Open cover tilt",
           "close_tile_cover": "Close cover tilt",
           "stop_cover": "Stop cover from moving"