Ha selector UI action (#14082)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-selector/ha-selector-ui-action.ts

@@ -0,0 +1,43 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { UiActionSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../../panels/lovelace/components/hui-action-editor";
+import { ActionConfig } from "../../data/lovelace";
+
+@customElement("ha-selector-ui-action")
+export class HaSelectorUiAction extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: UiActionSelector;
+
+  @property() public value?: ActionConfig;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  protected render() {
+    return html`
+      <hui-action-editor
+        .label=${this.label}
+        .hass=${this.hass}
+        .config=${this.value}
+        .actions=${this.selector["ui-action"].actions}
+        .tooltipText=${this.helper}
+        @value-changed=${this._valueChanged}
+      ></hui-action-editor>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", { value: ev.detail.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-ui-action": HaSelectorUiAction;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -32,6 +32,7 @@ const LOAD_ELEMENTS = {
   theme: () => import("./ha-selector-theme"),
   location: () => import("./ha-selector-location"),
   "color-temp": () => import("./ha-selector-color-temp"),
+  "ui-action": () => import("./ha-selector-ui-action"),
 };
 
 @customElement("ha-selector")

src/data/selector.ts

@@ -1,5 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { UiAction } from "../panels/lovelace/components/hui-action-editor";
 import type { DeviceRegistryEntry } from "./device_registry";
 import type { EntitySources } from "./entity_sources";
 
@@ -30,7 +31,8 @@ export type Selector =
   | TargetSelector
   | TemplateSelector
   | ThemeSelector
-  | TimeSelector;
+  | TimeSelector
+  | UiActionSelector;
 
 export interface ActionSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
@@ -257,6 +259,12 @@ export interface TimeSelector {
   time: {};
 }
 
+export interface UiActionSelector {
+  "ui-action": {
+    actions?: UiAction[];
+  };
+}
+
 export const filterSelectorDevices = (
   filterDevice: SelectorDevice,
   device: DeviceRegistryEntry,

src/panels/lovelace/components/hui-action-editor.ts

@@ -16,13 +16,24 @@ import { HomeAssistant } from "../../../types";
 import { EditorTarget } from "../editor/types";
 import "../../../components/ha-navigation-picker";
 
+export type UiAction = Exclude<ActionConfig["action"], "fire-dom-event">;
+
+const DEFAULT_ACTIONS: UiAction[] = [
+  "more-info",
+  "toggle",
+  "navigate",
+  "url",
+  "call-service",
+  "none",
+];
+
 @customElement("hui-action-editor")
 export class HuiActionEditor extends LitElement {
   @property() public config?: ActionConfig;
 
   @property() public label?: string;
 
-  @property() public actions?: string[];
+  @property() public actions?: UiAction[];
 
   @property() public tooltipText?: string;
 
@@ -52,10 +63,12 @@ export class HuiActionEditor extends LitElement {
   );
 
   protected render(): TemplateResult {
-    if (!this.hass || !this.actions) {
+    if (!this.hass) {
       return html``;
     }
 
+    const actions = this.actions ?? DEFAULT_ACTIONS;
+
     return html`
       <div class="dropdown">
         <ha-select
@@ -72,7 +85,7 @@ export class HuiActionEditor extends LitElement {
               "ui.panel.lovelace.editor.action-editor.actions.default_action"
             )}
           </mwc-list-item>
-          ${this.actions.map(
+          ${actions.map(
             (action) => html`
               <mwc-list-item .value=${action}>
                 ${this.hass!.localize(
@@ -221,7 +234,13 @@ export class HuiActionEditor extends LitElement {
       ha-textfield {
         width: 100%;
       }
-      ha-textfield {
+      ha-service-control,
+      ha-navigation-picker {
+        display: block;
+      }
+      ha-textfield,
+      ha-service-control,
+      ha-navigation-picker {
         margin-top: 8px;
       }
       ha-service-control {

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

@@ -8,14 +8,11 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
-import { ActionConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import type { ButtonCardConfig } from "../../cards/types";
-import "../../components/hui-action-editor";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import type { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = assign(
@@ -34,15 +31,6 @@ const cardConfigStruct = assign(
   })
 );
 
-const actions = [
-  "more-info",
-  "toggle",
-  "navigate",
-  "url",
-  "call-service",
-  "none",
-];
-
 @customElement("hui-button-card-editor")
 export class HuiButtonCardEditor
   extends LitElement
@@ -101,17 +89,17 @@ export class HuiButtonCardEditor
             { name: "theme", selector: { theme: {} } },
           ],
         },
+        {
+          name: "tap_action",
+          selector: { "ui-action": {} },
+        },
+        {
+          name: "hold_action",
+          selector: { "ui-action": {} },
+        },
       ] as const
   );
 
-  get _tap_action(): ActionConfig | undefined {
-    return this._config!.tap_action;
-  }
-
-  get _hold_action(): ActionConfig {
-    return this._config!.hold_action || { action: "more-info" };
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -143,40 +131,9 @@ export class HuiButtonCardEditor
         .data=${data}
         .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
+        .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <div class="card-config">
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.tap_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._tap_action}
-          .actions=${actions}
-          .configValue=${"tap_action"}
-          .tooltipText=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.button.default_action_help"
-          )}
-          @value-changed=${this._actionChanged}
-        ></hui-action-editor>
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.hold_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._hold_action}
-          .actions=${actions}
-          .configValue=${"hold_action"}
-          .tooltipText=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.button.default_action_help"
-          )}
-          @value-changed=${this._actionChanged}
-        ></hui-action-editor>
-      </div>
     `;
   }
 
@@ -190,56 +147,40 @@ export class HuiButtonCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
+  private _computeHelperCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
+    switch (schema.name) {
+      case "tap_action":
+      case "hold_action":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.button.default_action_help"
+        );
+      default:
+        return undefined;
+    }
+  };
+
   private _computeLabelCallback = (
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) => {
-    if (schema.name === "entity") {
+    switch (schema.name) {
-      return `${this.hass!.localize(
+      case "theme":
-        "ui.panel.lovelace.editor.card.generic.entity"
+      case "tap_action":
-      )}`;
+      case "hold_action":
+        return `${this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        )} (${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.config.optional"
+        )})`;
+      default:
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
     }
-
-    if (schema.name === "theme") {
-      return `${this.hass!.localize(
-        "ui.panel.lovelace.editor.card.generic.theme"
-      )} (${this.hass!.localize(
-        "ui.panel.lovelace.editor.card.config.optional"
-      )})`;
-    }
-
-    return this.hass!.localize(
-      `ui.panel.lovelace.editor.card.generic.${schema.name}`
-    );
   };
 
-  private _actionChanged(ev: CustomEvent): void {
+  static styles: CSSResultGroup = configElementStyle;
-    if (!this._config || !this.hass) {
-      return;
-    }
-    const target = ev.target! as EditorTarget;
-    const value = ev.detail.value;
-
-    if (this[`_${target.configValue}`] === value) {
-      return;
-    }
-    let newConfig;
-    if (target.configValue) {
-      if (value !== false && !value) {
-        newConfig = { ...this._config };
-        delete newConfig[target.configValue!];
-      } else {
-        newConfig = {
-          ...this._config,
-          [target.configValue!]: value,
-        };
-      }
-    }
-    fireEvent(this, "config-changed", { config: newConfig });
-  }
-
-  static get styles(): CSSResultGroup {
-    return configElementStyle;
-  }
 }
 
 declare global {

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

@@ -1,21 +1,19 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string, assign } from "superstruct";
 import type { HassEntity } from "home-assistant-js-websocket";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import type { ActionConfig } from "../../../../data/lovelace";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { domainIcon } from "../../../../common/entity/domain_icon";
+import "../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { LightCardConfig } from "../../cards/types";
-import "../../components/hui-action-editor";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
-import type { EditorTarget } from "../types";
-import { configElementStyle } from "./config-elements-style";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import { domainIcon } from "../../../../common/entity/domain_icon";
+import { configElementStyle } from "./config-elements-style";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import type { SchemaUnion } from "../../../../components/ha-form/types";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -71,31 +69,22 @@ export class HuiLightCardEditor
           ],
         },
         { name: "theme", selector: { theme: {} } },
+        {
+          name: "hold_action",
+          selector: { "ui-action": {} },
+        },
+        {
+          name: "double_tap_action",
+          selector: { "ui-action": {} },
+        },
       ] as const
   );
 
