Rename old template card to legacy

Author: piitaya

src/cards/chips-card/chips/template-chip-editor.ts

@@ -8,7 +8,7 @@ import { HaFormSchema } from "../../../utils/form/ha-form";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import { TemplateChipConfig } from "../../../utils/lovelace/chip/types";
 import { LovelaceChipEditor } from "../../../utils/lovelace/types";
-import { TEMPLATE_LABELS } from "../../template-card/template-card-editor";
+import { TEMPLATE_LABELS } from "../../legacy-template-card/legacy-template-card-editor";
 
 const SCHEMA: HaFormSchema[] = [
   { name: "entity", selector: { entity: {} } },

src/cards/legacy-template-card/const.ts

@@ -0,0 +1,4 @@
+import { PREFIX_NAME } from "../../const";
+
+export const LEGACY_TEMPLATE_CARD_NAME = `${PREFIX_NAME}-legacy-template-card`;
+export const LEGACY_TEMPLATE_CARD_EDITOR_NAME = `${LEGACY_TEMPLATE_CARD_NAME}-editor`;

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

@@ -0,0 +1,51 @@
+import {
+  array,
+  assign,
+  boolean,
+  object,
+  optional,
+  string,
+  union,
+} from "superstruct";
+import { LovelaceCardConfig } from "../../ha";
+import {
+  ActionsSharedConfig,
+  actionsSharedConfigStruct,
+} from "../../shared/config/actions-config";
+import {
+  AppearanceSharedConfig,
+  appearanceSharedConfigStruct,
+} from "../../shared/config/appearance-config";
+import { lovelaceCardConfigStruct } from "../../shared/config/lovelace-card-config";
+
+export type LegacyTemplateCardConfig = LovelaceCardConfig &
+  AppearanceSharedConfig &
+  ActionsSharedConfig & {
+    entity?: string;
+    icon?: string;
+    icon_color?: string;
+    primary?: string;
+    secondary?: string;
+    badge_icon?: string;
+    badge_color?: string;
+    picture?: string;
+    multiline_secondary?: boolean;
+    entity_id?: string | string[];
+  };
+
+export const legacyTemplateCardConfigStruct = assign(
+  lovelaceCardConfigStruct,
+  assign(appearanceSharedConfigStruct, actionsSharedConfigStruct),
+  object({
+    entity: optional(string()),
+    icon: optional(string()),
+    icon_color: optional(string()),
+    primary: optional(string()),
+    secondary: optional(string()),
+    badge_icon: optional(string()),
+    badge_color: optional(string()),
+    picture: optional(string()),
+    multiline_secondary: optional(boolean()),
+    entity_id: optional(union([string(), array(string())])),
+  })
+);

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

@@ -0,0 +1,124 @@
+import { html, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { assert } from "superstruct";
+import { LovelaceCardEditor, fireEvent } from "../../ha";
+import setupCustomlocalize from "../../localize";
+import { computeActionsFormSchema } from "../../shared/config/actions-config";
+import { MushroomBaseElement } from "../../utils/base-element";
+import { GENERIC_LABELS } from "../../utils/form/generic-fields";
+import { HaFormSchema } from "../../utils/form/ha-form";
+import { loadHaComponents } from "../../utils/loader";
+import { LEGACY_TEMPLATE_CARD_EDITOR_NAME } from "./const";
+import {
+  LegacyTemplateCardConfig,
+  legacyTemplateCardConfigStruct,
+} from "./legacy-template-card-config";
+
+export const TEMPLATE_LABELS = [
+  "badge_icon",
+  "badge_color",
+  "content",
+  "primary",
+  "secondary",
+  "multiline_secondary",
+  "picture",
+];
+
+const SCHEMA: HaFormSchema[] = [
+  { name: "entity", selector: { entity: {} } },
+  {
+    name: "icon",
+    selector: { template: {} },
+  },
+  {
+    name: "icon_color",
+    selector: { template: {} },
+  },
+  {
+    name: "primary",
+    selector: { template: {} },
+  },
+  {
+    name: "secondary",
+    selector: { template: {} },
+  },
+  {
+    name: "badge_icon",
+    selector: { template: {} },
+  },
+  {
+    name: "badge_color",
+    selector: { template: {} },
+  },
+  {
+    name: "picture",
+    selector: { template: {} },
+  },
+  {
+    type: "grid",
+    name: "",
+    schema: [
+      { name: "layout", selector: { mush_layout: {} } },
+      { name: "fill_container", selector: { boolean: {} } },
+      { name: "multiline_secondary", selector: { boolean: {} } },
+    ],
+  },
+  ...computeActionsFormSchema(),
+];
+
+@customElement(LEGACY_TEMPLATE_CARD_EDITOR_NAME)
+export class TemplateCardEditor
+  extends MushroomBaseElement
+  implements LovelaceCardEditor
+{
+  @state() private _config?: LegacyTemplateCardConfig;
+
+  connectedCallback() {
+    super.connectedCallback();
+    void loadHaComponents();
+  }
+
+  public setConfig(config: LegacyTemplateCardConfig): void {
+    assert(config, legacyTemplateCardConfigStruct);
+    this._config = config;
+  }
+
+  private _computeLabel = (schema: HaFormSchema) => {
+    const customLocalize = setupCustomlocalize(this.hass!);
+
+    if (schema.name === "entity") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.entity"
+      )} (${customLocalize("editor.card.template.entity_extra")})`;
+    }
+    if (GENERIC_LABELS.includes(schema.name)) {
+      return customLocalize(`editor.card.generic.${schema.name}`);
+    }
+    if (TEMPLATE_LABELS.includes(schema.name)) {
+      return customLocalize(`editor.card.template.${schema.name}`);
+    }
+    return this.hass!.localize(
+      `ui.panel.lovelace.editor.card.generic.${schema.name}`
+    );
+  };
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
+    }
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this._config}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabel}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+}