Add view_layout to card structs, fix button entity row struct (#9834)

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

@@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { array, assert, object, optional, string } from "superstruct";
+import { array, assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon";
@@ -11,16 +11,19 @@ import { HomeAssistant } from "../../../../types";
 import { AlarmPanelCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  name: optional(string()),
+    entity: optional(string()),
-  states: optional(array()),
+    name: optional(string()),
-  theme: optional(string()),
+    states: optional(array()),
-});
+    theme: optional(string()),
+  })
+);
 
 const includeDomains = ["alarm_control_panel"];
 

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

@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, boolean, object, optional, string } from "superstruct";
+import { assert, boolean, object, optional, string, assign } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@@ -18,20 +18,23 @@ import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  name: optional(string()),
+    entity: optional(string()),
-  show_name: optional(boolean()),
+    name: optional(string()),
-  icon: optional(string()),
+    show_name: optional(boolean()),
-  show_icon: optional(boolean()),
+    icon: optional(string()),
-  icon_height: optional(string()),
+    show_icon: optional(boolean()),
-  tap_action: optional(actionConfigStruct),
+    icon_height: optional(string()),
-  hold_action: optional(actionConfigStruct),
+    tap_action: optional(actionConfigStruct),
-  theme: optional(string()),
+    hold_action: optional(actionConfigStruct),
-  show_state: optional(boolean()),
+    theme: optional(string()),
-});
+    show_state: optional(boolean()),
+  })
+);
 
 const actions = [
   "more-info",

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

@@ -3,6 +3,7 @@ import { customElement, property, state } from "lit/decorators";
 import {
   array,
   assert,
+  assign,
   boolean,
   object,
   optional,
@@ -18,14 +19,17 @@ import "../../components/hui-theme-select-editor";
 import type { LovelaceCardEditor } from "../../types";
 import type { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  title: optional(union([string(), boolean()])),
+  object({
-  initial_view: optional(string()),
+    title: optional(union([string(), boolean()])),
-  theme: optional(string()),
+    initial_view: optional(string()),
-  entities: array(string()),
+    theme: optional(string()),
-});
+    entities: array(string()),
+  })
+);
 
 const views = ["dayGridMonth", "dayGridDay", "listWeek"];
 

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

@@ -3,7 +3,15 @@ import "@material/mwc-tab/mwc-tab";
 import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
-import { any, array, assert, object, optional, string } from "superstruct";
+import {
+  any,
+  array,
+  assert,
+  assign,
+  object,
+  optional,
+  string,
+} from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
@@ -15,6 +23,7 @@ import type { HuiCardElementEditor } from "../card-editor/hui-card-element-edito
 import "../card-editor/hui-card-picker";
 import "../hui-element-editor";
 import type { ConfigChangedEvent } from "../hui-element-editor";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { GUIModeChangedEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -23,11 +32,13 @@ const conditionStruct = object({
   state: optional(string()),
   state_not: optional(string()),
 });
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  card: any(),
+  object({
-  conditions: optional(array(conditionStruct)),
+    card: any(),
-});
+    conditions: optional(array(conditionStruct)),
+  })
+);
 
 @customElement("hui-conditional-card-editor")
 export class HuiConditionalCardEditor

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

