diff --git a/src/components/ha-selector/ha-selector-ui-action.ts b/src/components/ha-selector/ha-selector-ui-action.ts new file mode 100644 index 0000000000..b9b983c9c5 --- /dev/null +++ b/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` + + `; + } + + private _valueChanged(ev: CustomEvent) { + fireEvent(this, "value-changed", { value: ev.detail.value }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-selector-ui-action": HaSelectorUiAction; + } +} diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts index d4074c49c4..e77a3e7847 100644 --- a/src/components/ha-selector/ha-selector.ts +++ b/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") diff --git a/src/data/selector.ts b/src/data/selector.ts index d687fad157..393ec28399 100644 --- a/src/data/selector.ts +++ b/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, diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index 86d98726e4..1d3d558c28 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/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; + +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`