Move tile card features logic into its own file (#17775)

src/panels/lovelace/cards/hui-tile-card.ts

@@ -49,14 +49,8 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import "../components/hui-timestamp-display";
-import { createTileFeatureElement } from "../create-element/create-tile-feature-element";
+import "../tile-features/hui-tile-features";
-import type { LovelaceTileFeatureConfig } from "../tile-features/types";
+import type { LovelaceCard, LovelaceCardEditor } from "../types";
-import type {
-  LovelaceCard,
-  LovelaceCardEditor,
-  LovelaceTileFeature,
-} from "../types";
-import type { HuiErrorCard } from "./hui-error-card";
 import { computeTileBadge } from "./tile/badges/tile-badge";
 import type { ThermostatCardConfig, TileCardConfig } from "./types";
 
@@ -391,45 +385,16 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             ></ha-tile-info>
           </div>
         </div>
-        <div class="features">
+        <hui-tile-features
-          ${this._config.features?.map((featureConf) =>
+          .hass=${this.hass}
-            this.renderFeature(featureConf, stateObj)
+          .stateObj=${stateObj}
-          )}
+          .color=${this._config.color}
-        </div>
+          .features=${this._config.features}
+        ></hui-tile-features>
       </ha-card>
     `;
   }
 
-  private _featuresElements = new WeakMap<
-    LovelaceTileFeatureConfig,
-    LovelaceTileFeature | HuiErrorCard
-  >();
-
-  private _getFeatureElement(feature: LovelaceTileFeatureConfig) {
-    if (!this._featuresElements.has(feature)) {
-      const element = createTileFeatureElement(feature);
-      this._featuresElements.set(feature, element);
-      return element;
-    }
-
-    return this._featuresElements.get(feature)!;
-  }
-
-  private renderFeature(
-    featureConf: LovelaceTileFeatureConfig,
-    stateObj: HassEntity
-  ): TemplateResult {
-    const element = this._getFeatureElement(featureConf);
-
-    if (this.hass) {
-      element.hass = this.hass;
-      (element as LovelaceTileFeature).stateObj = stateObj;
-      (element as LovelaceTileFeature).color = this._config!.color;
-    }
-
-    return html`${element}`;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {

src/panels/lovelace/tile-features/hui-tile-features.ts

@@ -0,0 +1,82 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import {
+  CSSResultGroup,
+  LitElement,
+  TemplateResult,
+  css,
+  html,
+  nothing,
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant } from "../../../types";
+import type { HuiErrorCard } from "../cards/hui-error-card";
+import { createTileFeatureElement } from "../create-element/create-tile-feature-element";
+import type { LovelaceTileFeature } from "../types";
+import type { LovelaceTileFeatureConfig } from "./types";
+
+@customElement("hui-tile-features")
+export class HuiTileFeatures extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: HassEntity;
+
+  @property({ attribute: false }) public features?: LovelaceTileFeatureConfig[];
+
+  @property({ attribute: false }) public color?: string;
+
+  private _featuresElements = new WeakMap<
+    LovelaceTileFeatureConfig,
+    LovelaceTileFeature | HuiErrorCard
+  >();
+
+  private _getFeatureElement(feature: LovelaceTileFeatureConfig) {
+    if (!this._featuresElements.has(feature)) {
+      const element = createTileFeatureElement(feature);
+      this._featuresElements.set(feature, element);
+      return element;
+    }
+
+    return this._featuresElements.get(feature)!;
+  }
+
+  private renderFeature(
+    featureConf: LovelaceTileFeatureConfig,
+    stateObj: HassEntity
+  ): TemplateResult {
+    const element = this._getFeatureElement(featureConf);
+
+    if (this.hass) {
+      element.hass = this.hass;
+      (element as LovelaceTileFeature).stateObj = stateObj;
+      (element as LovelaceTileFeature).color = this.color;
+    }
+
+    return html`${element}`;
+  }
+
+  protected render() {
+    if (!this.features) {
+      return nothing;
+    }
+    return html`
+      ${this.features.map((featureConf) =>
+        this.renderFeature(featureConf, this.stateObj)
+      )}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tile-features": HuiTileFeatures;
+  }
+}