LitElement

src/components/entity/ha-entity-humidifier.ts

@@ -0,0 +1,61 @@
+import { css, CSSResult, html, TemplateResult } from "lit-element";
+import { HaEntityToggle } from "./ha-entity-toggle";
+
+class HaEntityHumidifier extends HaEntityToggle {
+  protected render(): TemplateResult {
+    if (!this.stateObj) {
+      return super.render();
+    }
+
+    return html`
+      <div class="target">
+        ${this.stateObj.attributes.mode
+          ? html`<span class="state-label">
+              ${this.hass!.localize(
+                `state_attributes.humidifier.mode.${this.stateObj.attributes.mode}`
+              ) || this.stateObj.attributes.mode}
+            </span>`
+          : ""}
+        <div class="unit">
+          ${this.stateObj.attributes.humidity
+            ? html`${this.stateObj.attributes.humidity} %`
+            : ""}
+        </div>
+      </div>
+
+      ${super.render()}
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .target {
+        color: var(--primary-text-color);
+      }
+
+      .current {
+        color: var(--secondary-text-color);
+      }
+
+      .state-label {
+        font-weight: bold;
+        text-transform: capitalize;
+      }
+
+      .unit {
+        display: inline-block;
+        direction: ltr;
+      }
+      ${super.styles}
+    `;
+  }
+}
+
+customElements.define("ha-entity-humidifier", HaEntityHumidifier);

src/components/entity/ha-entity-toggle.ts

@@ -22,7 +22,7 @@ const isOn = (stateObj?: HassEntity) =>
   !STATES_OFF.includes(stateObj.state) &&
   !UNAVAILABLE_STATES.includes(stateObj.state);
 
-class HaEntityToggle extends LitElement {
+export class HaEntityToggle extends LitElement {
   // hass is not a property so that we only re-render on stateObj changes
   public hass?: HomeAssistant;
 

src/components/ha-humidifier-control.js

@@ -1,142 +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 { EventsMixin } from "../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HaHumidifierControl extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex iron-flex-alignment"></style>
-      <style>
-        /* local DOM styles go here */
-        :host {
-          @apply --layout-flex;
-          @apply --layout-horizontal;
-          @apply --layout-justified;
-        }
-        .in-flux#humidity {
-          color: var(--google-red-500);
-        }
-        #humidity {
-          @apply --layout-self-center;
-          font-size: 200%;
-          direction: ltr;
-        }
-        .control-buttons {
-          font-size: 200%;
-          text-align: right;
-        }
-        ha-icon-button {
-          --mdc-icon-size: 32px;
-        }
-      </style>
-
-      <!-- local DOM goes here -->
-      <div id="humidity">[[value]] [[units]]</div>
-      <div class="control-buttons">
-        <div>
-          <ha-icon-button
-            icon="hass:chevron-up"
-            on-click="incrementValue"
-          ></ha-icon-button>
-        </div>
-        <div>
-          <ha-icon-button
-            icon="hass:chevron-down"
-            on-click="decrementValue"
-          ></ha-icon-button>
-        </div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      value: {
-        type: Number,
-        observer: "valueChanged",
-      },
-      units: {
-        type: String,
-      },
-      min: {
-        type: Number,
-      },
-      max: {
-        type: Number,
-      },
-      step: {
-        type: Number,
-        value: 1,
-      },
-    };
-  }
-
-  humidityStateInFlux(inFlux) {
-    this.$.humidity.classList.toggle("in-flux", inFlux);
-  }
-
-  _round(val) {
-    // round value to precision derived from step
-    // insired by https://github.com/soundar24/roundSlider/blob/master/src/roundslider.js
-    const s = this.step.toString().split(".");
-    return s[1] ? parseFloat(val.toFixed(s[1].length)) : Math.round(val);
-  }
-
-  incrementValue() {
-    const newval = this._round(this.value + this.step);
-    if (this.value < this.max) {
-      this.last_changed = Date.now();
-      this.humidityStateInFlux(true);
-    }
-    if (newval <= this.max) {
-      // If no initial humidity
-      // this forces control to start
-      // from the min configured instead of 0
-      if (newval <= this.min) {
-        this.value = this.min;
-      } else {
-        this.value = newval;
-      }
-    } else {
-      this.value = this.max;
-    }
-  }
-
-  decrementValue() {
-    const newval = this._round(this.value - this.step);
-    if (this.value > this.min) {
-      this.last_changed = Date.now();
-      this.humidityStateInFlux(true);
-    }
-    if (newval >= this.min) {
-      this.value = newval;
-    } else {
-      this.value = this.min;
-    }
-  }
-
-  valueChanged() {
-    // when the last_changed timestamp is changed,
-    // trigger a potential event fire in
-    // the future, as long as last changed is far enough in the
-    // past.
-    if (this.last_changed) {
-      window.setTimeout(() => {
-        const now = Date.now();
-        if (now - this.last_changed >= 2000) {
-          this.fire("change");
-          this.humidityStateInFlux(false);
-          this.last_changed = null;
-        }
-      }, 2010);
-    }
-  }
-}
-
-customElements.define("ha-humidifier-control", HaHumidifierControl);

src/components/ha-humidifier-state.js

@@ -1,83 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import LocalizeMixin from "../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaHumidifierState extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          white-space: nowrap;
-        }
-
-        .target {
-          color: var(--primary-text-color);
-        }
-
-        .current {
-          color: var(--secondary-text-color);
-        }
-
-        .state-label {
-          font-weight: bold;
-          text-transform: capitalize;
-        }
-
-        .unit {
-          display: inline-block;
-          direction: ltr;
-        }
-      </style>
-
-      <div class="target">
-        <template is="dom-if" if="[[_hasKnownState(stateObj.state)]]">
-          <span class="state-label">
-            [[_localizeState(localize, stateObj.state)]]
-            <template is="dom-if" if="[[_renderMode(stateObj.attributes)]]">
-              - [[_localizeMode(localize, stateObj.attributes.mode)]]
-            </template>
-          </span>
-        </template>
-        <div class="unit">[[computeTarget(stateObj.attributes.humidity)]]</div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      stateObj: Object,
-    };
-  }
-
-  computeTarget(humidity) {
-    if (humidity != null) {
-      return `${humidity} %`;
-    }
-
-    return "";
-  }
-
-  _hasKnownState(state) {
-    return state !== "unknown";
-  }
-
-  _localizeState(localize, state) {
-    return localize(`state.default.${state}`) || state;
-  }
-
-  _localizeMode(localize, mode) {
-    return localize(`state_attributes.humidifier.mode.${mode}`) || mode;
-  }
-
-  _renderMode(attributes) {
-    return attributes.mode;
-  }
-}
-customElements.define("ha-humidifier-state", HaHumidifierState);

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

@@ -14,7 +14,6 @@ import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
-import "../../../components/ha-humidifier-control";
 import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-paper-slider";
 import "../../../components/ha-switch";

src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts

@@ -8,7 +8,8 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import "../../../components/ha-humidifier-state";
+import "../../../components/entity/ha-entity-humidifier";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
@@ -50,10 +51,10 @@ class HuiHumidifierEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <ha-humidifier-state
+        <ha-entity-humidifier
           .hass=${this.hass}
           .stateObj=${stateObj}
-        ></ha-humidifier-state>
+        ></ha-entity-humidifier>
       </hui-generic-entity-row>
     `;
   }