@@ -9,6 +9,7 @@ import {
   array,
   assert,
   boolean,
+  assign,
   literal,
   number,
   object,
@@ -44,10 +45,13 @@ import {
   SubElementEditorConfig,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
 const buttonEntitiesRowConfigStruct = object({
   type: literal("button"),
-  name: string(),
+  entity: optional(string()),
+  name: optional(string()),
+  icon: optional(string()),
   action_name: optional(string()),
   tap_action: actionConfigStruct,
   hold_action: optional(actionConfigStruct),
@@ -107,9 +111,14 @@ const buttonsEntitiesRowConfigStruct = object({
     union([
       object({
         entity: string(),
+        name: optional(string()),
         icon: optional(string()),
         image: optional(string()),
-        name: optional(string()),
+        show_name: optional(boolean()),
+        show_icon: optional(boolean()),
+        tap_action: optional(actionConfigStruct),
+        hold_action: optional(actionConfigStruct),
+        double_tap_action: optional(actionConfigStruct),
       }),
       string(),
     ])
@@ -151,18 +160,20 @@ const entitiesRowConfigStruct = union([
   customRowConfigStruct,
 ]);
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  title: optional(union([string(), boolean()])),
+  object({
-  entity: optional(entityId()),
+    title: optional(union([string(), boolean()])),
-  theme: optional(string()),
+    entity: optional(entityId()),
-  icon: optional(string()),
+    theme: optional(string()),
-  show_header_toggle: optional(boolean()),
+    icon: optional(string()),
-  state_color: optional(boolean()),
+    show_header_toggle: optional(boolean()),
-  entities: array(entitiesRowConfigStruct),
+    state_color: optional(boolean()),
-  header: optional(headerFooterConfigStructs),
+    entities: array(entitiesRowConfigStruct),
-  footer: optional(headerFooterConfigStructs),
+    header: optional(headerFooterConfigStructs),
-});
+    footer: optional(headerFooterConfigStructs),
+  })
+);
 
 @customElement("hui-entities-card-editor")
 export class HuiEntitiesCardEditor

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

@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, object, optional, string, assign } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-attribute-picker";
@@ -15,17 +15,20 @@ import { headerFooterConfigStructs } from "../../header-footer/structs";
 import { LovelaceCardEditor } from "../../types";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  name: optional(string()),
+    entity: optional(string()),
-  icon: optional(string()),
+    name: optional(string()),
-  attribute: optional(string()),
+    icon: optional(string()),
-  unit: optional(string()),
+    attribute: optional(string()),
-  theme: optional(string()),
+    unit: optional(string()),
-  footer: optional(headerFooterConfigStructs),
+    theme: optional(string()),
-});
+    footer: optional(headerFooterConfigStructs),
+  })
+);
 
 @customElement("hui-entity-card-editor")
 export class HuiEntityCardEditor

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

@@ -1,7 +1,15 @@
 import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, boolean, number, object, optional, string } from "superstruct";
+import {
+  assert,
+  assign,
+  boolean,
+  number,
+  object,
+  optional,
+  string,
+} from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
@@ -11,20 +19,23 @@ import { GaugeCardConfig, SeverityConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  name: optional(string()),
+  object({
-  entity: optional(string()),
+    name: optional(string()),
-  unit: optional(string()),
+    entity: optional(string()),
-  min: optional(number()),
+    unit: optional(string()),
-  max: optional(number()),
+    min: optional(number()),
-  severity: optional(object()),
+    max: optional(number()),
-  theme: optional(string()),
+    severity: optional(object()),
-  needle: optional(boolean()),
+    theme: optional(string()),
-});
+    needle: optional(boolean()),
+  })
+);
 
 const includeDomains = ["counter", "input_number", "number", "sensor"];
 

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

@@ -12,6 +12,7 @@ import {
   optional,
   string,
   union,
+  assign,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@@ -29,18 +30,21 @@ import { processEditorEntities } from "../process-editor-entities";
 import { entitiesConfigStruct } from "../structs/entities-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  title: optional(union([string(), number()])),
+  object({
-  theme: optional(string()),
+    title: optional(union([string(), number()])),
-  columns: optional(number()),
+    theme: optional(string()),
-  show_name: optional(boolean()),
+    columns: optional(number()),
-  show_state: optional(boolean()),
+    show_name: optional(boolean()),
-  show_icon: optional(boolean()),
+    show_state: optional(boolean()),
-  state_color: optional(boolean()),
+    show_icon: optional(boolean()),
-  entities: array(entitiesConfigStruct),
+    state_color: optional(boolean()),
-});
+    entities: array(entitiesConfigStruct),
+  })
+);
 
 @customElement("hui-glance-card-editor")
 export class HuiGlanceCardEditor

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

