+import { mdiDotsVertical } from "@mdi/js";+import "@thomasloven/round-slider";+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  TemplateResult,+} from "lit-element";+import { classMap } from "lit-html/directives/class-map";+import { styleMap } from "lit-html/directives/style-map";+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";+import { fireEvent } from "../../../common/dom/fire_event";+import { computeStateDisplay } from "../../../common/entity/compute_state_display";+import { computeStateName } from "../../../common/entity/compute_state_name";+import { stateIcon } from "../../../common/entity/state_icon";+import "../../../components/ha-card";+import "../../../components/ha-icon-button";+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";+import { ActionHandlerEvent } from "../../../data/lovelace";+import { HomeAssistant, FanEntity } from "../../../types";+import { actionHandler } from "../common/directives/action-handler-directive";+import { findEntities } from "../common/find-entites";+import { handleAction } from "../common/handle-action";+import { hasAction } from "../common/has-action";+import { hasConfigOrEntityChanged } from "../common/has-changed";+import { createEntityNotFoundWarning } from "../components/hui-warning";+import { LovelaceCard, LovelaceCardEditor } from "../types";+import { FanCardConfig } from "./types";++@customElement("hui-fan-card")+export class HuiFanCard extends LitElement implements LovelaceCard {+  public static async getConfigElement(): Promise<LovelaceCardEditor> {+    await import(+      /* webpackChunkName: "hui-fan-card-editor" */ "../editor/config-elements/hui-fan-card-editor"+    );+    return document.createElement("hui-fan-card-editor");+  }++  public static getStubConfig(+    hass: HomeAssistant,+    entities: string[],+    entitiesFallback: string[]+  ): FanCardConfig {+    const includeDomains = ["fan"];+    const maxEntities = 1;+    const foundEntities = findEntities(+      hass,+      maxEntities,+      entities,+      entitiesFallback,+      includeDomains+    );++    return { type: "fan", entity: foundEntities[0] || "" };+  }++  @property({ attribute: false }) public hass?: HomeAssistant;++  @internalProperty() private _config?: FanCardConfig;++  private _speedTimeout?: number;++  public getCardSize(): number {+    return 5;+  }++  public setConfig(config: FanCardConfig): void {+    if (!config.entity || config.entity.split(".")[0] !== "fan") {+      throw new Error("Specify an entity from within the fan domain.");+    }++    this._config = {+      tap_action: { action: "toggle" },+      hold_action: { action: "more-info" },+      ...config,+    };+  }++  protected render(): TemplateResult {+    if (!this.hass || !this._config) {+      return html``;+    }++    const stateObj = this.hass.states[this._config!.entity] as FanEntity;++    if (!stateObj) {+      return html`+        <hui-warning>+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}+        </hui-warning>+      `;+    }++    const max_speed = stateObj.attributes.speed_list.length;++    const speed = stateObj.attributes.speed_list.indexOf(+      stateObj.attributes.speed+    );++    return html`+      <ha-card+        .header=${this._config!.title}+        class=${classMap({ "no-header": !this._config!.title })}+      >+        <mwc-icon-button+          class="more-info"+          label="Open more info"+          @click=${this._handleMoreInfo}+          tabindex="0"+        >+          <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>+        </mwc-icon-button>++        <div class="content">+          <div id="controls">+            <div id="slider">+              <round-slider+                min="0"+                max=${max_speed}+                .value=${speed}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                @value-changing=${this._dragEvent}+                @value-changed=${this._setSpeed}+                style=${styleMap({+                  visibility: "visible",+                })}

+import { mdiDotsVertical } from "@mdi/js";+import "@thomasloven/round-slider";+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  TemplateResult,+} from "lit-element";+import { classMap } from "lit-html/directives/class-map";+import { styleMap } from "lit-html/directives/style-map";+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";+import { fireEvent } from "../../../common/dom/fire_event";+import { computeStateDisplay } from "../../../common/entity/compute_state_display";+import { computeStateName } from "../../../common/entity/compute_state_name";+import { stateIcon } from "../../../common/entity/state_icon";+import "../../../components/ha-card";+import "../../../components/ha-icon-button";+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";+import { ActionHandlerEvent } from "../../../data/lovelace";+import { HomeAssistant, FanEntity } from "../../../types";+import { actionHandler } from "../common/directives/action-handler-directive";+import { findEntities } from "../common/find-entites";+import { handleAction } from "../common/handle-action";+import { hasAction } from "../common/has-action";+import { hasConfigOrEntityChanged } from "../common/has-changed";+import { createEntityNotFoundWarning } from "../components/hui-warning";+import { LovelaceCard, LovelaceCardEditor } from "../types";+import { FanCardConfig } from "./types";++@customElement("hui-fan-card")+export class HuiFanCard extends LitElement implements LovelaceCard {+  public static async getConfigElement(): Promise<LovelaceCardEditor> {+    await import(+      /* webpackChunkName: "hui-fan-card-editor" */ "../editor/config-elements/hui-fan-card-editor"+    );+    return document.createElement("hui-fan-card-editor");+  }++  public static getStubConfig(+    hass: HomeAssistant,+    entities: string[],+    entitiesFallback: string[]+  ): FanCardConfig {+    const includeDomains = ["fan"];+    const maxEntities = 1;+    const foundEntities = findEntities(+      hass,+      maxEntities,+      entities,+      entitiesFallback,+      includeDomains+    );++    return { type: "fan", entity: foundEntities[0] || "" };+  }++  @property({ attribute: false }) public hass?: HomeAssistant;++  @internalProperty() private _config?: FanCardConfig;++  private _speedTimeout?: number;++  public getCardSize(): number {+    return 5;+  }++  public setConfig(config: FanCardConfig): void {+    if (!config.entity || config.entity.split(".")[0] !== "fan") {+      throw new Error("Specify an entity from within the fan domain.");+    }++    this._config = {+      tap_action: { action: "toggle" },+      hold_action: { action: "more-info" },+      ...config,+    };+  }++  protected render(): TemplateResult {+    if (!this.hass || !this._config) {+      return html``;+    }++    const stateObj = this.hass.states[this._config!.entity] as FanEntity;++    if (!stateObj) {+      return html`+        <hui-warning>+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}+        </hui-warning>+      `;+    }++    const max_speed = stateObj.attributes.speed_list.length;++    const speed = stateObj.attributes.speed_list.indexOf(+      stateObj.attributes.speed+    );++    return html`+      <ha-card+        .header=${this._config!.title}+        class=${classMap({ "no-header": !this._config!.title })}+      >+        <mwc-icon-button+          class="more-info"+          label="Open more info"+          @click=${this._handleMoreInfo}+          tabindex="0"+        >+          <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>+        </mwc-icon-button>++        <div class="content">+          <div id="controls">+            <div id="slider">+              <round-slider+                min="0"+                max=${max_speed}+                .value=${speed}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                @value-changing=${this._dragEvent}+                @value-changed=${this._setSpeed}+                style=${styleMap({+                  visibility: "visible",+                })}+              ></round-slider>+              <ha-icon-button+                class="fan-button ${classMap({+                  "slider-center": true,+                  "state-on": stateObj.state === "on",+                  "state-unavailable": stateObj.state === UNAVAILABLE,+                })}"+                .icon=${this._config.icon || stateIcon(stateObj)}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                style=${styleMap({+                  filter: this._computeSpeed(stateObj),+                })}+                @action=${this._handleAction}+                .actionHandler=${actionHandler({+                  hasHold: hasAction(this._config!.hold_action),+                  hasDoubleClick: hasAction(this._config!.double_tap_action),+                })}+                tabindex="0"+              ></ha-icon-button>+            </div>+          </div>++          <div id="info">+            ${UNAVAILABLE_STATES.includes(stateObj.state)+              ? html`+                  <div>+                    ${computeStateDisplay(+                      this.hass.localize,+                      stateObj,+                      this.hass.language+                    )}+                  </div>+                `+              : html` <div class="speed"></div> `}+            ${this._config.name || computeStateName(stateObj)}+          </div>+        </div>+      </ha-card>+    `;+  }++  protected shouldUpdate(changedProps: PropertyValues): boolean {+    return hasConfigOrEntityChanged(this, changedProps);+  }++  protected updated(changedProps: PropertyValues): void {+    super.updated(changedProps);+    if (!this._config || !this.hass) {+      return;+    }++    const stateObj = this.hass!.states[this._config!.entity];++    if (!stateObj) {+      return;+    }++    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;+    const oldConfig = changedProps.get("_config") as FanCardConfig | undefined;++    if (+      !oldHass ||+      !oldConfig ||+      oldHass.themes !== this.hass.themes ||+      oldConfig.theme !== this._config.theme+    ) {+      applyThemesOnElement(this, this.hass.themes, this._config.theme);+    }+  }++  private _dragEvent(e: any): void {+    const stateObj = this.hass!.states[this._config!.entity] as FanEntity;+    if (e.detail.value < 1) {+      this.shadowRoot!.querySelector(".speed")!.innerHTML = `Off`;+    } else {+      this.shadowRoot!.querySelector(".speed")!.innerHTML = `${+        stateObj.attributes.speed_list[e.detail.value - 1]+      }`;+    }+    this._showspeed();+    this._hidespeed();+  }++  private _showspeed(): void {+    clearTimeout(this._speedTimeout);+    this.shadowRoot!.querySelector(".speed")!.classList.add("show_speed");+  }++  private _hidespeed(): void {+    this._speedTimeout = window.setTimeout(() => {+      this.shadowRoot!.querySelector(".speed")!.classList.remove("show_speed");+    }, 500);+  }++  private _setSpeed(e: any): void {+    const stateObj = this.hass!.states[this._config!.entity] as FanEntity;+    if (e.detail.value < 1) {+      this.hass!.callService("fan", "turn_off", {+        entity_id: this._config!.entity,+      });+    } else {+      this.hass!.callService("fan", "turn_on", {+        entity_id: this._config!.entity,+        speed: stateObj.attributes.speed_list[e.detail.value - 1],+      });+    }+  }++  private _computeSpeed(stateObj: FanEntity): string {

+import { mdiDotsVertical } from "@mdi/js";+import "@thomasloven/round-slider";+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  TemplateResult,+} from "lit-element";+import { classMap } from "lit-html/directives/class-map";+import { styleMap } from "lit-html/directives/style-map";+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";+import { fireEvent } from "../../../common/dom/fire_event";+import { computeStateDisplay } from "../../../common/entity/compute_state_display";+import { computeStateName } from "../../../common/entity/compute_state_name";+import { stateIcon } from "../../../common/entity/state_icon";+import "../../../components/ha-card";+import "../../../components/ha-icon-button";+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";+import { ActionHandlerEvent } from "../../../data/lovelace";+import { HomeAssistant, FanEntity } from "../../../types";+import { actionHandler } from "../common/directives/action-handler-directive";+import { findEntities } from "../common/find-entites";+import { handleAction } from "../common/handle-action";+import { hasAction } from "../common/has-action";+import { hasConfigOrEntityChanged } from "../common/has-changed";+import { createEntityNotFoundWarning } from "../components/hui-warning";+import { LovelaceCard, LovelaceCardEditor } from "../types";+import { FanCardConfig } from "./types";++@customElement("hui-fan-card")+export class HuiFanCard extends LitElement implements LovelaceCard {+  public static async getConfigElement(): Promise<LovelaceCardEditor> {+    await import(+      /* webpackChunkName: "hui-fan-card-editor" */ "../editor/config-elements/hui-fan-card-editor"+    );+    return document.createElement("hui-fan-card-editor");+  }++  public static getStubConfig(+    hass: HomeAssistant,+    entities: string[],+    entitiesFallback: string[]+  ): FanCardConfig {+    const includeDomains = ["fan"];+    const maxEntities = 1;+    const foundEntities = findEntities(+      hass,+      maxEntities,+      entities,+      entitiesFallback,+      includeDomains+    );++    return { type: "fan", entity: foundEntities[0] || "" };+  }++  @property({ attribute: false }) public hass?: HomeAssistant;++  @internalProperty() private _config?: FanCardConfig;++  private _speedTimeout?: number;++  public getCardSize(): number {+    return 5;+  }++  public setConfig(config: FanCardConfig): void {+    if (!config.entity || config.entity.split(".")[0] !== "fan") {+      throw new Error("Specify an entity from within the fan domain.");+    }++    this._config = {+      tap_action: { action: "toggle" },+      hold_action: { action: "more-info" },+      ...config,+    };+  }++  protected render(): TemplateResult {+    if (!this.hass || !this._config) {+      return html``;+    }++    const stateObj = this.hass.states[this._config!.entity] as FanEntity;++    if (!stateObj) {+      return html`+        <hui-warning>+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}+        </hui-warning>+      `;+    }++    const max_speed = stateObj.attributes.speed_list.length;++    const speed = stateObj.attributes.speed_list.indexOf(+      stateObj.attributes.speed+    );++    return html`+      <ha-card+        .header=${this._config!.title}+        class=${classMap({ "no-header": !this._config!.title })}+      >+        <mwc-icon-button+          class="more-info"+          label="Open more info"+          @click=${this._handleMoreInfo}+          tabindex="0"+        >+          <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>+        </mwc-icon-button>++        <div class="content">+          <div id="controls">+            <div id="slider">+              <round-slider+                min="0"+                max=${max_speed}+                .value=${speed}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                @value-changing=${this._dragEvent}+                @value-changed=${this._setSpeed}+                style=${styleMap({+                  visibility: "visible",+                })}+              ></round-slider>+              <ha-icon-button+                class="fan-button ${classMap({+                  "slider-center": true,+                  "state-on": stateObj.state === "on",+                  "state-unavailable": stateObj.state === UNAVAILABLE,+                })}"+                .icon=${this._config.icon || stateIcon(stateObj)}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                style=${styleMap({+                  filter: this._computeSpeed(stateObj),+                })}+                @action=${this._handleAction}+                .actionHandler=${actionHandler({+                  hasHold: hasAction(this._config!.hold_action),+                  hasDoubleClick: hasAction(this._config!.double_tap_action),+                })}+                tabindex="0"+              ></ha-icon-button>+            </div>+          </div>++          <div id="info">+            ${UNAVAILABLE_STATES.includes(stateObj.state)+              ? html`+                  <div>+                    ${computeStateDisplay(+                      this.hass.localize,+                      stateObj,+                      this.hass.language+                    )}+                  </div>+                `+              : html` <div class="speed"></div> `}+            ${this._config.name || computeStateName(stateObj)}+          </div>+        </div>+      </ha-card>+    `;+  }++  protected shouldUpdate(changedProps: PropertyValues): boolean {+    return hasConfigOrEntityChanged(this, changedProps);+  }++  protected updated(changedProps: PropertyValues): void {+    super.updated(changedProps);+    if (!this._config || !this.hass) {+      return;+    }++    const stateObj = this.hass!.states[this._config!.entity];++    if (!stateObj) {+      return;+    }++    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;+    const oldConfig = changedProps.get("_config") as FanCardConfig | undefined;++    if (+      !oldHass ||+      !oldConfig ||+      oldHass.themes !== this.hass.themes ||+      oldConfig.theme !== this._config.theme+    ) {+      applyThemesOnElement(this, this.hass.themes, this._config.theme);+    }+  }++  private _dragEvent(e: any): void {+    const stateObj = this.hass!.states[this._config!.entity] as FanEntity;+    if (e.detail.value < 1) {+      this.shadowRoot!.querySelector(".speed")!.innerHTML = `Off`;

+import { mdiDotsVertical } from "@mdi/js";+import "@thomasloven/round-slider";+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  TemplateResult,+} from "lit-element";+import { classMap } from "lit-html/directives/class-map";+import { styleMap } from "lit-html/directives/style-map";+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";+import { fireEvent } from "../../../common/dom/fire_event";+import { computeStateDisplay } from "../../../common/entity/compute_state_display";+import { computeStateName } from "../../../common/entity/compute_state_name";+import { stateIcon } from "../../../common/entity/state_icon";+import "../../../components/ha-card";+import "../../../components/ha-icon-button";+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";+import { ActionHandlerEvent } from "../../../data/lovelace";+import { HomeAssistant, FanEntity } from "../../../types";+import { actionHandler } from "../common/directives/action-handler-directive";+import { findEntities } from "../common/find-entites";+import { handleAction } from "../common/handle-action";+import { hasAction } from "../common/has-action";+import { hasConfigOrEntityChanged } from "../common/has-changed";+import { createEntityNotFoundWarning } from "../components/hui-warning";+import { LovelaceCard, LovelaceCardEditor } from "../types";+import { FanCardConfig } from "./types";++@customElement("hui-fan-card")+export class HuiFanCard extends LitElement implements LovelaceCard {+  public static async getConfigElement(): Promise<LovelaceCardEditor> {+    await import(+      /* webpackChunkName: "hui-fan-card-editor" */ "../editor/config-elements/hui-fan-card-editor"+    );+    return document.createElement("hui-fan-card-editor");+  }++  public static getStubConfig(+    hass: HomeAssistant,+    entities: string[],+    entitiesFallback: string[]+  ): FanCardConfig {+    const includeDomains = ["fan"];+    const maxEntities = 1;+    const foundEntities = findEntities(+      hass,+      maxEntities,+      entities,+      entitiesFallback,+      includeDomains+    );++    return { type: "fan", entity: foundEntities[0] || "" };+  }++  @property({ attribute: false }) public hass?: HomeAssistant;++  @internalProperty() private _config?: FanCardConfig;++  private _speedTimeout?: number;++  public getCardSize(): number {+    return 5;+  }++  public setConfig(config: FanCardConfig): void {+    if (!config.entity || config.entity.split(".")[0] !== "fan") {+      throw new Error("Specify an entity from within the fan domain.");+    }++    this._config = {+      tap_action: { action: "toggle" },+      hold_action: { action: "more-info" },+      ...config,+    };+  }++  protected render(): TemplateResult {+    if (!this.hass || !this._config) {+      return html``;+    }++    const stateObj = this.hass.states[this._config!.entity] as FanEntity;++    if (!stateObj) {+      return html`+        <hui-warning>+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}+        </hui-warning>+      `;+    }++    const max_speed = stateObj.attributes.speed_list.length;++    const speed = stateObj.attributes.speed_list.indexOf(+      stateObj.attributes.speed+    );++    return html`+      <ha-card+        .header=${this._config!.title}+        class=${classMap({ "no-header": !this._config!.title })}+      >+        <mwc-icon-button+          class="more-info"+          label="Open more info"+          @click=${this._handleMoreInfo}+          tabindex="0"+        >+          <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>+        </mwc-icon-button>++        <div class="content">+          <div id="controls">+            <div id="slider">+              <round-slider+                min="0"+                max=${max_speed}+                .value=${speed}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                @value-changing=${this._dragEvent}+                @value-changed=${this._setSpeed}+                style=${styleMap({+                  visibility: "visible",+                })}+              ></round-slider>+              <ha-icon-button+                class="fan-button ${classMap({+                  "slider-center": true,+                  "state-on": stateObj.state === "on",+                  "state-unavailable": stateObj.state === UNAVAILABLE,+                })}"+                .icon=${this._config.icon || stateIcon(stateObj)}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                style=${styleMap({+                  filter: this._computeSpeed(stateObj),+                })}+                @action=${this._handleAction}+                .actionHandler=${actionHandler({+                  hasHold: hasAction(this._config!.hold_action),+                  hasDoubleClick: hasAction(this._config!.double_tap_action),+                })}+                tabindex="0"+              ></ha-icon-button>+            </div>+          </div>++          <div id="info">+            ${UNAVAILABLE_STATES.includes(stateObj.state)+              ? html`+                  <div>+                    ${computeStateDisplay(+                      this.hass.localize,+                      stateObj,+                      this.hass.language+                    )}+                  </div>+                `+              : html` <div class="speed"></div> `}+            ${this._config.name || computeStateName(stateObj)}+          </div>+        </div>+      </ha-card>+    `;+  }++  protected shouldUpdate(changedProps: PropertyValues): boolean {+    return hasConfigOrEntityChanged(this, changedProps);+  }++  protected updated(changedProps: PropertyValues): void {+    super.updated(changedProps);+    if (!this._config || !this.hass) {+      return;+    }++    const stateObj = this.hass!.states[this._config!.entity];++    if (!stateObj) {+      return;+    }++    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;+    const oldConfig = changedProps.get("_config") as FanCardConfig | undefined;++    if (+      !oldHass ||+      !oldConfig ||+      oldHass.themes !== this.hass.themes ||+      oldConfig.theme !== this._config.theme+    ) {+      applyThemesOnElement(this, this.hass.themes, this._config.theme);+    }+  }++  private _dragEvent(e: any): void {+    const stateObj = this.hass!.states[this._config!.entity] as FanEntity;+    if (e.detail.value < 1) {+      this.shadowRoot!.querySelector(".speed")!.innerHTML = `Off`;

+import { mdiDotsVertical } from "@mdi/js";+import "@thomasloven/round-slider";+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  TemplateResult,+} from "lit-element";+import { classMap } from "lit-html/directives/class-map";+import { styleMap } from "lit-html/directives/style-map";+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";+import { fireEvent } from "../../../common/dom/fire_event";+import { computeStateDisplay } from "../../../common/entity/compute_state_display";+import { computeStateName } from "../../../common/entity/compute_state_name";+import { stateIcon } from "../../../common/entity/state_icon";+import "../../../components/ha-card";+import "../../../components/ha-icon-button";+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";+import { ActionHandlerEvent } from "../../../data/lovelace";+import { HomeAssistant, FanEntity } from "../../../types";+import { actionHandler } from "../common/directives/action-handler-directive";+import { findEntities } from "../common/find-entites";+import { handleAction } from "../common/handle-action";+import { hasAction } from "../common/has-action";+import { hasConfigOrEntityChanged } from "../common/has-changed";+import { createEntityNotFoundWarning } from "../components/hui-warning";+import { LovelaceCard, LovelaceCardEditor } from "../types";+import { FanCardConfig } from "./types";++@customElement("hui-fan-card")+export class HuiFanCard extends LitElement implements LovelaceCard {+  public static async getConfigElement(): Promise<LovelaceCardEditor> {+    await import(+      /* webpackChunkName: "hui-fan-card-editor" */ "../editor/config-elements/hui-fan-card-editor"+    );+    return document.createElement("hui-fan-card-editor");+  }++  public static getStubConfig(+    hass: HomeAssistant,+    entities: string[],+    entitiesFallback: string[]+  ): FanCardConfig {+    const includeDomains = ["fan"];+    const maxEntities = 1;+    const foundEntities = findEntities(+      hass,+      maxEntities,+      entities,+      entitiesFallback,+      includeDomains+    );++    return { type: "fan", entity: foundEntities[0] || "" };+  }++  @property({ attribute: false }) public hass?: HomeAssistant;++  @internalProperty() private _config?: FanCardConfig;++  private _speedTimeout?: number;++  public getCardSize(): number {+    return 5;+  }++  public setConfig(config: FanCardConfig): void {+    if (!config.entity || config.entity.split(".")[0] !== "fan") {+      throw new Error("Specify an entity from within the fan domain.");+    }++    this._config = {+      tap_action: { action: "toggle" },+      hold_action: { action: "more-info" },+      ...config,+    };+  }++  protected render(): TemplateResult {+    if (!this.hass || !this._config) {+      return html``;+    }++    const stateObj = this.hass.states[this._config!.entity] as FanEntity;++    if (!stateObj) {+      return html`+        <hui-warning>+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}+        </hui-warning>+      `;+    }++    const max_speed = stateObj.attributes.speed_list.length;++    const speed = stateObj.attributes.speed_list.indexOf(+      stateObj.attributes.speed+    );++    return html`+      <ha-card+        .header=${this._config!.title}+        class=${classMap({ "no-header": !this._config!.title })}+      >+        <mwc-icon-button+          class="more-info"+          label="Open more info"+          @click=${this._handleMoreInfo}+          tabindex="0"+        >+          <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>+        </mwc-icon-button>++        <div class="content">+          <div id="controls">+            <div id="slider">+              <round-slider+                min="0"+                max=${max_speed}+                .value=${speed}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                @value-changing=${this._dragEvent}+                @value-changed=${this._setSpeed}+                style=${styleMap({+                  visibility: "visible",+                })}+              ></round-slider>+              <ha-icon-button+                class="fan-button ${classMap({+                  "slider-center": true,+                  "state-on": stateObj.state === "on",+                  "state-unavailable": stateObj.state === UNAVAILABLE,+                })}"+                .icon=${this._config.icon || stateIcon(stateObj)}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                style=${styleMap({+                  filter: this._computeSpeed(stateObj),+                })}+                @action=${this._handleAction}+                .actionHandler=${actionHandler({+                  hasHold: hasAction(this._config!.hold_action),+                  hasDoubleClick: hasAction(this._config!.double_tap_action),+                })}+                tabindex="0"+              ></ha-icon-button>+            </div>+          </div>++          <div id="info">+            ${UNAVAILABLE_STATES.includes(stateObj.state)+              ? html`+                  <div>+                    ${computeStateDisplay(+                      this.hass.localize,+                      stateObj,+                      this.hass.language+                    )}+                  </div>+                `+              : html` <div class="speed"></div> `}

