Improve card features editor (#22023)

* Move expansion panel outside of feature component

* Cache main form and feature form

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -34,4 +34,21 @@ export const configElementStyle = css`
     margin-top: 8px;
     display: block;
   }
+  ha-expansion-panel {
+    display: block;
+    --expansion-panel-content-padding: 0;
+    border-radius: 6px;
+    --ha-card-border-radius: 6px;
+  }
+  ha-expansion-panel .content {
+    padding: 12px;
+  }
+  ha-expansion-panel > * {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  ha-expansion-panel ha-svg-icon {
+    color: var(--secondary-text-color);
+  }
 `;

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

@@ -1,11 +1,10 @@
-import { mdiDelete, mdiDrag, mdiListBox, mdiPencil, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
-import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
@@ -236,119 +235,108 @@ export class HuiCardFeaturesEditor extends LitElement {
     );
 
     return html`
-      <ha-expansion-panel outlined>
+      ${supportedFeaturesType.length === 0 && this.features.length === 0
-        <h3 slot="header">
+        ? html`
-          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
+            <ha-alert type="info">
-          ${this.hass!.localize("ui.panel.lovelace.editor.features.name")}
+              ${this.hass!.localize(
-        </h3>
+                "ui.panel.lovelace.editor.features.no_compatible_available"
-        <div class="content">
+              )}
-          ${supportedFeaturesType.length === 0 && this.features.length === 0
+            </ha-alert>
-            ? html`
+          `
-                <ha-alert type="info">
+        : nothing}
-                  ${this.hass!.localize(
+      <ha-sortable handle-selector=".handle" @item-moved=${this._featureMoved}>
-                    "ui.panel.lovelace.editor.features.no_compatible_available"
+        <div class="features">
-                  )}
+          ${repeat(
-                </ha-alert>
+            this.features,
-              `
+            (featureConf) => this._getKey(featureConf),
-            : nothing}
+            (featureConf, index) => {
-          <ha-sortable
+              const type = featureConf.type;
-            handle-selector=".handle"
+              const supported = this._supportsFeatureType(type);
-            @item-moved=${this._featureMoved}
+              const editable = this._isFeatureTypeEditable(type);
-          >
+              return html`
-            <div class="features">
+                <div class="feature">
-              ${repeat(
+                  <div class="handle">
-                this.features,
+                    <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
-                (featureConf) => this._getKey(featureConf),
+                  </div>
-                (featureConf, index) => {
+                  <div class="feature-content">
-                  const type = featureConf.type;
+                    <div>
-                  const supported = this._supportsFeatureType(type);
+                      <span> ${this._getFeatureTypeLabel(type)} </span>
-                  const editable = this._isFeatureTypeEditable(type);
+                      ${this.stateObj && !supported
-                  return html`
-                    <div class="feature">
-                      <div class="handle">
-                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
-                      </div>
-                      <div class="feature-content">
-                        <div>
-                          <span> ${this._getFeatureTypeLabel(type)} </span>
-                          ${this.stateObj && !supported
-                            ? html`
-                                <span class="secondary">
-                                  ${this.hass!.localize(
-                                    "ui.panel.lovelace.editor.features.not_compatible"
-                                  )}
-                                </span>
-                              `
-                            : nothing}
-                        </div>
-                      </div>
-                      ${editable
                         ? html`
-                            <ha-icon-button
+                            <span class="secondary">
-                              .label=${this.hass!.localize(
+                              ${this.hass!.localize(
-                                `ui.panel.lovelace.editor.features.edit`
+                                "ui.panel.lovelace.editor.features.not_compatible"
                               )}
-                              .path=${mdiPencil}
+                            </span>
-                              class="edit-icon"
-                              .index=${index}
-                              @click=${this._editFeature}
-                              .disabled=${!supported}
-                            ></ha-icon-button>
                           `
                         : nothing}
-                      <ha-icon-button
-                        .label=${this.hass!.localize(
-                          `ui.panel.lovelace.editor.features.remove`
-                        )}
-                        .path=${mdiDelete}
-                        class="remove-icon"
-                        .index=${index}
-                        @click=${this._removeFeature}
-                      ></ha-icon-button>
                     </div>
-                  `;
+                  </div>
-                }
+                  ${editable
-              )}
+                    ? html`
-            </div>
+                        <ha-icon-button
-          </ha-sortable>
+                          .label=${this.hass!.localize(
-          ${supportedFeaturesType.length > 0
+                            `ui.panel.lovelace.editor.features.edit`
-            ? html`
+                          )}
-                <ha-button-menu
+                          .path=${mdiPencil}
-                  fixed
+                          class="edit-icon"
-                  @action=${this._addFeature}
+                          .index=${index}
-                  @closed=${stopPropagation}
+                          @click=${this._editFeature}
-                >
+                          .disabled=${!supported}
-                  <ha-button
+                        ></ha-icon-button>
-                    slot="trigger"
+                      `
-                    outlined
-                    .label=${this.hass!.localize(
-                      `ui.panel.lovelace.editor.features.add`
-                    )}
-                  >
-                    <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-                  </ha-button>
-                  ${types.map(
-                    (type) => html`
-                      <ha-list-item .value=${type}>
-                        ${this._getFeatureTypeLabel(type)}
-                      </ha-list-item>
-                    `
-                  )}
-                  ${types.length > 0 && customTypes.length > 0
-                    ? html`<li divider role="separator"></li>`
                     : nothing}
-                  ${customTypes.map(
+                  <ha-icon-button
-                    (type) => html`
+                    .label=${this.hass!.localize(
-                      <ha-list-item .value=${type}>
+                      `ui.panel.lovelace.editor.features.remove`
-                        ${this._getFeatureTypeLabel(type)}
+                    )}
-                      </ha-list-item>
+                    .path=${mdiDelete}
-                    `
+                    class="remove-icon"
-                  )}
+                    .index=${index}
-                </ha-button-menu>
+                    @click=${this._removeFeature}
-              `
+                  ></ha-icon-button>
-            : nothing}
+                </div>
+              `;
+            }
+          )}
         </div>
-      </ha-expansion-panel>
+      </ha-sortable>
+      ${supportedFeaturesType.length > 0
+        ? html`
+            <ha-button-menu
+              fixed
+              @action=${this._addFeature}
+              @closed=${stopPropagation}
+            >
+              <ha-button
+                slot="trigger"
+                outlined
+                .label=${this.hass!.localize(
+                  `ui.panel.lovelace.editor.features.add`
+                )}
+              >
+                <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+              </ha-button>
+              ${types.map(
+                (type) => html`
+                  <ha-list-item .value=${type}>
+                    ${this._getFeatureTypeLabel(type)}
+                  </ha-list-item>
+                `
+              )}
+              ${types.length > 0 && customTypes.length > 0
+                ? html`<li divider role="separator"></li>`
+                : nothing}
+              ${customTypes.map(
+                (type) => html`
+                  <ha-list-item .value=${type}>
+                    ${this._getFeatureTypeLabel(type)}
+                  </ha-list-item>
+                `
+              )}
+            </ha-button-menu>
+          `
+        : nothing}
     `;
   }
 
@@ -409,23 +397,6 @@ export class HuiCardFeaturesEditor extends LitElement {
         display: flex !important;
         flex-direction: column;
       }
-      .content {
-        padding: 12px;
-      }
-      ha-expansion-panel {
-        display: block;
-        --expansion-panel-content-padding: 0;
-        border-radius: 6px;
-      }
-      h3 {
-        margin: 0;
-        font-size: inherit;
-        font-weight: inherit;
-      }
-      ha-svg-icon,
-      ha-icon {
-        color: var(--secondary-text-color);
-      }
       ha-button-menu {
         margin-top: 8px;
       }

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

@@ -1,5 +1,7 @@
+import { mdiListBox } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
 import memoizeOne from "memoize-one";
 import {
   any,
@@ -12,11 +14,13 @@ import {
   string,
 } from "superstruct";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
+import "../../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../../types";
 import {
   LovelaceCardFeatureConfig,
@@ -27,6 +31,7 @@ import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
+import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
 import type { FeatureType } from "./hui-card-features-editor";
 
@@ -93,22 +98,30 @@ export class HuiHumidifierCardEditor
       return nothing;
     }
 
-    const stateObj = this._config.entity
+    return cache(
-      ? this.hass.states[this._config.entity]
+      this._subElementEditorConfig
-      : undefined;
+        ? this._renderFeatureForm()
+        : this._renderForm()
+    );
+  }
 
-    if (this._subElementEditorConfig) {
+  private _renderFeatureForm() {
-      return html`
+    const entityId = this._config!.entity;
-        <hui-sub-element-editor
+    return html`
-          .hass=${this.hass}
+      <hui-sub-element-editor
-          .config=${this._subElementEditorConfig}
+        .hass=${this.hass}
-          .context=${this._context(this._config.entity)}
+        .config=${this._subElementEditorConfig}
-          @go-back=${this._goBack}
+        .context=${this._context(entityId)}
-          @config-changed=${this.subElementChanged}
+        @go-back=${this._goBack}
-        >
+        @config-changed=${this.subElementChanged}
-        </hui-sub-element-editor>
+      >
-      `;
+      </hui-sub-element-editor>
-    }
+    `;
+  }
+
+  private _renderForm() {
+    const entityId = this._config!.entity;
+    const stateObj = entityId ? this.hass!.states[entityId] : undefined;
 
     return html`
       <ha-form
@@ -118,14 +131,24 @@ export class HuiHumidifierCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <hui-card-features-editor
+      <ha-expansion-panel outlined>
-        .hass=${this.hass}
+        <h3 slot="header">
-        .stateObj=${stateObj}
+          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
-        .featuresTypes=${COMPATIBLE_FEATURES_TYPES}
+          ${this.hass!.localize(
-        .features=${this._config!.features ?? []}
+            "ui.panel.lovelace.editor.card.generic.features"
-        @features-changed=${this._featuresChanged}
+          )}
-        @edit-detail-element=${this._editDetailElement}
+        </h3>
-      ></hui-card-features-editor>
+        <div class="content">
+          <hui-card-features-editor
+            .hass=${this.hass}
+            .stateObj=${stateObj}
+            .featuresTypes=${COMPATIBLE_FEATURES_TYPES}
+            .features=${this._config!.features ?? []}
+            @features-changed=${this._featuresChanged}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-card-features-editor>
+        </div>
+      </ha-expansion-panel>
     `;
   }
 
@@ -202,12 +225,15 @@ export class HuiHumidifierCardEditor
   };
 
   static get styles() {
-    return css`
+    return [
-      ha-form {
+      configElementStyle,
-        display: block;
+      css`
-        margin-bottom: 24px;
+        ha-form {
-      }
+          display: block;
-    `;
+          margin-bottom: 24px;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -1,5 +1,7 @@
+import { mdiListBox } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
 import memoizeOne from "memoize-one";
 import {
   any,
@@ -12,11 +14,13 @@ import {
   string,
 } from "superstruct";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
+import "../../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../../types";
 import {
   LovelaceCardFeatureConfig,
@@ -27,6 +31,7 @@ import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
+import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
 import type { FeatureType } from "./hui-card-features-editor";
 
@@ -91,22 +96,29 @@ export class HuiThermostatCardEditor
       return nothing;
     }
 
-    const stateObj = this._config.entity
+    return cache(
-      ? this.hass.states[this._config.entity]
+      this._subElementEditorConfig
-      : undefined;
+        ? this._renderFeatureForm()
+        : this._renderForm()
+    );
+  }
 
-    if (this._subElementEditorConfig) {
+  private _renderFeatureForm() {
-      return html`
+    return html`
-        <hui-sub-element-editor
+      <hui-sub-element-editor
-          .hass=${this.hass}
+        .hass=${this.hass}
-          .config=${this._subElementEditorConfig}
+        .config=${this._subElementEditorConfig}
-          .context=${this._context(this._config.entity)}
+        .context=${this._context(this._config!.entity)}
-          @go-back=${this._goBack}
+        @go-back=${this._goBack}
-          @config-changed=${this.subElementChanged}
+        @config-changed=${this.subElementChanged}
-        >
+      >
-        </hui-sub-element-editor>
+      </hui-sub-element-editor>
-      `;
+    `;
-    }
+  }
+
+  private _renderForm() {
+    const entityId = this._config!.entity;
+    const stateObj = entityId ? this.hass!.states[entityId] : undefined;
 
     return html`
       <ha-form
@@ -116,14 +128,24 @@ export class HuiThermostatCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <hui-card-features-editor
+      <ha-expansion-panel outlined>
-        .hass=${this.hass}
+        <h3 slot="header">
-        .stateObj=${stateObj}
+          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
-        .featuresTypes=${COMPATIBLE_FEATURES_TYPES}
+          ${this.hass!.localize(
-        .features=${this._config!.features ?? []}
+            "ui.panel.lovelace.editor.card.generic.features"
-        @features-changed=${this._featuresChanged}
+          )}
-        @edit-detail-element=${this._editDetailElement}
+        </h3>
-      ></hui-card-features-editor>
+        <div class="content">
+          <hui-card-features-editor
+            .hass=${this.hass}
+            .stateObj=${stateObj}
+            .featuresTypes=${COMPATIBLE_FEATURES_TYPES}
+            .features=${this._config!.features ?? []}
+            @features-changed=${this._featuresChanged}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-card-features-editor>
+        </div>
+      </ha-expansion-panel>
     `;
   }
 
@@ -200,12 +222,15 @@ export class HuiThermostatCardEditor
   };
 
   static get styles() {
-    return css`
+    return [
-      ha-form {
+      configElementStyle,
-        display: block;
+      css`
-        margin-bottom: 24px;
+        ha-form {
-      }
+          display: block;
-    `;
+          margin-bottom: 24px;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -1,6 +1,7 @@
-import { mdiGestureTap, mdiPalette } from "@mdi/js";
+import { mdiGestureTap, mdiListBox, mdiPalette } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
 import memoizeOne from "memoize-one";
 import {
   any,
@@ -14,11 +15,13 @@ import {
   union,
 } from "superstruct";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
+import "../../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../../types";
 import {
   LovelaceCardFeatureConfig,
@@ -168,27 +171,31 @@ export class HuiTileCardEditor
       return nothing;
     }
 
-    const stateObj = this._config.entity
+    return cache(
-      ? this.hass.states[this._config.entity]
+      this._subElementEditorConfig
-      : undefined;
+        ? this._renderFeatureForm()
-
+        : this._renderForm()
-    const schema = this._schema(
-      this._config.entity,
-      this._config.hide_state ?? false
     );
+  }
 
-    if (this._subElementEditorConfig) {
+  private _renderFeatureForm() {
-      return html`
+    return html`
-        <hui-sub-element-editor
+      <hui-sub-element-editor
-          .hass=${this.hass}
+        .hass=${this.hass}
-          .config=${this._subElementEditorConfig}
+        .config=${this._subElementEditorConfig}
-          .context=${this._context(this._config.entity)}
+        .context=${this._context(this._config!.entity)}
-          @go-back=${this._goBack}
+        @go-back=${this._goBack}
-          @config-changed=${this.subElementChanged}
+        @config-changed=${this.subElementChanged}
-        >
+      >
-        </hui-sub-element-editor>
+      </hui-sub-element-editor>
-      `;
+    `;
-    }
+  }
+
+  private _renderForm() {
+    const entityId = this._config!.entity;
+    const stateObj = entityId ? this.hass!.states[entityId] : undefined;
+
+    const schema = this._schema(entityId, this._config!.hide_state ?? false);
 
     const data = this._config;
 
@@ -200,13 +207,23 @@ export class HuiTileCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <hui-card-features-editor
+      <ha-expansion-panel outlined>
-        .hass=${this.hass}
+        <h3 slot="header">
-        .stateObj=${stateObj}
+          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
-        .features=${this._config!.features ?? []}
+          ${this.hass!.localize(
-        @features-changed=${this._featuresChanged}
+            "ui.panel.lovelace.editor.card.generic.features"
-        @edit-detail-element=${this._editDetailElement}
+          )}
-      ></hui-card-features-editor>
+        </h3>
+        <div class="content">
+          <hui-card-features-editor
+            .hass=${this.hass}
+            .stateObj=${stateObj}
+            .features=${this._config!.features ?? []}
+            @features-changed=${this._featuresChanged}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-card-features-editor>
+        </div>
+      </ha-expansion-panel>
     `;
   }
 

src/translations/en.json

@@ -5989,7 +5989,8 @@
               "state_color": "Color icons based on state?",
               "suggested_cards": "Suggested cards",
               "other_cards": "Other cards",
-              "custom_cards": "Custom cards"
+              "custom_cards": "Custom cards",
+              "features": "Features"
             },
             "map": {
               "name": "Map",