Add template card using tile design

Author: piitaya

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

@@ -26,8 +26,8 @@ import { MushroomBaseElement } from "../../utils/base-element";
 import { loadHaComponents } from "../../utils/loader";
 import { LovelaceChipConfig } from "../../utils/lovelace/chip/types";
 import {
+  EditDetailElementEvent,
   EditorTarget,
-  EditSubElementEvent,
   SubElementEditorConfig,
 } from "../../utils/lovelace/editor/types";
 import "../../utils/lovelace/sub-element-editor";
@@ -295,7 +295,7 @@ export class ChipsCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _editDetailElement(ev: HASSDomEvent<EditSubElementEvent>): void {
+  private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {
     this._subElementEditorConfig = ev.detail.subElementConfig;
   }
 

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

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

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

@@ -0,0 +1,80 @@
+import {
+  any,
+  array,
+  assign,
+  boolean,
+  enums,
+  object,
+  optional,
+  string,
+  union,
+} from "superstruct";
+import { ActionConfig, actionConfigStruct, LovelaceCardConfig } from "../../ha";
+import { LovelaceCardFeatureConfig } from "../../ha/panels/lovelace/card-features/types";
+import { lovelaceCardConfigStruct } from "../../shared/config/lovelace-card-config";
+
+export type MushroomBadgeConfig = {
+  icon?: string;
+  color?: string;
+  position?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
+};
+
+export type TemplateNewCardConfig = LovelaceCardConfig & {
+  entity?: string;
+  // Content
+  primary?: string;
+  secondary?: string;
+  color?: string;
+  icon?: string;
+  picture?: string;
+  // Badges
+  badge_icon?: string;
+  badge_text?: string;
+  badge_color?: string;
+  // Style
+  vertical?: boolean;
+  multiline_secondary?: boolean;
+  // Interactions
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
+  icon_tap_action?: ActionConfig;
+  icon_hold_action?: ActionConfig;
+  icon_double_tap_action?: ActionConfig;
+  // Features
+  features?: LovelaceCardFeatureConfig[];
+  features_position?: "bottom" | "inline";
+  // Entity IDs for template
+  entity_id?: string | string[];
+};
+
+export const templateNewCardConfigStruct = assign(
+  lovelaceCardConfigStruct,
+  object({
+    entity: optional(string()),
+    primary: optional(string()),
+    secondary: optional(string()),
+    color: optional(string()),
+    icon: optional(string()),
+    picture: optional(string()),
+    // Badges
+    badge_icon: optional(string()),
+    badge_text: optional(string()),
+    badge_color: optional(string()),
+    // Style
+    vertical: optional(boolean()),
+    multiline_secondary: optional(boolean()),
+    // Interactions
+    tap_action: optional(actionConfigStruct),
+    hold_action: optional(actionConfigStruct),
+    double_tap_action: optional(actionConfigStruct),
+    icon_tap_action: optional(actionConfigStruct),
+    icon_hold_action: optional(actionConfigStruct),
+    icon_double_tap_action: optional(actionConfigStruct),
+    // Features
+    features: optional(array(any())),
+    features_position: optional(enums(["bottom", "inline"])),
+    // Entity IDs for template
+    entity_id: optional(union([string(), array(string())])),
+  })
+);