Add humidifier entity row

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

@@ -0,0 +1,58 @@
+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);
+      }
+
+      .state-label {
+        font-weight: bold;
+        text-transform: capitalize;
+      }
+
+      .unit {
+        display: inline-block;
+        direction: ltr;
+      }
+
+      ${super.styles}
+    `;
+  }
+}
+
+customElements.define("ha-entity-humidifier", HaEntityHumidifier);

src/panels/lovelace/create-element/create-row-element.ts

@@ -24,6 +24,7 @@ const LAZY_LOAD_TYPES = {
   "climate-entity": () => import("../entity-rows/hui-climate-entity-row"),
   "cover-entity": () => import("../entity-rows/hui-cover-entity-row"),
   "group-entity": () => import("../entity-rows/hui-group-entity-row"),
+  "humidifier-entity": () => import("../entity-rows/hui-humidifier-entity-row"),
   "input-datetime-entity": () =>
     import("../entity-rows/hui-input-datetime-entity-row"),
   "input-number-entity": () =>
@@ -51,7 +52,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
   cover: "cover",
   fan: "toggle",
   group: "group",
-  humidifier: "toggle",
+  humidifier: "humidifier",
   input_boolean: "toggle",
   input_number: "input-number",
   input_select: "input-select",

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

@@ -0,0 +1,74 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import "../../../components/entity/ha-entity-humidifier";
+import { HomeAssistant } from "../../../types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
+import "../components/hui-generic-entity-row";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
+import { EntityConfig, LovelaceRow } from "./types";
+
+@customElement("hui-humidifier-entity-row")
+class HuiHumidifierEntityRow extends LitElement implements LovelaceRow {
+  @property() public hass?: HomeAssistant;
+
+  @property() private _config?: EntityConfig;
+
+  public setConfig(config: EntityConfig): void {
+    if (!config || !config.entity) {
+      throw new Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+
+    if (!stateObj) {
+      return html`
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
+      `;
+    }
+
+    return html`
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
+        <ha-entity-humidifier
+          .hass=${this.hass}
+          .stateObj=${stateObj}
+        ></ha-entity-humidifier>
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-humidifier-state {
+        text-align: right;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-humidifier-entity-row": HuiHumidifierEntityRow;
+  }
+}