+import { mdiDotsVertical } from "@mdi/js";+import "@thomasloven/round-slider";+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  TemplateResult,+} from "lit-element";+import { classMap } from "lit-html/directives/class-map";+import { styleMap } from "lit-html/directives/style-map";+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";+import { fireEvent } from "../../../common/dom/fire_event";+import { computeStateDisplay } from "../../../common/entity/compute_state_display";+import { computeStateName } from "../../../common/entity/compute_state_name";+import { stateIcon } from "../../../common/entity/state_icon";+import "../../../components/ha-card";+import "../../../components/ha-icon-button";+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";+import { ActionHandlerEvent } from "../../../data/lovelace";+import { HomeAssistant, FanEntity } from "../../../types";+import { actionHandler } from "../common/directives/action-handler-directive";+import { findEntities } from "../common/find-entites";+import { handleAction } from "../common/handle-action";+import { hasAction } from "../common/has-action";+import { hasConfigOrEntityChanged } from "../common/has-changed";+import { createEntityNotFoundWarning } from "../components/hui-warning";+import { LovelaceCard, LovelaceCardEditor } from "../types";+import { FanCardConfig } from "./types";++@customElement("hui-fan-card")+export class HuiFanCard extends LitElement implements LovelaceCard {+  public static async getConfigElement(): Promise<LovelaceCardEditor> {+    await import(+      /* webpackChunkName: "hui-fan-card-editor" */ "../editor/config-elements/hui-fan-card-editor"+    );+    return document.createElement("hui-fan-card-editor");+  }++  public static getStubConfig(+    hass: HomeAssistant,+    entities: string[],+    entitiesFallback: string[]+  ): FanCardConfig {+    const includeDomains = ["fan"];+    const maxEntities = 1;+    const foundEntities = findEntities(+      hass,+      maxEntities,+      entities,+      entitiesFallback,+      includeDomains+    );++    return { type: "fan", entity: foundEntities[0] || "" };+  }++  @property({ attribute: false }) public hass?: HomeAssistant;++  @internalProperty() private _config?: FanCardConfig;++  private _speedTimeout?: number;++  public getCardSize(): number {+    return 5;+  }++  public setConfig(config: FanCardConfig): void {+    if (!config.entity || config.entity.split(".")[0] !== "fan") {+      throw new Error("Specify an entity from within the fan domain.");+    }++    this._config = {+      tap_action: { action: "toggle" },+      hold_action: { action: "more-info" },+      ...config,+    };+  }++  protected render(): TemplateResult {+    if (!this.hass || !this._config) {+      return html``;+    }++    const stateObj = this.hass.states[this._config!.entity] as FanEntity;++    if (!stateObj) {+      return html`+        <hui-warning>+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}+        </hui-warning>+      `;+    }++    const max_speed = stateObj.attributes.speed_list.length;++    const speed = stateObj.attributes.speed_list.indexOf(+      stateObj.attributes.speed+    );++    return html`+      <ha-card+        .header=${this._config!.title}+        class=${classMap({ "no-header": !this._config!.title })}+      >+        <mwc-icon-button+          class="more-info"+          label="Open more info"+          @click=${this._handleMoreInfo}+          tabindex="0"+        >+          <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>+        </mwc-icon-button>++        <div class="content">+          <div id="controls">+            <div id="slider">+              <round-slider+                min="0"+                max=${max_speed}+                .value=${speed}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                @value-changing=${this._dragEvent}+                @value-changed=${this._setSpeed}+                style=${styleMap({+                  visibility: "visible",+                })}+              ></round-slider>+              <ha-icon-button+                class="fan-button ${classMap({+                  "slider-center": true,

+import { mdiDotsVertical } from "@mdi/js";+import "@thomasloven/round-slider";+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  TemplateResult,+} from "lit-element";+import { classMap } from "lit-html/directives/class-map";+import { styleMap } from "lit-html/directives/style-map";+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";+import { fireEvent } from "../../../common/dom/fire_event";+import { computeStateDisplay } from "../../../common/entity/compute_state_display";+import { computeStateName } from "../../../common/entity/compute_state_name";+import { stateIcon } from "../../../common/entity/state_icon";+import "../../../components/ha-card";+import "../../../components/ha-icon-button";+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";+import { ActionHandlerEvent } from "../../../data/lovelace";+import { HomeAssistant, FanEntity } from "../../../types";+import { actionHandler } from "../common/directives/action-handler-directive";+import { findEntities } from "../common/find-entites";+import { handleAction } from "../common/handle-action";+import { hasAction } from "../common/has-action";+import { hasConfigOrEntityChanged } from "../common/has-changed";+import { createEntityNotFoundWarning } from "../components/hui-warning";+import { LovelaceCard, LovelaceCardEditor } from "../types";+import { FanCardConfig } from "./types";++@customElement("hui-fan-card")+export class HuiFanCard extends LitElement implements LovelaceCard {+  public static async getConfigElement(): Promise<LovelaceCardEditor> {+    await import(+      /* webpackChunkName: "hui-fan-card-editor" */ "../editor/config-elements/hui-fan-card-editor"+    );+    return document.createElement("hui-fan-card-editor");+  }++  public static getStubConfig(+    hass: HomeAssistant,+    entities: string[],+    entitiesFallback: string[]+  ): FanCardConfig {+    const includeDomains = ["fan"];+    const maxEntities = 1;+    const foundEntities = findEntities(+      hass,+      maxEntities,+      entities,+      entitiesFallback,+      includeDomains+    );++    return { type: "fan", entity: foundEntities[0] || "" };+  }++  @property({ attribute: false }) public hass?: HomeAssistant;++  @internalProperty() private _config?: FanCardConfig;++  private _speedTimeout?: number;++  public getCardSize(): number {+    return 5;+  }++  public setConfig(config: FanCardConfig): void {+    if (!config.entity || config.entity.split(".")[0] !== "fan") {+      throw new Error("Specify an entity from within the fan domain.");+    }++    this._config = {+      tap_action: { action: "toggle" },+      hold_action: { action: "more-info" },+      ...config,+    };+  }++  protected render(): TemplateResult {+    if (!this.hass || !this._config) {+      return html``;+    }++    const stateObj = this.hass.states[this._config!.entity] as FanEntity;++    if (!stateObj) {+      return html`+        <hui-warning>+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}+        </hui-warning>+      `;+    }++    const max_speed = stateObj.attributes.speed_list.length;++    const speed = stateObj.attributes.speed_list.indexOf(+      stateObj.attributes.speed+    );++    return html`+      <ha-card+        .header=${this._config!.title}+        class=${classMap({ "no-header": !this._config!.title })}+      >+        <mwc-icon-button+          class="more-info"+          label="Open more info"+          @click=${this._handleMoreInfo}+          tabindex="0"+        >+          <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>+        </mwc-icon-button>++        <div class="content">+          <div id="controls">+            <div id="slider">+              <round-slider+                min="0"+                max=${max_speed}+                .value=${speed}+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}+                @value-changing=${this._dragEvent}+                @value-changed=${this._setSpeed}+                style=${styleMap({+                  visibility: "visible",+                })}