-  get _hold_action(): ActionConfig {
-    return this._config!.hold_action || { action: "more-info" };
-  }
-
-  get _double_tap_action(): ActionConfig | undefined {
-    return this._config!.double_tap_action;
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const actions = [
-      "more-info",
-      "toggle",
-      "navigate",
-      "url",
-      "call-service",
-      "none",
-    ];
-
     const entityState = this.hass.states[this._config.entity];
     const schema = this._schema(
       this._config.entity,
@@ -111,60 +100,9 @@ export class HuiLightCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <div class="card-config">
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.hold_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._hold_action}
-          .actions=${actions}
-          .configValue=${"hold_action"}
-          @value-changed=${this._actionChanged}
-        ></hui-action-editor>
-
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.double_tap_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._double_tap_action}
-          .actions=${actions}
-          .configValue=${"double_tap_action"}
-          @value-changed=${this._actionChanged}
-        ></hui-action-editor>
-      </div>
     `;
   }
 
-  private _actionChanged(ev: CustomEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-    const target = ev.target! as EditorTarget;
-    const value = ev.detail.value;
-
-    if (this[`_${target.configValue}`] === value) {
-      return;
-    }
-    if (target.configValue) {
-      if (value !== false && !value) {
-        this._config = { ...this._config };
-        delete this._config[target.configValue!];
-      } else {
-        this._config = {
-          ...this._config,
-          [target.configValue!]: value,
-        };
-      }
-    }
-    fireEvent(this, "config-changed", { config: this._config });
-  }
-
   private _valueChanged(ev: CustomEvent): void {
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
@@ -172,36 +110,23 @@ export class HuiLightCardEditor
   private _computeLabelCallback = (
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) => {
-    if (schema.name === "entity") {
+    switch (schema.name) {
-      return this.hass!.localize(
+      case "theme":
-        "ui.panel.lovelace.editor.card.generic.entity"
+      case "hold_action":
-      );
+      case "double_tap_action":
+        return `${this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        )} (${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.config.optional"
+        )})`;
+      default:
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
     }
-
-    if (schema.name === "theme") {
-      return `${this.hass!.localize(
-        "ui.panel.lovelace.editor.card.generic.theme"
-      )} (${this.hass!.localize(
-        "ui.panel.lovelace.editor.card.config.optional"
-      )})`;
-    }
-
-    return this.hass!.localize(
-      `ui.panel.lovelace.editor.card.generic.${schema.name}`
-    );
   };
 
-  static styles: CSSResultGroup = [
+  static styles: CSSResultGroup = configElementStyle;
-    configElementStyle,
-    css`
-      ha-form,
-      hui-action-editor {
-        display: block;
-        margin-bottom: 24px;
-        overflow: auto;
-      }
-    `,
-  ];
 }
 
 declare global {

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

@@ -3,15 +3,13 @@ import { customElement, property, state } from "lit/decorators";
 import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
-import type { ActionConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import type { PictureEntityCardConfig } from "../../cards/types";
-import "../../components/hui-action-editor";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import type { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import "../../../../components/ha-form/ha-form";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -61,6 +59,14 @@ const SCHEMA = [
     ],
   },
   { name: "theme", selector: { theme: {} } },
+  {
+    name: "tap_action",
+    selector: { "ui-action": {} },
+  },
+  {
+    name: "hold_action",
+    selector: { "ui-action": {} },
+  },
 ] as const;
 
 @customElement("hui-picture-entity-card-editor")
@@ -77,21 +83,11 @@ export class HuiPictureEntityCardEditor
     this._config = config;
   }
 
-  get _tap_action(): ActionConfig {
-    return this._config!.tap_action || { action: "more-info" };
-  }
-
-  get _hold_action(): ActionConfig | undefined {
-    return this._config!.hold_action;
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
-
     const data = {
       show_state: true,
       show_name: true,
@@ -107,31 +103,6 @@ export class HuiPictureEntityCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <div class="card-config">
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.tap_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._tap_action}
-          .actions=${actions}
-          .configValue=${"tap_action"}
-          @value-changed=${this._changed}
-        ></hui-action-editor>
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.hold_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._hold_action}
-          .actions=${actions}
-          .configValue=${"hold_action"}
-          @value-changed=${this._changed}
-        ></hui-action-editor>
       </div>
     `;
   }
