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 secondaryInfoType?: 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.secondaryInfoType) {
+      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

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

src/panels/lovelace/cards/types.ts

@@ -502,6 +502,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,8 @@ import { EditSubElementEvent, SubElementEditorConfig } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import "./hui-tile-card-features-editor";
 
+const DEFAULT_SECONDARY_INFO_TYPE = "state";
+
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
@@ -43,6 +45,7 @@ const cardConfigStruct = assign(
     tap_action: optional(actionConfigStruct),
     icon_tap_action: optional(actionConfigStruct),
     features: optional(array(any())),
+    secondary_info_type: optional(string()),
   })
 );
 
@@ -90,6 +93,24 @@ export class HuiTileCardEditor
                     ui_color: {},
                   },
                 },
+                {
+                  name: "secondary_info_type",
+                  selector: {
+                    select: {
+                      options: [
+                        {
+                          value: "state",
+                          label: "State",
+                        },
+                        {
+                          value: "none",
+                          label: "None",
+                        },
+                      ],
+                      mode: "dropdown",
+                    },
+                  },
+                },
                 {
                   name: "show_entity_picture",
                   selector: {
@@ -144,6 +165,11 @@ export class HuiTileCardEditor
 
     const schema = this._schema(this.hass!.localize);
 
+    const data = {
+      secondary_info_type: DEFAULT_SECONDARY_INFO_TYPE,
+      ...this._config,
+    };
+
     if (this._subElementEditorConfig) {
       return html`
         <hui-sub-element-editor
@@ -160,7 +186,7 @@ export class HuiTileCardEditor
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._config}
+        .data=${data}
         .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -256,6 +282,9 @@ export class HuiTileCardEditor
           `ui.panel.lovelace.editor.card.tile.${schema.name}`
         );
 
+      case "secondary_info_type":
+        return "Secondary info type";
+
       default:
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`