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;