`
+ : html`${!this.hideFilterMenu
+ ? html`
+
+ ${this.narrow
+ ? html`
+
+ `
+ : ""}
+
+ `
+ : ""}
+ ${this.narrow
+ ? html`
+
`;
@@ -374,6 +385,16 @@ export class HaTabsSubpageDataTable extends LitElement {
.filter-menu {
position: relative;
}
+ .center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ box-sizing: border-box;
+ height: 100%;
+ width: 100%;
+ padding: 16px;
+ }
`;
}
}
diff --git a/src/panels/calendar/dialog-calendar-event-detail.ts b/src/panels/calendar/dialog-calendar-event-detail.ts
index 6172e79b4ca8..ee091eac1652 100644
--- a/src/panels/calendar/dialog-calendar-event-detail.ts
+++ b/src/panels/calendar/dialog-calendar-event-detail.ts
@@ -1,8 +1,8 @@
import "@material/mwc-button";
-import { mdiCalendarClock, mdiClose } from "@mdi/js";
+import { mdiCalendarClock } from "@mdi/js";
import { toDate } from "date-fns-tz";
import { addDays, isSameDay } from "date-fns/esm";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { property, state } from "lit/decorators";
import { formatDate } from "../../common/datetime/format_date";
import { formatDateTime } from "../../common/datetime/format_date_time";
@@ -11,6 +11,7 @@ import { fireEvent } from "../../common/dom/fire_event";
import { isDate } from "../../common/string/is_date";
import "../../components/entity/state-info";
import "../../components/ha-date-input";
+import { createCloseHeading } from "../../components/ha-dialog";
import "../../components/ha-time-input";
import {
CalendarEventMutableParams,
@@ -65,15 +66,7 @@ class DialogCalendarEventDetail extends LitElement {
@closed=${this.closeDialog}
scrimClickAction
escapeKeyAction
- .heading=${html`
-
-
- `}
+ .heading=${createCloseHeading(this.hass, this._data!.summary)}
>
${this._error
diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts
index 2cd0bb0f5d36..e5925b1243e2 100644
--- a/src/panels/calendar/dialog-calendar-event-editor.ts
+++ b/src/panels/calendar/dialog-calendar-event-editor.ts
@@ -1,5 +1,4 @@
import "@material/mwc-button";
-import { mdiClose } from "@mdi/js";
import { formatInTimeZone, toDate } from "date-fns-tz";
import {
addDays,
@@ -9,7 +8,7 @@ import {
startOfHour,
} from "date-fns/esm";
import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
@@ -18,23 +17,24 @@ import { supportsFeature } from "../../common/entity/supports-feature";
import { isDate } from "../../common/string/is_date";
import "../../components/entity/ha-entity-picker";
import "../../components/ha-date-input";
+import { createCloseHeading } from "../../components/ha-dialog";
import "../../components/ha-textarea";
import "../../components/ha-time-input";
import {
CalendarEntityFeature,
CalendarEventMutableParams,
+ RecurrenceRange,
createCalendarEvent,
deleteCalendarEvent,
- RecurrenceRange,
updateCalendarEvent,
} from "../../data/calendar";
+import { TimeZone } from "../../data/translation";
import { haStyleDialog } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import "../lovelace/components/hui-generic-entity-row";
import "./ha-recurrence-rule-editor";
import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
import { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor";
-import { TimeZone } from "../../data/translation";
const CALENDAR_DOMAINS = ["calendar"];
@@ -142,19 +142,12 @@ class DialogCalendarEventEditor extends LitElement {
@closed=${this.closeDialog}
scrimClickAction
escapeKeyAction
- .heading=${html`
-
-
- `}
+ .heading=${createCloseHeading(
+ this.hass,
+ this.hass.localize(
+ `ui.components.calendar.event.${isCreate ? "add" : "edit"}`
+ )
+ )}
>
${this._error
@@ -584,9 +577,11 @@ class DialogCalendarEventEditor extends LitElement {
return [
haStyleDialog,
css`
- ha-dialog {
- --mdc-dialog-min-width: min(600px, 95vw);
- --mdc-dialog-max-width: min(600px, 95vw);
+ @media all and (min-width: 450px and min-height: 500px) {
+ ha-dialog {
+ --mdc-dialog-min-width: min(600px, 95vw);
+ --mdc-dialog-max-width: min(600px, 95vw);
+ }
}
state-info {
line-height: 40px;
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index 2c114cd946a3..0e58c0e8b2b5 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -29,6 +29,8 @@ import { classMap } from "lit/directives/class-map";
import { storage } from "../../../../common/decorators/storage";
import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { domainIconWithoutDefault } from "../../../../common/entity/domain_icon";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
import { handleStructError } from "../../../../common/structs/handle-errors";
import "../../../../components/ha-alert";
@@ -37,7 +39,7 @@ import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
-import { ACTION_TYPES, YAML_ONLY_ACTION_TYPES } from "../../../../data/action";
+import { ACTION_ICONS, YAML_ONLY_ACTION_TYPES } from "../../../../data/action";
import { AutomationClipboard } from "../../../../data/automation";
import { validateConfig } from "../../../../data/config";
import { fullEntitiesContext } from "../../../../data/context";
@@ -82,9 +84,9 @@ export const getType = (action: Action | undefined) => {
if (["and", "or", "not"].some((key) => key in action)) {
return "condition" as const;
}
- return Object.keys(ACTION_TYPES).find(
+ return Object.keys(ACTION_ICONS).find(
(option) => option in action
- ) as keyof typeof ACTION_TYPES;
+ ) as keyof typeof ACTION_ICONS;
};
export interface ActionElement extends LitElement {
@@ -190,7 +192,13 @@ export default class HaAutomationActionRow extends LitElement {
${capitalizeFirstLetter(
describeAction(this.hass, this._entityReg, this.action)
diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
index 5c85b509c137..ce312a7bd399 100644
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -1,57 +1,26 @@
import "@material/mwc-button";
-import type { ActionDetail } from "@material/mwc-list";
-import {
- mdiArrowDown,
- mdiArrowUp,
- mdiContentPaste,
- mdiDrag,
- mdiPlus,
-} from "@mdi/js";
+import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple";
-import {
- CSSResultGroup,
- LitElement,
- PropertyValues,
- css,
- html,
- nothing,
-} from "lit";
+import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit";
import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
import type { SortableEvent } from "sortablejs";
import { storage } from "../../../../common/decorators/storage";
import { fireEvent } from "../../../../common/dom/fire_event";
-import { stringCompare } from "../../../../common/string/compare";
-import { LocalizeFunc } from "../../../../common/translations/localize";
import "../../../../components/ha-button";
-import "../../../../components/ha-button-menu";
-import type { HaSelect } from "../../../../components/ha-select";
import "../../../../components/ha-svg-icon";
-import { ACTION_TYPES } from "../../../../data/action";
-import { AutomationClipboard } from "../../../../data/automation";
+import { getService, isService } from "../../../../data/action";
+import type { AutomationClipboard } from "../../../../data/automation";
import { Action } from "../../../../data/script";
import { sortableStyles } from "../../../../resources/ha-sortable-style";
import type { SortableInstance } from "../../../../resources/sortable";
-import { Entries, HomeAssistant } from "../../../../types";
+import { HomeAssistant } from "../../../../types";
+import {
+ PASTE_VALUE,
+ showAddAutomationElementDialog,
+} from "../show-add-automation-element-dialog";
import type HaAutomationActionRow from "./ha-automation-action-row";
import { getType } from "./ha-automation-action-row";
-import "./types/ha-automation-action-activate_scene";
-import "./types/ha-automation-action-choose";
-import "./types/ha-automation-action-condition";
-import "./types/ha-automation-action-delay";
-import "./types/ha-automation-action-device_id";
-import "./types/ha-automation-action-event";
-import "./types/ha-automation-action-if";
-import "./types/ha-automation-action-parallel";
-import "./types/ha-automation-action-play_media";
-import "./types/ha-automation-action-repeat";
-import "./types/ha-automation-action-service";
-import "./types/ha-automation-action-stop";
-import "./types/ha-automation-action-wait_for_trigger";
-import "./types/ha-automation-action-wait_template";
-
-const PASTE_VALUE = "__paste__";
@customElement("ha-automation-action")
export default class HaAutomationAction extends LitElement {
@@ -150,42 +119,27 @@ export default class HaAutomationAction extends LitElement {
`
)}
-
+
- ${this._clipboard?.action
- ? html`
- ${this.hass.localize(
- "ui.panel.config.automation.editor.actions.paste"
- )}
- (${this.hass.localize(
- `ui.panel.config.automation.editor.actions.type.${
- getType(this._clipboard.action) || "unknown"
- }.label`
- )})
- `
- : nothing}
- ${this._processedTypes(this.hass.localize).map(
- ([opt, label, icon]) => html`
-
- ${label}
- `
- )}
-
+
+
+
+
`;
}
@@ -213,6 +167,44 @@ export default class HaAutomationAction extends LitElement {
}
}
+ private _addActionDialog() {
+ showAddAutomationElementDialog(this, {
+ type: "action",
+ add: this._addAction,
+ clipboardItem: getType(this._clipboard?.action),
+ });
+ }
+
+ private _addActionBuildingBlockDialog() {
+ showAddAutomationElementDialog(this, {
+ type: "action",
+ add: this._addAction,
+ clipboardItem: getType(this._clipboard?.action),
+ group: "building_blocks",
+ });
+ }
+
+ private _addAction = (action: string) => {
+ let actions: Action[];
+ if (action === PASTE_VALUE) {
+ actions = this.actions.concat(deepClone(this._clipboard!.action));
+ } else if (isService(action)) {
+ actions = this.actions.concat({
+ service: getService(action),
+ metadata: {},
+ });
+ } else {
+ const elClass = customElements.get(
+ `ha-automation-action-${action}`
+ ) as CustomElementConstructor & { defaultConfig: Action };
+ actions = this.actions.concat(
+ elClass ? { ...elClass.defaultConfig } : { [action]: {} }
+ );
+ }
+ this._focusLastActionOnChange = true;
+ fireEvent(this, "value-changed", { value: actions });
+ };
+
private async _enterReOrderMode(ev: CustomEvent) {
if (this.nested) return;
ev.stopPropagation();
@@ -258,25 +250,6 @@ export default class HaAutomationAction extends LitElement {
return this._actionKeys.get(action)!;
}
- private _addAction(ev: CustomEvent) {
- const action = (ev.currentTarget as HaSelect).items[ev.detail.index].value;
-
- let actions: Action[];
- if (action === PASTE_VALUE) {
- actions = this.actions.concat(deepClone(this._clipboard!.action));
- } else {
- const elClass = customElements.get(
- `ha-automation-action-${action}`
- ) as CustomElementConstructor & { defaultConfig: Action };
-
- actions = this.actions.concat(
- elClass ? { ...elClass.defaultConfig } : { [action]: {} }
- );
- }
- this._focusLastActionOnChange = true;
- fireEvent(this, "value-changed", { value: actions });
- }
-
private _moveUp(ev) {
const index = (ev.target as any).index;
const newIndex = index - 1;
@@ -328,22 +301,6 @@ export default class HaAutomationAction extends LitElement {
});
}
- private _processedTypes = memoizeOne(
- (localize: LocalizeFunc): [string, string, string][] =>
- (Object.entries(ACTION_TYPES) as Entries)
- .map(
- ([action, icon]) =>
- [
- action,
- localize(
- `ui.panel.config.automation.editor.actions.type.${action}.label`
- ),
- icon,
- ] as [string, string, string]
- )
- .sort((a, b) => stringCompare(a[1], b[1], this.hass.locale.language))
- );
-
static get styles(): CSSResultGroup {
return [
sortableStyles,
@@ -363,13 +320,19 @@ export default class HaAutomationAction extends LitElement {
overflow: hidden;
}
.handle {
- cursor: move;
+ cursor: move; /* fallback if grab cursor is unsupported */
+ cursor: grab;
padding: 12px;
}
.handle ha-svg-icon {
pointer-events: none;
height: 24px;
}
+ .buttons {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
`,
];
}
diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
index 9051fbb75cd0..5c0ee0763790 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@@ -543,7 +543,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
padding: 0 16px 16px 16px;
}
.handle {
- cursor: move;
+ cursor: move; /* fallback if grab cursor is unsupported */
+ cursor: grab;
padding: 12px;
}
.handle ha-svg-icon {
diff --git a/src/panels/config/automation/action/types/ha-automation-action-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts
index c72da97aac7e..d62176812d8b 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts
@@ -7,7 +7,7 @@ import type { LocalizeFunc } from "../../../../../common/translations/localize";
import "../../../../../components/ha-select";
import type { HaSelect } from "../../../../../components/ha-select";
import type { Condition } from "../../../../../data/automation";
-import { CONDITION_TYPES } from "../../../../../data/condition";
+import { CONDITION_ICONS } from "../../../../../data/condition";
import { Entries, HomeAssistant } from "../../../../../types";
import "../../condition/ha-automation-condition-editor";
import type { ActionElement } from "../ha-automation-action-row";
@@ -55,7 +55,7 @@ export class HaConditionAction extends LitElement implements ActionElement {
private _processedTypes = memoizeOne(
(localize: LocalizeFunc): [string, string, string][] =>
- (Object.entries(CONDITION_TYPES) as Entries)
+ (Object.entries(CONDITION_ICONS) as Entries)
.map(
([condition, icon]) =>
[
diff --git a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
index 890133d25019..7a1ad36e8156 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
@@ -9,6 +9,7 @@ import type { HomeAssistant } from "../../../../../types";
import "../ha-automation-action";
import type { ActionElement } from "../ha-automation-action-row";
+import { isTemplate } from "../../../../../common/string/has-template";
import type { LocalizeFunc } from "../../../../../common/translations/localize";
import "../../../../../components/ha-form/ha-form";
import type { SchemaUnion } from "../../../../../components/ha-form/types";
@@ -32,7 +33,12 @@ export class HaRepeatAction extends LitElement implements ActionElement {
}
private _schema = memoizeOne(
- (localize: LocalizeFunc, type: string, reOrderMode: boolean) =>
+ (
+ localize: LocalizeFunc,
+ type: string,
+ reOrderMode: boolean,
+ template: boolean
+ ) =>
[
{
name: "type",
@@ -53,7 +59,9 @@ export class HaRepeatAction extends LitElement implements ActionElement {
{
name: "count",
required: true,
- selector: { number: { mode: "box", min: 1 } },
+ selector: template
+ ? ({ template: {} } as const)
+ : ({ number: { mode: "box", min: 1 } } as const),
},
] as const)
: []),
@@ -89,10 +97,13 @@ export class HaRepeatAction extends LitElement implements ActionElement {
const schema = this._schema(
this.hass.localize,
type ?? "count",
- this.reOrderMode
+ this.reOrderMode,
+ "count" in action && typeof action.count === "string"
+ ? isTemplate(action.count)
+ : false
);
const data = { ...action, type };
- return html` ;
+
+ @query("ha-dialog") private _dialog?: HaDialog;
+
+ private _fullScreen = false;
+
+ @state() private _width?: number;
+
+ @state() private _height?: number;
+
+ public showDialog(params): void {
+ this._params = params;
+ this._group = params.group;
+ if (this._params?.type === "action") {
+ this.hass.loadBackendTranslation("services");
+ this._fetchManifests();
+ this._calculateUsedDomains();
+ }
+ this._fullScreen = matchMedia(
+ "all and (max-width: 450px), all and (max-height: 500px)"
+ ).matches;
+ }
+
+ public closeDialog(): void {
+ if (this._params) {
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
+ }
+ this._height = undefined;
+ this._width = undefined;
+ this._params = undefined;
+ this._group = undefined;
+ this._prev = undefined;
+ this._filter = "";
+ this._manifests = undefined;
+ this._domains = undefined;
+ }
+
+ private _getGroups = (
+ type: AddAutomationElementDialogParams["type"],
+ group: string | undefined
+ ): AutomationElementGroup =>
+ group
+ ? isService(group)
+ ? {}
+ : TYPES[type].groups[group].members!
+ : TYPES[type].groups;
+
+ private _convertToItem = (
+ key: string,
+ options,
+ type: AddAutomationElementDialogParams["type"],
+ localize: LocalizeFunc
+ ): ListItem => ({
+ group: Boolean(options.members),
+ key,
+ name: localize(
+ // @ts-ignore
+ `ui.panel.config.automation.editor.${type}s.${
+ options.members ? "groups" : "type"
+ }.${key}.label`
+ ),
+ description: localize(
+ // @ts-ignore
+ `ui.panel.config.automation.editor.${type}s.${
+ options.members ? "groups" : "type"
+ }.${key}.description${options.members ? "" : ".picker"}`
+ ),
+ icon: options.icon || TYPES[type].icons[key],
+ });
+
+ private _getFilteredItems = memoizeOne(
+ (
+ type: AddAutomationElementDialogParams["type"],
+ group: string | undefined,
+ filter: string,
+ localize: LocalizeFunc,
+ services: HomeAssistant["services"],
+ manifests?: DomainManifestLookup
+ ): ListItem[] => {
+ const groups = this._getGroups(type, group);
+
+ const flattenGroups = (grp: AutomationElementGroup) =>
+ Object.entries(grp).map(([key, options]) =>
+ options.members
+ ? flattenGroups(options.members)
+ : this._convertToItem(key, options, type, localize)
+ );
+
+ const items = flattenGroups(groups).flat();
+
+ if (type === "action") {
+ items.push(...this._services(localize, services, manifests, group));
+ }
+
+ const options: IFuseOptions = {
+ keys: ["key", "name", "description"],
+ isCaseSensitive: false,
+ minMatchCharLength: Math.min(filter.length, 2),
+ threshold: 0.2,
+ };
+ const fuse = new Fuse(items, options);
+ return fuse.search(filter).map((result) => result.item);
+ }
+ );
+
+ private _getGroupItems = memoizeOne(
+ (
+ type: AddAutomationElementDialogParams["type"],
+ group: string | undefined,
+ domains: Set | undefined,
+ localize: LocalizeFunc,
+ services: HomeAssistant["services"],
+ manifests?: DomainManifestLookup
+ ): ListItem[] => {
+ if (type === "action" && isService(group)) {
+ let result = this._services(localize, services, manifests, group);
+ if (group === `${SERVICE_PREFIX}media_player`) {
+ result = [
+ this._convertToItem("play_media", {}, type, localize),
+ ...result,
+ ];
+ }
+ return result;
+ }
+
+ const groups = this._getGroups(type, group);
+
+ const result = Object.entries(groups).map(([key, options]) =>
+ this._convertToItem(key, options, type, localize)
+ );
+
+ if (type === "action") {
+ if (!this._group) {
+ result.unshift(
+ ...this._serviceGroups(
+ localize,
+ services,
+ manifests,
+ domains,
+ undefined
+ )
+ );
+ } else if (this._group === "helpers") {
+ result.unshift(
+ ...this._serviceGroups(
+ localize,
+ services,
+ manifests,
+ domains,
+ "helper"
+ )
+ );
+ } else if (this._group === "other") {
+ result.unshift(
+ ...this._serviceGroups(
+ localize,
+ services,
+ manifests,
+ domains,
+ "other"
+ )
+ );
+ }
+ }
+
+ return result.sort((a, b) => {
+ if (a.group && b.group) {
+ return 0;
+ }
+ if (a.group && !b.group) {
+ return 1;
+ }
+ if (!a.group && b.group) {
+ return -1;
+ }
+ return stringCompare(a.name, b.name, this.hass.locale.language);
+ });
+ }
+ );
+
+ private _serviceGroups = (
+ localize: LocalizeFunc,
+ services: HomeAssistant["services"],
+ manifests: DomainManifestLookup | undefined,
+ domains: Set | undefined,
+ type: "helper" | "other" | undefined
+ ): ListItem[] => {
+ if (!services || !manifests) {
+ return [];
+ }
+ const result: ListItem[] = [];
+ Object.keys(services).forEach((domain) => {
+ const manifest = manifests[domain];
+ const domainUsed = !domains ? true : domains.has(domain);
+ if (
+ (type === undefined &&
+ (ENTITY_DOMAINS_MAIN.has(domain) ||
+ (manifest?.integration_type === "entity" &&
+ domainUsed &&
+ !ENTITY_DOMAINS_OTHER.has(domain)))) ||
+ (type === "helper" && manifest?.integration_type === "helper") ||
+ (type === "other" &&
+ !ENTITY_DOMAINS_MAIN.has(domain) &&
+ (ENTITY_DOMAINS_OTHER.has(domain) ||
+ (!domainUsed && manifest?.integration_type === "entity") ||
+ !["helper", "entity"].includes(manifest?.integration_type || "")))
+ ) {
+ const icon = domainIconWithoutDefault(domain);
+ result.push({
+ group: true,
+ icon,
+ image: !icon
+ ? brandsUrl({
+ domain,
+ type: "icon",
+ darkOptimized: this.hass.themes?.darkMode,
+ })
+ : undefined,
+ key: `${SERVICE_PREFIX}${domain}`,
+ name: domainToName(localize, domain, manifest),
+ description: "",
+ });
+ }
+ });
+ return result.sort((a, b) =>
+ stringCompare(a.name, b.name, this.hass.locale.language)
+ );
+ };
+
+ private _services = memoizeOne(
+ (
+ localize: LocalizeFunc,
+ services: HomeAssistant["services"],
+ manifests: DomainManifestLookup | undefined,
+ group?: string
+ ): ListItem[] => {
+ if (!services) {
+ return [];
+ }
+ const result: ListItem[] = [];
+
+ let domain: string | undefined;
+
+ if (isService(group)) {
+ domain = getService(group!);
+ }
+
+ const addDomain = (dmn: string) => {
+ const services_keys = Object.keys(services[dmn]);
+
+ for (const service of services_keys) {
+ const icon = domainIconWithoutDefault(dmn);
+ result.push({
+ group: false,
+ icon,
+ image: !icon
+ ? brandsUrl({
+ domain: dmn,
+ type: "icon",
+ darkOptimized: this.hass.themes?.darkMode,
+ })
+ : undefined,
+ key: `${SERVICE_PREFIX}${dmn}.${service}`,
+ name: `${domain ? "" : `${domainToName(localize, dmn)}: `}${
+ this.hass.localize(`component.${dmn}.services.${service}.name`) ||
+ services[dmn][service]?.name ||
+ service
+ }`,
+ description:
+ this.hass.localize(
+ `component.${domain}.services.${service}.description`
+ ) || services[dmn][service]?.description,
+ });
+ }
+ };
+
+ if (domain) {
+ addDomain(domain);
+ return result.sort((a, b) =>
+ stringCompare(a.name, b.name, this.hass.locale.language)
+ );
+ }
+
+ if (group && !["helpers", "other"].includes(group)) {
+ return [];
+ }
+
+ Object.keys(services)
+ .sort()
+ .forEach((dmn) => {
+ const manifest = manifests?.[dmn];
+ if (group === "helpers" && manifest?.integration_type !== "helper") {
+ return;
+ }
+ if (
+ group === "other" &&
+ (ENTITY_DOMAINS_OTHER.has(dmn) ||
+ ["helper", "entity"].includes(manifest?.integration_type || ""))
+ ) {
+ return;
+ }
+ addDomain(dmn);
+ });
+
+ return result;
+ }
+ );
+
+ private async _fetchManifests() {
+ const manifests = {};
+ const fetched = await fetchIntegrationManifests(this.hass);
+ for (const manifest of fetched) {
+ manifests[manifest.domain] = manifest;
+ }
+ this._manifests = manifests;
+ }
+
+ private _calculateUsedDomains() {
+ const domains = new Set(Object.keys(this.hass.states).map(computeDomain));
+ if (!deepEqual(domains, this._domains)) {
+ this._domains = domains;
+ }
+ }
+
+ protected _opened(): void {
+ // Store the width and height so that when we search, box doesn't jump
+ const boundingRect =
+ this.shadowRoot!.querySelector("mwc-list")?.getBoundingClientRect();
+ this._width = boundingRect?.width;
+ this._height = boundingRect?.height;
+ }
+
+ protected willUpdate(changedProperties: PropertyValues): void {
+ if (
+ this._params?.type === "action" &&
+ changedProperties.has("hass") &&
+ changedProperties.get("hass")?.states !== this.hass.states
+ ) {
+ this._calculateUsedDomains();
+ }
+ }
+
+ protected render() {
+ if (!this._params) {
+ return nothing;
+ }
+
+ const items = this._filter
+ ? this._getFilteredItems(
+ this._params.type,
+ this._group,
+ this._filter,
+ this.hass.localize,
+ this.hass.services,
+ this._manifests
+ )
+ : this._getGroupItems(
+ this._params.type,
+ this._group,
+ this._domains,
+ this.hass.localize,
+ this.hass.services,
+ this._manifests
+ );
+
+ const groupName = isService(this._group)
+ ? domainToName(
+ this.hass.localize,
+ getService(this._group!),
+ this._manifests?.[getService(this._group!)]
+ )
+ : this.hass.localize(
+ // @ts-ignore
+ `ui.panel.config.automation.editor.${this._params.type}s.groups.${this._group}.label`
+ );
+
+ return html`
+
+
+
+ ${this._group
+ ? groupName
+ : this.hass.localize(
+ `ui.panel.config.automation.editor.${this._params.type}s.add`
+ )}
+ ${this._group && this._group !== this._params.group
+ ? html``
+ : html``}
+
+
+
+
+ ${this._params.clipboardItem &&
+ !this._filter &&
+ (!this._group ||
+ items.find((item) => item.key === this._params!.clipboardItem))
+ ? html`
+ ${this.hass.localize(
+ `ui.panel.config.automation.editor.${this._params.type}s.paste`
+ )}
+ ${this.hass.localize(
+ // @ts-ignore
+ `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
+ )}
+
+
+ `
+ : ""}
+ ${repeat(
+ items,
+ (item) => item.key,
+ (item) => html`
+
+ ${item.name}
+ ${item.description}
+ ${item.icon
+ ? html``
+ : html`
`}
+ ${item.group
+ ? html``
+ : html``}
+
+ `
+ )}
+
+
+ `;
+ }
+
+ private _back() {
+ this._dialog!.scrollToPos(0, 0);
+ if (this._filter) {
+ this._filter = "";
+ return;
+ }
+ if (this._prev) {
+ this._group = this._prev;
+ this._prev = undefined;
+ return;
+ }
+ this._group = undefined;
+ }
+
+ private _selected(ev) {
+ if (!shouldHandleRequestSelectedEvent(ev)) {
+ return;
+ }
+ this._dialog!.scrollToPos(0, 0);
+ const item = ev.currentTarget;
+ if (item.group) {
+ this._prev = this._group;
+ this._group = item.value;
+ return;
+ }
+ this._params!.add(item.value);
+ this.closeDialog();
+ }
+
+ private _filterChanged(ev) {
+ this._filter = ev.detail.value;
+ }
+
+ static get styles(): CSSResultGroup {
+ return [
+ haStyle,
+ haStyleDialog,
+ css`
+ ha-dialog {
+ --dialog-content-padding: 0;
+ --mdc-dialog-max-height: 60vh;
+ }
+ @media all and (min-width: 550px) {
+ ha-dialog {
+ --mdc-dialog-min-width: 500px;
+ }
+ }
+ ha-icon-next {
+ width: 24px;
+ }
+ mwc-list {
+ max-height: 468px;
+ max-width: 100vw;
+ }
+ search-input {
+ display: block;
+ margin: 0 16px;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "add-automation-element-dialog": DialogAddAutomationElement;
+ }
+}
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 7e8bb4e270a3..1b51a9d278c1 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -29,7 +29,7 @@ import "../../../../components/ha-icon-button";
import type { AutomationClipboard } from "../../../../data/automation";
import { Condition, testCondition } from "../../../../data/automation";
import { describeCondition } from "../../../../data/automation_i18n";
-import { CONDITION_TYPES } from "../../../../data/condition";
+import { CONDITION_ICONS } from "../../../../data/condition";
import { validateConfig } from "../../../../data/config";
import { fullEntitiesContext } from "../../../../data/context";
import { EntityRegistryEntry } from "../../../../data/entity_registry";
@@ -123,7 +123,7 @@ export default class HaAutomationConditionRow extends LitElement {
${capitalizeFirstLetter(
describeCondition(this.condition, this.hass, this._entityReg)
diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
index f562d1220354..27364b92a3ed 100644
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -1,25 +1,18 @@
import "@material/mwc-button";
-import type { ActionDetail } from "@material/mwc-list";
-import {
- mdiArrowDown,
- mdiArrowUp,
- mdiContentPaste,
- mdiDrag,
- mdiPlus,
-} from "@mdi/js";
+import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple";
import {
- css,
CSSResultGroup,
- html,
LitElement,
- nothing,
PropertyValues,
+ css,
+ html,
+ nothing,
} from "lit";
import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
import type { SortableEvent } from "sortablejs";
+import { storage } from "../../../../common/decorators/storage";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button";
import "../../../../components/ha-button-menu";
@@ -28,30 +21,15 @@ import type {
AutomationClipboard,
Condition,
} from "../../../../data/automation";
-import type { Entries, HomeAssistant } from "../../../../types";
-import "./ha-automation-condition-row";
-import type HaAutomationConditionRow from "./ha-automation-condition-row";
-// Uncommenting these and this element doesn't load
-// import "./types/ha-automation-condition-not";
-// import "./types/ha-automation-condition-or";
-import { storage } from "../../../../common/decorators/storage";
-import { stringCompare } from "../../../../common/string/compare";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
-import type { HaSelect } from "../../../../components/ha-select";
-import { CONDITION_TYPES } from "../../../../data/condition";
import { sortableStyles } from "../../../../resources/ha-sortable-style";
import type { SortableInstance } from "../../../../resources/sortable";
-import "./types/ha-automation-condition-and";
-import "./types/ha-automation-condition-device";
-import "./types/ha-automation-condition-numeric_state";
-import "./types/ha-automation-condition-state";
-import "./types/ha-automation-condition-sun";
-import "./types/ha-automation-condition-template";
-import "./types/ha-automation-condition-time";
-import "./types/ha-automation-condition-trigger";
-import "./types/ha-automation-condition-zone";
-
-const PASTE_VALUE = "__paste__";
+import type { HomeAssistant } from "../../../../types";
+import {
+ PASTE_VALUE,
+ showAddAutomationElementDialog,
+} from "../show-add-automation-element-dialog";
+import "./ha-automation-condition-row";
+import type HaAutomationConditionRow from "./ha-automation-condition-row";
@customElement("ha-automation-condition")
export default class HaAutomationCondition extends LitElement {
@@ -197,43 +175,69 @@ export default class HaAutomationCondition extends LitElement {
`
)}