Add secondary info type option to Tile card

src/components/tile/ha-tile-info.ts

@@ -14,17 +14,32 @@ export class HaTileInfo extends LitElement {
 
   @property() public secondary?: string | TemplateResult<1>;
 
+  @property() public secondaryInfo?: string;
+
   protected render() {
     return html`
       <div class="info">
         <span class="primary">${this.primary}</span>
-        ${this.secondary
-          ? html`<span class="secondary">${this.secondary}</span>`
-          : nothing}
+        ${this._conditionallyRenderSecondaryData()}
       </div>
     `;
   }
 
+  private _conditionallyRenderSecondaryData() {
+    switch (this.secondaryInfo) {
+      case "state":
+        return this.secondary
+          ? html`<span class="secondary">${this.secondary}</span>`
+          : nothing;
+      case "none":
+        return nothing;
+      default:
+        return this.secondary
+          ? html`<span class="secondary">${this.secondary}</span>`
+          : nothing;
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .info {

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

@@ -276,6 +276,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     }
     const entityId = this._config.entity;
     const stateObj = entityId ? this.hass.states[entityId] : undefined;
+    const secondaryInfo = this._config.secondary_info;
 
     const contentClasses = { vertical: Boolean(this._config.vertical) };
 
@@ -384,6 +385,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
               class="info"
               .primary=${name}
               .secondary=${stateDisplay}
+              .secondaryInfo=${secondaryInfo}
             ></ha-tile-info>
           </div>
         </div>

src/panels/lovelace/cards/types.ts

@@ -511,6 +511,7 @@ export interface TileCardConfig extends LovelaceCardConfig {
   name?: string;
   icon?: string;
   color?: string;
+  secondary_info_type?: string;
   show_entity_picture?: string;
   vertical?: boolean;
   tap_action?: ActionConfig;

src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts

@@ -31,6 +31,14 @@ import { EditSubElementEvent, SubElementEditorConfig } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import "./hui-tile-card-features-editor";
 
+const SecondaryInfoValues = {
+    none: {},
+    "entity-id": {},
+    "last-changed": {},
+    "last-updated": {},
+    "last-triggered": { domains: ["automation", "script"] },
+  } as const;
+
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
@@ -43,6 +51,7 @@ const cardConfigStruct = assign(
     tap_action: optional(actionConfigStruct),
     icon_tap_action: optional(actionConfigStruct),
     features: optional(array(any())),
+    secondary_info: optional(string()),
   })
 );
 
@@ -90,6 +99,27 @@ export class HuiTileCardEditor
                     ui_color: {},
                   },
                 },
+                {
+                  name: "secondary_info",
+                  selector: {
+                    select: {
+                      options: (
+                        Object.keys(SecondaryInfoValues).filter(
+                          (info) =>
+                            !("domains" in SecondaryInfoValues[info]) ||
+                            ("domains" in SecondaryInfoValues[info] &&
+                              SecondaryInfoValues[info].domains!.includes(domain))
+                        ) as Array<keyof typeof SecondaryInfoValues>
+                      ).map((info) => ({
+                        value: info,
+                        label: localize(
+                          `ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
+                        ),
+                      })),
+                      mode: "dropdown",
+                    },
+                  },
+                },
                 {
                   name: "show_entity_picture",
                   selector: {
@@ -256,6 +286,11 @@ export class HuiTileCardEditor
           `ui.panel.lovelace.editor.card.tile.${schema.name}`
         );
 
+      case "secondary_info":
+        return this.hass!.localize(
+            `ui.panel.lovelace.editor.card.entity-row.${schema.name}`
+        );
+
       default:
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`