Add support for area context

Author: piitaya

src/cards/template-new-card/template-new-card-config.ts

@@ -21,6 +21,7 @@ export type MushroomBadgeConfig = {
 
 export type TemplateNewCardConfig = LovelaceCardConfig & {
   entity?: string;
+  area?: string;
   // Content
   primary?: string;
   secondary?: string;
@@ -51,7 +52,10 @@ export type TemplateNewCardConfig = LovelaceCardConfig & {
 export const templateNewCardConfigStruct = assign(
   lovelaceCardConfigStruct,
   object({
+    // Context
     entity: optional(string()),
+    area: optional(string()),
+    // Content
     primary: optional(string()),
     secondary: optional(string()),
     color: optional(string()),

src/cards/template-new-card/template-new-card-editor.ts

@@ -49,6 +49,7 @@ export const TILE_LABELS = [
 ];
 
 export const HELPERS = [
+  "area",
   "entity",
   "badge_text",
   "multiline_secondary",
@@ -72,10 +73,28 @@ export class TemplateCardEditor
     this._config = config;
   }
 
+  private _featureContext = memoizeOne(
+    (config: TemplateNewCardConfig): LovelaceCardFeatureContext => {
+      return {
+        entity_id: config.entity,
+        area_id: config.area,
+      };
+    }
+  );
+
   private _schema = memoizeOne(
     (localize: LocalizeFunc) =>
       [
-        { name: "entity", selector: { entity: {} } },
+        {
+          name: "context",
+          flatten: true,
+          type: "expandable",
+          icon: "mdi:shape",
+          schema: [
+            { name: "entity", selector: { entity: {} } },
+            { name: "area", selector: { area: {} } },
+          ],
+        },
         {
           name: "content",
           flatten: true,
@@ -260,8 +279,7 @@ export class TemplateCardEditor
       data.content_layout === "vertical"
     );
 
-    const entityId = this._config.entity;
-    const stateObj = entityId ? this.hass!.states[entityId] : undefined;
+    const featureContext = this._featureContext(this._config);
 
     return html`
       <ha-form
@@ -291,7 +309,7 @@ export class TemplateCardEditor
           ></ha-form>
           <hui-card-features-editor
             .hass=${this.hass}
-            .stateObj=${stateObj}
+            .context=${featureContext}
             .features=${this._config!.features ?? []}
             @features-changed=${this._featuresChanged}
             @edit-detail-element=${this._editDetailElement}

src/cards/template-new-card/template-new-card.ts

@@ -50,6 +50,11 @@ const TEMPLATE_KEYS = [
 
 type TemplateKey = (typeof TEMPLATE_KEYS)[number];
 
+export interface LovelaceCardFeatureContext {
+  entity_id?: string;
+  area_id?: string;
+}
+
 @customElement(TEMPLATE_CARD_NEW_NAME)
 export class Template extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -162,6 +167,7 @@ export class Template extends LitElement implements LovelaceCard {
             config: this._config,
             user: this.hass.user!.name,
             entity: this._config.entity,
+            area: this._config.area,
           },
           strict: true,
         }
@@ -216,6 +222,15 @@ export class Template extends LitElement implements LovelaceCard {
     };
   }
 
+  private _featureContext = memoizeOne(
+    (config: TemplateNewCardConfig): LovelaceCardFeatureContext => {
+      return {
+        entity_id: config.entity,
+        area_id: config.area,
+      };
+    }
+  );
+
   private getValue(key: TemplateKey) {
     const value = this._getTemplateKeyValue(key);
     return isTemplate(value)
@@ -342,7 +357,6 @@ export class Template extends LitElement implements LovelaceCard {
     const containerOrientationClass =
       featurePosition === "inline" ? "horizontal" : "";
 
-    const stateObj = entityId ? this.hass.states[entityId] : undefined;
     const multilineSecondary = this._config.multiline_secondary;
 
     const secondaryInfo = secondary
@@ -356,6 +370,8 @@ export class Template extends LitElement implements LovelaceCard {
         `
       : undefined;
 
+    const featureContext = this._featureContext(this._config);
+
     return html`
       <ha-card style=${styleMap(style)}>
         <div
@@ -427,13 +443,14 @@ export class Template extends LitElement implements LovelaceCard {
                 `
               : nothing}
           </div>
-          ${features.length > 0 && stateObj
+          ${features.length > 0
             ? html`
                 <hui-card-features
                   .hass=${this.hass}
-                  .stateObj=${stateObj}
+                  .context=${featureContext}
                   .color=${cssColor}
                   .features=${features}
+                  .position=${featurePosition}
                 ></hui-card-features>
               `
             : nothing}

src/ha/panels/lovelace/card-features/types.ts

@@ -4,4 +4,5 @@ export type LovelaceCardFeatureConfig = {
 
 export interface LovelaceCardFeatureContext {
   entity_id?: string;
+  area_id?: string;
 }