@@ -4,6 +4,7 @@ import {
   any,
   array,
   assert,
+  assign,
   boolean,
   number,
   object,
@@ -13,15 +14,18 @@ import {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import { GridCardConfig } from "../../cards/types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { HuiStackCardEditor } from "./hui-stack-card-editor";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  cards: array(any()),
+  object({
-  title: optional(string()),
+    cards: array(any()),
-  square: optional(boolean()),
+    title: optional(string()),
-  columns: optional(number()),
+    square: optional(boolean()),
-});
+    columns: optional(number()),
+  })
+);
 
 @customElement("hui-grid-card-editor")
 export class HuiGridCardEditor extends HuiStackCardEditor {

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

@@ -1,7 +1,15 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { array, assert, number, object, optional, string } from "superstruct";
+import {
+  array,
+  assert,
+  number,
+  object,
+  optional,
+  string,
+  assign,
+} from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { HistoryGraphCardConfig } from "../../cards/types";
@@ -12,14 +20,17 @@ import { processEditorEntities } from "../process-editor-entities";
 import { entitiesConfigStruct } from "../structs/entities-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entities: array(entitiesConfigStruct),
+  object({
-  title: optional(string()),
+    entities: array(entitiesConfigStruct),
-  hours_to_show: optional(number()),
+    title: optional(string()),
-  refresh_interval: optional(number()),
+    hours_to_show: optional(number()),
-});
+    refresh_interval: optional(number()),
+  })
+);
 
 @customElement("hui-history-graph-card-editor")
 export class HuiHistoryGraphCardEditor

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

@@ -1,22 +1,25 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { HumidifierCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  name: optional(string()),
+    entity: optional(string()),
-  theme: optional(string()),
+    name: optional(string()),
-});
+    theme: optional(string()),
+  })
+);
 
 const includeDomains = ["humidifier"];
 

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

@@ -1,20 +1,23 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { IframeCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  title: optional(string()),
+  object({
-  url: optional(string()),
+    title: optional(string()),
-  aspect_ratio: optional(string()),
+    url: optional(string()),
-});
+    aspect_ratio: optional(string()),
+  })
+);
 
 @customElement("hui-iframe-card-editor")
 export class HuiIframeCardEditor

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

@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, object, optional, string, assign } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-icon-input";
@@ -15,16 +15,19 @@ import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  name: optional(string()),
+  object({
-  entity: optional(string()),
+    name: optional(string()),
-  theme: optional(string()),
+    entity: optional(string()),
-  icon: optional(string()),
+    theme: optional(string()),
-  hold_action: optional(actionConfigStruct),
+    icon: optional(string()),
-  double_tap_action: optional(actionConfigStruct),
+    hold_action: optional(actionConfigStruct),
-});
+    double_tap_action: optional(actionConfigStruct),
+  })
+);
 
 const includeDomains = ["light"];
 

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

@@ -1,7 +1,15 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { array, assert, number, object, optional, string } from "superstruct";
+import {
+  array,
+  assert,
+  assign,
+  number,
+  object,
+  optional,
+  string,
+} from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entities-picker";
 import "../../../../components/entity/ha-entity-picker";
@@ -10,16 +18,19 @@ import { LogbookCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entities: optional(array(string())),
+  object({
-  title: optional(string()),
+    entities: optional(array(string())),
-  hours_to_show: optional(number()),
+    title: optional(string()),
-  theme: optional(string()),
+    hours_to_show: optional(number()),
-});
+    theme: optional(string()),
+  })
+);
 
 @customElement("hui-logbook-card-editor")
 export class HuiLogbookCardEditor

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

@@ -9,6 +9,7 @@ import {
   object,
   optional,
   string,
+  assign,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@@ -25,17 +26,20 @@ import { processEditorEntities } from "../process-editor-entities";
 import { entitiesConfigStruct } from "../structs/entities-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  title: optional(string()),
+  object({
-  aspect_ratio: optional(string()),
+    title: optional(string()),
-  default_zoom: optional(number()),
+    aspect_ratio: optional(string()),
-  dark_mode: optional(boolean()),
+    default_zoom: optional(number()),
-  entities: array(entitiesConfigStruct),
+    dark_mode: optional(boolean()),
-  hours_to_show: optional(number()),
+    entities: array(entitiesConfigStruct),
-  geo_location_sources: optional(array(string())),
+    hours_to_show: optional(number()),
-});
+    geo_location_sources: optional(array(string())),
+  })
+);
 
 @customElement("hui-map-card-editor")
 export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {

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

@@ -2,21 +2,24 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { MarkdownCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  title: optional(string()),
+  object({
-  content: string(),
+    title: optional(string()),
-  theme: optional(string()),
+    content: string(),
-});
+    theme: optional(string()),
+  })
+);
 
 @customElement("hui-markdown-card-editor")
 export class HuiMarkdownCardEditor

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

