Use dedicated component for sub element using form (#27424)

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

@@ -4,8 +4,8 @@ import { property, query, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { debounce } from "../../../common/util/debounce";
 import { handleStructError } from "../../../common/structs/handle-errors";
+import { debounce } from "../../../common/util/debounce";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-alert";
 import "../../../components/ha-spinner";
@@ -57,8 +57,6 @@ export abstract class HuiElementEditor<
 
   @property({ attribute: false }) public context?: C;
 
-  @property({ attribute: false }) public schema?;
-
   @state() private _config?: T;
 
   @state() private _configElement?: LovelaceGenericElementEditor;
@@ -314,9 +312,6 @@ export abstract class HuiElementEditor<
     if (this._configElement && changedProperties.has("context")) {
       this._configElement.context = this.context;
     }
-    if (this._configElement && changedProperties.has("schema")) {
-      this._configElement.schema = this.schema;
-    }
   }
 
   private _handleUIConfigChanged(ev: UIConfigChangedEvent<T>) {
@@ -404,7 +399,6 @@ export abstract class HuiElementEditor<
         configElement.lovelace = this.lovelace;
       }
       configElement.context = this.context;
-      configElement.schema = this.schema;
       configElement.addEventListener("config-changed", (ev) =>
         this._handleUIConfigChanged(ev as UIConfigChangedEvent<T>)
       );

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

@@ -0,0 +1,19 @@
+import { customElement, property } from "lit/decorators";
+import type { HaFormSchema } from "../../../components/ha-form/types";
+import type { LovelaceConfigForm } from "../types";
+import { HuiElementEditor } from "./hui-element-editor";
+
+@customElement("hui-form-element-editor")
+export class HuiFormElementEditor extends HuiElementEditor {
+  @property({ attribute: false }) public schema!: HaFormSchema[];
+
+  protected async getConfigForm(): Promise<LovelaceConfigForm | undefined> {
+    return { schema: this.schema };
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-form-element-editor": HuiFormElementEditor;
+  }
+}

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

@@ -12,6 +12,7 @@ import "./feature-editor/hui-card-feature-element-editor";
 import "./header-footer-editor/hui-header-footer-element-editor";
 import "./heading-badge-editor/hui-heading-badge-element-editor";
 import type { HuiElementEditor } from "./hui-element-editor";
+import "./hui-form-element-editor";
 import "./picture-element-editor/hui-picture-element-element-editor";
 import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types";
 
@@ -83,6 +84,18 @@ export class HuiSubElementEditor extends LitElement {
   private _renderEditor() {
     const type = this.config.type;
 
+    if (this.schema) {
+      return html`
+        <hui-form-element-editor
+          class="editor"
+          .hass=${this.hass}
+          .value=${this.config.elementConfig}
+          .schema=${this.schema}
+          .context=${this.config.context}
+          @config-changed=${this._handleConfigChanged}
+        ></hui-form-element-editor>
+      `;
+    }
     switch (type) {
       case "row":
         return html`
@@ -91,7 +104,6 @@ export class HuiSubElementEditor extends LitElement {
             .hass=${this.hass}
             .value=${this.config.elementConfig}
             .context=${this.config.context}
-            .schema=${this.schema}
             @config-changed=${this._handleConfigChanged}
             @GUImode-changed=${this._handleGUIModeChanged}
           ></hui-row-element-editor>