@@ -140,34 +111,13 @@ export class HuiPictureEntityCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _changed(ev: CustomEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-    const target = ev.target! as EditorTarget;
-    const value = ev.detail.value;
-
-    if (this[`_${target.configValue}`] === value) {
-      return;
-    }
-
-    if (value !== false && !value) {
-      this._config = { ...this._config };
-      delete this._config[target.configValue!];
-    } else {
-      this._config = {
-        ...this._config,
-        [target.configValue!]: value,
-      };
-    }
-    fireEvent(this, "config-changed", { config: this._config });
-  }
-
   private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     switch (schema.name) {
       case "theme":
+      case "tap_action":
+      case "hold_action":
         return `${this.hass!.localize(
-          "ui.panel.lovelace.editor.card.generic.theme"
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
         )} (${this.hass!.localize(
           "ui.panel.lovelace.editor.card.config.optional"
         )})`;

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

@@ -7,7 +7,6 @@ import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { ActionConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import type { PictureGlanceCardConfig } from "../../cards/types";
-import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import type { EntityConfig } from "../../entity-rows/types";
 import type { LovelaceCardEditor } from "../../types";
@@ -15,7 +14,6 @@ import { processEditorEntities } from "../process-editor-entities";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { entitiesConfigStruct } from "../structs/entities-struct";
-import type { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = assign(
@@ -34,8 +32,6 @@ const cardConfigStruct = assign(
   })
 );
 
-const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
-
 const SCHEMA = [
   { name: "title", selector: { text: {} } },
   { name: "image", selector: { text: {} } },
@@ -53,6 +49,14 @@ const SCHEMA = [
   },
   { name: "entity", selector: { entity: {} } },
   { name: "theme", selector: { theme: {} } },
+  {
+    name: "tap_action",
+    selector: { "ui-action": {} },
+  },
+  {
+    name: "hold_action",
+    selector: { "ui-action": {} },
+  },
 ] as const;
 
 @customElement("hui-picture-glance-card-editor")
@@ -96,26 +100,6 @@ export class HuiPictureGlanceCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <div class="card-config">
-        <hui-action-editor
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.tap_action"
-          )}
-          .hass=${this.hass}
-          .config=${this._tap_action}
-          .actions=${actions}
-          .configValue=${"tap_action"}
-          @value-changed=${this._valueChanged}
-        ></hui-action-editor>
-        <hui-action-editor
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.hold_action"
-          )}
-          .hass=${this.hass}
-          .config=${this._hold_action}
-          .actions=${actions}
-          .configValue=${"hold_action"}
-          @value-changed=${this._valueChanged}
-        ></hui-action-editor>
         <hui-entity-editor
           .hass=${this.hass}
           .entities=${this._configEntities}
@@ -133,27 +117,10 @@ export class HuiPictureGlanceCardEditor
     if (!this._config || !this.hass) {
       return;
     }
-    const target = ev.target! as EditorTarget;
-    const value = ev.detail.value;
-
     if (ev.detail && ev.detail.entities) {
       this._config = { ...this._config, entities: ev.detail.entities };
 
       this._configEntities = processEditorEntities(this._config.entities);
-    } else if (target.configValue) {
-      if (this[`_${target.configValue}`] === value) {
-        return;
-      }
-
-      if (value !== false && !value) {
-        this._config = { ...this._config };
-        delete this._config[target.configValue!];
-      } else {
-        this._config = {
-          ...this._config,
-          [target.configValue!]: value,
-        };
-      }
     }
     fireEvent(this, "config-changed", { config: this._config });
   }
@@ -161,8 +128,10 @@ export class HuiPictureGlanceCardEditor
   private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     switch (schema.name) {
       case "theme":
+      case "tap_action":
+      case "hold_action":
         return `${this.hass!.localize(
-          "ui.panel.lovelace.editor.card.generic.theme"
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
         )} (${this.hass!.localize(
           "ui.panel.lovelace.editor.card.config.optional"
         )})`;