convert ha-cover-tilt-controls to TypeScript/LitElement (#7542)

src/components/ha-cover-tilt-controls.js

@@ -1,106 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-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 HaCoverTiltControls extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="iron-flex"></style>
-      <style>
-        :host {
-          white-space: nowrap;
-        }
-        [invisible] {
-          visibility: hidden !important;
-        }
-      </style>
-      <ha-icon-button
-        aria-label="Open cover tilt"
-        icon="hass:arrow-top-right"
-        on-click="onOpenTiltTap"
-        title="Open tilt"
-        invisible$="[[!entityObj.supportsOpenTilt]]"
-        disabled="[[computeOpenDisabled(stateObj, entityObj)]]"
-      ></ha-icon-button>
-      <ha-icon-button
-        aria-label="Stop cover from moving"
-        icon="hass:stop"
-        on-click="onStopTiltTap"
-        invisible$="[[!entityObj.supportsStopTilt]]"
-        disabled="[[computeStopDisabled(stateObj)]]"
-        title="Stop tilt"
-      ></ha-icon-button>
-      <ha-icon-button
-        aria-label="Close cover tilt"
-        icon="hass:arrow-bottom-left"
-        on-click="onCloseTiltTap"
-        title="Close tilt"
-        invisible$="[[!entityObj.supportsCloseTilt]]"
-        disabled="[[computeClosedDisabled(stateObj, entityObj)]]"
-      ></ha-icon-button>
-    `;
-  }
-
-  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);
-  }
-
-  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.isFullyOpenTilt && !assumedState;
-  }
-
-  computeClosedDisabled(stateObj, entityObj) {
-    if (stateObj.state === UNAVAILABLE) {
-      return true;
-    }
-    const assumedState = stateObj.attributes.assumed_state === true;
-    return entityObj.isFullyClosedTilt && !assumedState;
-  }
-
-  onOpenTiltTap(ev) {
-    ev.stopPropagation();
-    this.entityObj.openCoverTilt();
-  }
-
-  onCloseTiltTap(ev) {
-    ev.stopPropagation();
-    this.entityObj.closeCoverTilt();
-  }
-
-  onStopTiltTap(ev) {
-    ev.stopPropagation();
-    this.entityObj.stopCoverTilt();
-  }
-}
-
-customElements.define("ha-cover-tilt-controls", HaCoverTiltControls);

src/components/ha-cover-tilt-controls.ts

@@ -0,0 +1,122 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import {
+  LitElement,
+  property,
+  internalProperty,
+  CSSResult,
+  css,
+  customElement,
+  TemplateResult,
+  html,
+  PropertyValues,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+
+import { UNAVAILABLE } from "../data/entity";
+import { HomeAssistant } from "../types";
+import CoverEntity from "../util/cover-model";
+
+import "./ha-icon-button";
+
+@customElement("ha-cover-tilt-controls")
+class HaCoverTiltControls extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) 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` <ha-icon-button
+        class=${classMap({
+          invisible: !this._entityObj.supportsStop,
+        })}
+        label=${this.hass.localize(
+          "ui.dialogs.more_info_control.open_tilt_cover"
+        )}
+        icon="hass:arrow-top-right"
+        @click=${this._onOpenTiltTap}
+        .disabled=${this._computeOpenDisabled()}
+      ></ha-icon-button>
+      <ha-icon-button
+        class=${classMap({
+          invisible: !this._entityObj.supportsStop,
+        })}
+        label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
+        icon="hass:stop"
+        @click=${this._onStopTiltTap}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+      ></ha-icon-button>
+      <ha-icon-button
+        class=${classMap({
+          invisible: !this._entityObj.supportsStop,
+        })}
+        label=${this.hass.localize(
+          "ui.dialogs.more_info_control.open_tilt_cover"
+        )}
+        icon="hass:arrow-bottom-left"
+        @click=${this._onCloseTiltTap}
+        .disabled=${this._computeClosedDisabled()}
+      ></ha-icon-button>`;
+  }
+
+  private _computeOpenDisabled(): boolean {
+    if (this.stateObj.state === UNAVAILABLE) {
+      return true;
+    }
+    const assumedState = this.stateObj.attributes.assumed_state === true;
+    return this._entityObj.isFullyOpenTilt && !assumedState;
+  }
+
+  private _computeClosedDisabled(): boolean {
+    if (this.stateObj.state === UNAVAILABLE) {
+      return true;
+    }
+    const assumedState = this.stateObj.attributes.assumed_state === true;
+    return this._entityObj.isFullyClosedTilt && !assumedState;
+  }
+
+  private _onOpenTiltTap(ev): void {
+    ev.stopPropagation();
+    this._entityObj.openCoverTilt();
+  }
+
+  private _onCloseTiltTap(ev): void {
+    ev.stopPropagation();
+    this._entityObj.closeCoverTilt();
+  }
+
+  private _onStopTiltTap(ev): void {
+    ev.stopPropagation();
+    this._entityObj.stopCoverTilt();
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        white-space: nowrap;
+      }
+      .invisible {
+        visibility: hidden !important;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-cover-tilt-controls": HaCoverTiltControls;
+  }
+}

src/translations/en.json

@@ -554,6 +554,11 @@
         },
         "person": {
           "create_zone": "Create zone from current location"
+        },
+        "cover": {
+          "open_tilt_cover": "Open cover tilt",
+          "close_tile_cover": "Close cover tilt",
+          "stop_cover": "Stop cover from moving"
         }
       },
       "entity_registry": {