Entities Card: Add Header & Footer Editor

src/panels/lovelace/create-element/create-element-base.ts

@@ -16,6 +16,7 @@ import {
   LovelaceCard,
   LovelaceCardConstructor,
   LovelaceHeaderFooter,
+  LovelaceHeaderFooterConstructor,
   LovelaceRowConstructor,
 } from "../types";
 
@@ -45,7 +46,7 @@ interface CreateElementConfigTypes {
   "header-footer": {
     config: LovelaceHeaderFooterConfig;
     element: LovelaceHeaderFooter;
-    constructor: unknown;
+    constructor: LovelaceHeaderFooterConstructor;
   };
   view: {
     config: LovelaceViewConfig;

src/panels/lovelace/create-element/create-header-footer-element.ts

@@ -1,5 +1,8 @@
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { createLovelaceElement } from "./create-element-base";
+import {
+  createLovelaceElement,
+  getLovelaceElementClass,
+} from "./create-element-base";
 
 const LAZY_LOAD_TYPES = {
   picture: () => import("../header-footer/hui-picture-header-footer"),
@@ -16,3 +19,6 @@ export const createHeaderFooterElement = (config: LovelaceHeaderFooterConfig) =>
     undefined,
     undefined
   );
+
+export const getHeaderFooterElementClass = (type: string) =>
+  getLovelaceElementClass(type, "header-footer", undefined, LAZY_LOAD_TYPES);

src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts

@@ -0,0 +1,25 @@
+import { customElement } from "lit-element";
+import type { LovelaceCardConfig } from "../../../../data/lovelace";
+import { getCardElementClass } from "../../create-element/create-card-element";
+import type { LovelaceCardEditor } from "../../types";
+import { HuiElementEditor } from "../hui-element-editor";
+
+@customElement("hui-card-element-editor")
+export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
+  protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
+    const elClass = await getCardElementClass(this.configElementType!);
+
+    // Check if a GUI editor exists
+    if (elClass && elClass.getConfigElement) {
+      return elClass.getConfigElement();
+    }
+
+    return undefined;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-element-editor": HuiCardElementEditor;
+  }
+}

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -29,12 +29,10 @@ import type { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 import { addCard, replaceCard } from "../config-util";
 import { getCardDocumentationURL } from "../get-card-documentation-url";
-import "../hui-element-editor";
-import type {
-  ConfigChangedEvent,
-  HuiElementEditor,
-} from "../hui-element-editor";
+import type { ConfigChangedEvent } from "../hui-element-editor";
 import type { GUIModeChangedEvent } from "../types";
+import "./hui-card-element-editor";
+import type { HuiCardElementEditor } from "./hui-card-element-editor";
 import "./hui-card-preview";
 import type { EditCardDialogParams } from "./show-edit-card-dialog";
 
@@ -66,7 +64,8 @@ export class HuiDialogEditCard extends LitElement
 
   @internalProperty() private _guiModeAvailable? = true;
 
-  @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
+  @query("hui-card-element-editor")
+  private _cardEditorEl?: HuiCardElementEditor;
 
   @internalProperty() private _GUImode = true;
 
@@ -184,14 +183,14 @@ export class HuiDialogEditCard extends LitElement
         </div>
         <div class="content">
           <div class="element-editor">
-            <hui-element-editor
+            <hui-card-element-editor
               .hass=${this.hass}
               .lovelace=${this._params.lovelaceConfig}
               .value=${this._cardConfig}
               @config-changed=${this._handleConfigChanged}
               @GUImode-changed=${this._handleGUIModeChanged}
               @editor-save=${this._save}
-            ></hui-element-editor>
+            ></hui-card-element-editor>
           </div>
           <div class="element-preview">
             <hui-card-preview

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

@@ -18,12 +18,11 @@ import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { ConditionalCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
+import "../card-editor/hui-card-element-editor";
+import type { HuiCardElementEditor } from "../card-editor/hui-card-element-editor";
 import "../card-editor/hui-card-picker";
 import "../hui-element-editor";
-import type {
-  ConfigChangedEvent,
-  HuiElementEditor,
-} from "../hui-element-editor";
+import type { ConfigChangedEvent } from "../hui-element-editor";
 import { GUIModeChangedEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -53,7 +52,8 @@ export class HuiConditionalCardEditor extends LitElement
 
   @internalProperty() private _cardTab = false;
 
-  @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
+  @query("hui-card-element-editor")
+  private _cardEditorEl?: HuiCardElementEditor;
 
   public setConfig(config: ConditionalCardConfig): void {
     assert(config, cardConfigStruct);
@@ -108,13 +108,13 @@ export class HuiConditionalCardEditor extends LitElement
                         )}</mwc-button
                       >
                     </div>
-                    <hui-element-editor
+                    <hui-card-element-editor
                       .hass=${this.hass}
                       .value=${this._config.card}
                       .lovelace=${this.lovelace}
                       @config-changed=${this._handleCardChanged}
                       @GUImode-changed=${this._handleGUIModeChanged}
-                    ></hui-element-editor>
+                    ></hui-card-element-editor>
                   `
                 : html`
                     <hui-card-picker