@@ -1,19 +1,22 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  theme: optional(string()),
+    entity: optional(string()),
-});
+    theme: optional(string()),
+  })
+);
 
 const includeDomains = ["media_player"];
 

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

@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, object, optional, string, assign } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -12,14 +12,17 @@ import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  image: optional(string()),
+  object({
-  tap_action: optional(actionConfigStruct),
+    image: optional(string()),
-  hold_action: optional(actionConfigStruct),
+    tap_action: optional(actionConfigStruct),
-  theme: optional(string()),
+    hold_action: optional(actionConfigStruct),
-});
+    theme: optional(string()),
+  })
+);
 
 @customElement("hui-picture-card-editor")
 export class HuiPictureCardEditor

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

@@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, boolean, object, optional, string } from "superstruct";
+import { assert, boolean, object, optional, string, assign } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
@@ -19,21 +19,24 @@ import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  image: optional(string()),
+    entity: optional(string()),
-  name: optional(string()),
+    image: optional(string()),
-  camera_image: optional(string()),
+    name: optional(string()),
-  camera_view: optional(string()),
+    camera_image: optional(string()),
-  aspect_ratio: optional(string()),
+    camera_view: optional(string()),
-  tap_action: optional(actionConfigStruct),
+    aspect_ratio: optional(string()),
-  hold_action: optional(actionConfigStruct),
+    tap_action: optional(actionConfigStruct),
-  show_name: optional(boolean()),
+    hold_action: optional(actionConfigStruct),
-  show_state: optional(boolean()),
+    show_name: optional(boolean()),
-  theme: optional(string()),
+    show_state: optional(boolean()),
-});
+    theme: optional(string()),
+  })
+);
 
 const includeDomains = ["camera"];
 

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

@@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { array, assert, object, optional, string } from "superstruct";
+import { array, assert, object, optional, string, assign } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { ActionConfig } from "../../../../data/lovelace";
@@ -20,20 +20,23 @@ import { actionConfigStruct } from "../structs/action-struct";
 import { entitiesConfigStruct } from "../structs/entities-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  title: optional(string()),
+  object({
-  entity: optional(string()),
+    title: optional(string()),
-  image: optional(string()),
+    entity: optional(string()),
-  camera_image: optional(string()),
+    image: optional(string()),
-  camera_view: optional(string()),
+    camera_image: optional(string()),
-  aspect_ratio: optional(string()),
+    camera_view: optional(string()),
-  tap_action: optional(actionConfigStruct),
+    aspect_ratio: optional(string()),
-  hold_action: optional(actionConfigStruct),
+    tap_action: optional(actionConfigStruct),
-  entities: array(entitiesConfigStruct),
+    hold_action: optional(actionConfigStruct),
-  theme: optional(string()),
+    entities: array(entitiesConfigStruct),
-});
+    theme: optional(string()),
+  })
+);
 
 const includeDomains = ["camera"];
 

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

@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon";
@@ -9,15 +9,18 @@ import { HomeAssistant } from "../../../../types";
 import { PlantStatusCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  name: optional(string()),
+    entity: optional(string()),
-  theme: optional(string()),
+    name: optional(string()),
-});
+    theme: optional(string()),
+  })
+);
 
 const includeDomains = ["plant"];
 

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

@@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, number, object, optional, string } from "superstruct";
+import { assert, assign, number, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-picker";
@@ -15,20 +15,23 @@ import { HomeAssistant } from "../../../../types";
 import { SensorCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  name: optional(string()),
+    entity: optional(string()),
-  icon: optional(string()),
+    name: optional(string()),
-  graph: optional(string()),
+    icon: optional(string()),
-  unit: optional(string()),
+    graph: optional(string()),
-  detail: optional(number()),
+    unit: optional(string()),
-  theme: optional(string()),
+    detail: optional(number()),
-  hours_to_show: optional(number()),
+    theme: optional(string()),
-});
+    hours_to_show: optional(number()),
+  })
+);
 
 const includeDomains = ["counter", "input_number", "number", "sensor"];
 

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -1,20 +1,23 @@
 import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  title: optional(string()),