+import { mdiDotsVertical } from "@mdi/js";+import "@thomasloven/round-slider";+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  TemplateResult,+} from "lit-element";+import { classMap } from "lit-html/directives/class-map";+import { styleMap } from "lit-html/directives/style-map";+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";+import { fireEvent } from "../../../common/dom/fire_event";+import { computeStateDisplay } from "../../../common/entity/compute_state_display";+import { computeStateName } from "../../../common/entity/compute_state_name";+import { stateIcon } from "../../../common/entity/state_icon";+import "../../../components/ha-card";+import "../../../components/ha-icon-button";+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";+import { ActionHandlerEvent } from "../../../data/lovelace";+import { HomeAssistant, FanEntity } from "../../../types";+import { actionHandler } from "../common/directives/action-handler-directive";+import { findEntities } from "../common/find-entites";+import { handleAction } from "../common/handle-action";+import { hasAction } from "../common/has-action";+import { hasConfigOrEntityChanged } from "../common/has-changed";+import { createEntityNotFoundWarning } from "../components/hui-warning";+import { LovelaceCard, LovelaceCardEditor } from "../types";+import { FanCardConfig } from "./types";++@customElement("hui-fan-card")+export class HuiFanCard extends LitElement implements LovelaceCard {+  public static async getConfigElement(): Promise<LovelaceCardEditor> {+    await import(+      /* webpackChunkName: "hui-fan-card-editor" */ "../editor/config-elements/hui-fan-card-editor"+    );+    return document.createElement("hui-fan-card-editor");+  }++  public static getStubConfig(+    hass: HomeAssistant,+    entities: string[],+    entitiesFallback: string[]+  ): FanCardConfig {+    const includeDomains = ["fan"];+    const maxEntities = 1;+    const foundEntities = findEntities(+      hass,+      maxEntities,+      entities,+      entitiesFallback,+      includeDomains+    );++    return { type: "fan", entity: foundEntities[0] || "" };+  }++  @property({ attribute: false }) public hass?: HomeAssistant;++  @internalProperty() private _config?: FanCardConfig;++  private _speedTimeout?: number;++  public getCardSize(): number {+    return 5;+  }++  public setConfig(config: FanCardConfig): void {+    if (!config.entity || config.entity.split(".")[0] !== "fan") {+      throw new Error("Specify an entity from within the fan domain.");+    }++    this._config = {+      tap_action: { action: "toggle" },+      hold_action: { action: "more-info" },+      ...config,+    };+  }++  protected render(): TemplateResult {+    if (!this.hass || !this._config) {+      return html``;+    }++    const stateObj = this.hass.states[this._config!.entity] as FanEntity;++    if (!stateObj) {+      return html`+        <hui-warning>+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}+        </hui-warning>+      `;+    }++    const max_speed = stateObj.attributes.speed_list.length;++    const speed = stateObj.attributes.speed_list.indexOf(+      stateObj.attributes.speed+    );++    return html`+      <ha-card+        .header=${this._config!.title}+        class=${classMap({ "no-header": !this._config!.title })}+      >+        <mwc-icon-button+          class="more-info"+          label="Open more info"+          @click=${this._handleMoreInfo}+          tabindex="0"+        >+          <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>+        </mwc-icon-button>++        <div class="content">+          <div id="controls">+            <div id="slider">+              <round-slider+                min="0"+                max=${max_speed}

 export const zhaTabs: PageNavigation[] = [     path: `/config/zha/groups`,     iconPath: mdiFolderMultipleOutline,   },+  {+    translationKey: "ui.panel.config.zha.visualization.caption",+    path: `/config/zha/visualization`,+    iconPath: mdiFolderMultipleOutline,

+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  query,+} from "lit-element";++import { navigate } from "../../../../../common/navigate";+import { fetchDevices, ZHADevice } from "../../../../../data/zha";+import "../../../../../layouts/hass-error-screen";+import "../../../../../layouts/hass-subpage";+import type { HomeAssistant } from "../../../../../types";+import { Network, Edge, Node, EdgeOptions } from "vis-network";+import "vis-network/styles/vis-network.css";+import "../../../ha-config-section";++@customElement("zha-network-visualization-page")+export class ZHANetworkVisualizationPage extends LitElement {+  @property({ type: Object }) public hass!: HomeAssistant;++  @property({ type: Boolean }) public narrow!: boolean;++  @query("#visualization", true)+  private _visualization!: HTMLElement;++  @internalProperty()+  private _firstUpdatedCalled = false;++  @internalProperty()+  private _devices: ZHADevice[] = [];++  @internalProperty()+  private _network!: Network;++  public connectedCallback(): void {+    super.connectedCallback();+    if (this.hass && this._firstUpdatedCalled) {+      this._fetchData();

+import {+  css,+  CSSResult,+  customElement,+  html,+  internalProperty,+  LitElement,+  property,+  PropertyValues,+  query,+} from "lit-element";++import { navigate } from "../../../../../common/navigate";+import { fetchDevices, ZHADevice } from "../../../../../data/zha";+import "../../../../../layouts/hass-error-screen";+import "../../../../../layouts/hass-subpage";+import type { HomeAssistant } from "../../../../../types";+import { Network, Edge, Node, EdgeOptions } from "vis-network";+import "vis-network/styles/vis-network.css";+import "../../../ha-config-section";++@customElement("zha-network-visualization-page")+export class ZHANetworkVisualizationPage extends LitElement {+  @property({ type: Object }) public hass!: HomeAssistant;++  @property({ type: Boolean }) public narrow!: boolean;++  @query("#visualization", true)+  private _visualization!: HTMLElement;++  @internalProperty()+  private _firstUpdatedCalled = false;++  @internalProperty()+  private _devices: ZHADevice[] = [];++  @internalProperty()+  private _network!: Network;++  public connectedCallback(): void {+    super.connectedCallback();+    if (this.hass && this._firstUpdatedCalled) {+      this._fetchData();+    }+  }++  protected firstUpdated(changedProperties: PropertyValues): void {+    super.firstUpdated(changedProperties);+    if (this.hass) {+      this._fetchData();+    }+    this._network = new Network(+      this._visualization,+      {},+      {+        autoResize: true,+        height: window.innerHeight + "px",+        width: window.innerWidth + "px",+        layout: {+          improvedLayout: true,+        },+        physics: {+          barnesHut: {+            springConstant: 0,+            avoidOverlap: 10,+            damping: 0.09,+          },+        },+        nodes: {+          font: {+            multi: "html",+          },+        },+        edges: {+          smooth: {+            enabled: true,+            type: "continuous",+            forceDirection: "none",+            roundness: 0.6,+          },+        },+      }+    );+    this._network.on("doubleClick", (properties) => {+      const ieee = properties.nodes[0];+      if (ieee) {+        const devices = this._devices.filter((regDev) => {+          return regDev.ieee === ieee;+        });+        if (devices[0]) {+          navigate(+            this,+            "/config/devices/device/" + devices[0].device_reg_id,+            false+          );+        }+      }+    });+    this._firstUpdatedCalled = true;+  }++  protected render() {+    return html`+      <hass-subpage+        .hass=${this.hass}+        .header=${this.hass.localize(+          "ui.panel.config.zha.visualization.header"+        )}+      >+        <ha-config-section .isWide=${!this.narrow}>+          <div id="visualization"></div>+        </ha-config-section>+      </hass-subpage>+    `;+  }++  private async _fetchData() {+    this._devices = await fetchDevices(this.hass!);+    this._updateDevices(this._devices);+  }++  private _updateDevices(devices: ZHADevice[]) {+    const nodes: Node[] = [];+    const edges: Edge[] = [];++    devices.forEach((device) => {+      nodes.push({+        id: device.ieee,+        label: this._buildLabel(device),+        shape: this._getShape(device),+        mass: this._getMass(device),+      });+      if (device.neighbors && device.neighbors.length > 0) {+        device.neighbors.forEach((neighbor) => {+          const idx = edges.findIndex(function (e) {+            return device.ieee === e.to && neighbor.ieee === e.from;+          });+          if (idx === -1) {+            edges.push({+              from: device.ieee,+              to: neighbor.ieee,+              label: neighbor.lqi + "",+              color: this._getLQI(neighbor.lqi),+            });+          } else {+            edges[idx].color = this._getLQI(+              (parseInt(edges[idx].label!) + neighbor.lqi) / 2+            );+            edges[idx].label += "/" + neighbor.lqi;+          }+        });+      }+    });++    this._network.setData({ nodes: nodes, edges: edges });+  }++  private _getLQI(lqi: number): EdgeOptions["color"] {+    if (lqi > 192) {+      return { color: "#17ab00", highlight: "#17ab00" };+    }+    if (lqi > 128) {+      return { color: "#e6b402", highlight: "#e6b402" };+    }+    if (lqi > 80) {+      return { color: "#fc4c4c", highlight: "#fc4c4c" };+    }+    return { color: "#bfbfbf", highlight: "#bfbfbf" };+  }++  private _getMass(device: ZHADevice) {+    if (device.device_type === "Coordinator") {+      return 2;+    }+    if (device.device_type === "Router") {+      return 4;+    }+    return 5;+  }++  private _getShape(device: ZHADevice): string {+    if (device.device_type === "Coordinator") {+      return "box";+    }+    if (device.device_type === "Router") {+      return "ellipse";+    }+    return "circle";+  }++  private _buildLabel(device: ZHADevice): string {+    const regDevices = this._devices.filter((regDev) => {