+  object({
-  theme: optional(string()),
+    title: optional(string()),
-});
+    theme: optional(string()),
+  })
+);
 
 @customElement("hui-shopping-list-card-editor")
 export class HuiShoppingListEditor

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

@@ -3,7 +3,15 @@ import "@polymer/paper-tabs";
 import "@polymer/paper-tabs/paper-tab";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
-import { any, array, assert, object, optional, string } from "superstruct";
+import {
+  any,
+  array,
+  assert,
+  assign,
+  object,
+  optional,
+  string,
+} from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -13,14 +21,17 @@ import "../card-editor/hui-card-element-editor";
 import type { HuiCardElementEditor } from "../card-editor/hui-card-element-editor";
 import "../card-editor/hui-card-picker";
 import type { ConfigChangedEvent } from "../hui-element-editor";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { GUIModeChangedEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  cards: array(any()),
+  object({
-  title: optional(string()),
+    cards: array(any()),
-});
+    title: optional(string()),
+  })
+);
 
 @customElement("hui-stack-card-editor")
 export class HuiStackCardEditor

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

@@ -10,6 +10,7 @@ import {
   optional,
   string,
   union,
+  assign,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
@@ -25,6 +26,7 @@ import "../../../../components/ha-checkbox";
 import { StatisticType } from "../../../../data/history";
 import "../../../../components/ha-radio";
 import type { HaRadio } from "../../../../components/ha-radio";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
 const statTypeStruct = union([
   literal("sum"),
@@ -33,14 +35,16 @@ const statTypeStruct = union([
   literal("mean"),
 ]);
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entities: array(entitiesConfigStruct),
+  object({
-  title: optional(string()),
+    entities: array(entitiesConfigStruct),
-  days_to_show: optional(number()),
+    title: optional(string()),
-  chart_type: optional(union([literal("bar"), literal("line")])),
+    days_to_show: optional(number()),
-  stat_types: optional(union([array(statTypeStruct), statTypeStruct])),
+    chart_type: optional(union([literal("bar"), literal("line")])),
-});
+    stat_types: optional(union([array(statTypeStruct), statTypeStruct])),
+  })
+);
 
 @customElement("hui-statistics-graph-card-editor")
 export class HuiStatisticsGraphCardEditor

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

@@ -1,22 +1,25 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { ThermostatCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  name: optional(string()),
+    entity: optional(string()),
-  theme: optional(string()),
+    name: optional(string()),
-});
+    theme: optional(string()),
+  })
+);
 
 const includeDomains = ["climate"];
 

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

@@ -1,6 +1,6 @@
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, boolean, object, optional, string } from "superstruct";
+import { assert, boolean, object, optional, string, assign } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/ha-entity-attribute-picker";
@@ -14,18 +14,21 @@ import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
-const cardConfigStruct = object({
+const cardConfigStruct = assign(
-  type: string(),
+  baseLovelaceCardConfig,
-  entity: optional(string()),
+  object({
-  name: optional(string()),
+    entity: optional(string()),
-  theme: optional(string()),
+    name: optional(string()),
-  show_forecast: optional(boolean()),
+    theme: optional(string()),
-  secondary_info_attribute: optional(string()),
+    show_forecast: optional(boolean()),
-  tap_action: optional(actionConfigStruct),
+    secondary_info_attribute: optional(string()),
-  hold_action: optional(actionConfigStruct),
+    tap_action: optional(actionConfigStruct),
-  double_tap_action: optional(actionConfigStruct),
+    hold_action: optional(actionConfigStruct),
-});
+    double_tap_action: optional(actionConfigStruct),
+  })
+);
 
 const includeDomains = ["weather"];
 

src/panels/lovelace/editor/structs/base-card-struct.ts

@@ -0,0 +1,6 @@
+import { object, string, any } from "superstruct";
+
+export const baseLovelaceCardConfig = object({
+  type: string(),
+  view_layout: any(),
+});