`
+ : 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 6172e79b4c..ee091eac16 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 2cd0bb0f5d..7c06cac92c 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,
+ isCreate
+ ? this.hass.localize("ui.components.calendar.event.add")
+ : this._summary
+ )}
>
${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 2c114cd946..f09c901c8e 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -37,7 +37,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 +82,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 +190,7 @@ 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 5c85b509c1..c75237a2c0 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,43 @@ 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),
+ });
+ } 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 +249,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 +300,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,
@@ -370,6 +326,11 @@ export default class HaAutomationAction extends LitElement {
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-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts
index c72da97aac..d62176812d 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/add-automation-element-dialog.ts b/src/panels/config/automation/add-automation-element-dialog.ts
new file mode 100644
index 0000000000..6c830976c5
--- /dev/null
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@@ -0,0 +1,579 @@
+import "@material/mwc-list/mwc-list";
+import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
+import Fuse, { IFuseOptions } from "fuse.js";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { repeat } from "lit/directives/repeat";
+import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { domainIcon } from "../../../common/entity/domain_icon";
+import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
+import { stringCompare } from "../../../common/string/compare";
+import { LocalizeFunc } from "../../../common/translations/localize";
+import "../../../components/ha-dialog";
+import type { HaDialog } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-header";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-icon-button-prev";
+import "../../../components/ha-icon-next";
+import "../../../components/ha-list-item";
+import "../../../components/search-input";
+import {
+ ACTION_GROUPS,
+ ACTION_ICONS,
+ SERVICE_PREFIX,
+ getService,
+ isService,
+} from "../../../data/action";
+import { AutomationElementGroup } from "../../../data/automation";
+import { CONDITION_GROUPS, CONDITION_ICONS } from "../../../data/condition";
+import {
+ IntegrationManifest,
+ domainToName,
+ fetchIntegrationManifests,
+} from "../../../data/integration";
+import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
+import { HassDialog } from "../../../dialogs/make-dialog-manager";
+import { haStyle, haStyleDialog } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import {
+ AddAutomationElementDialogParams,
+ PASTE_VALUE,
+} from "./show-add-automation-element-dialog";
+
+const TYPES = {
+ trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS },
+ condition: {
+ groups: CONDITION_GROUPS,
+ icons: CONDITION_ICONS,
+ },
+ action: {
+ groups: ACTION_GROUPS,
+ icons: ACTION_ICONS,
+ },
+};
+
+interface ListItem {
+ key: string;
+ name: string;
+ description: string;
+ icon: string;
+ group: boolean;
+}
+
+interface DomainManifestLookup {
+ [domain: string]: IntegrationManifest;
+}
+
+const ENTITY_DOMAINS_OTHER = new Set([
+ "date",
+ "datetime",
+ "device_tracker",
+ "text",
+ "time",
+ "tts",
+ "update",
+ "weather",
+ "image_processing",
+]);
+
+@customElement("add-automation-element-dialog")
+class DialogAddAutomationElement extends LitElement implements HassDialog {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @state() private _params?: AddAutomationElementDialogParams;
+
+ @state() private _group?: string;
+
+ @state() private _prev?: string;
+
+ @state() private _filter = "";
+
+ @state() private _manifests?: DomainManifestLookup;
+
+ @query("ha-dialog") private _dialog?: HaDialog;
+
+ private _fullScreen = false;
+
+ private _width?: number;
+
+ 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._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;
+ }
+
+ 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: AutomationElementGroup = group
+ ? isService(group)
+ ? {}
+ : TYPES[type].groups[group].members!
+ : TYPES[type].groups;
+
+ 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,
+ localize: LocalizeFunc,
+ services: HomeAssistant["services"],
+ manifests?: DomainManifestLookup
+ ): ListItem[] => {
+ if (type === "action" && isService(group)) {
+ const result = this._services(localize, services, manifests, group);
+ if (group === "service_media_player") {
+ result.unshift(this._convertToItem("play_media", {}, type, localize));
+ }
+ return result;
+ }
+
+ const groups: AutomationElementGroup = group
+ ? TYPES[type].groups[group].members!
+ : TYPES[type].groups;
+
+ 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, undefined)
+ );
+ } else if (this._group === "helpers") {
+ result.unshift(
+ ...this._serviceGroups(localize, services, manifests, "helper")
+ );
+ } else if (this._group === "other") {
+ result.unshift(
+ ...this._serviceGroups(localize, services, manifests, "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 = memoizeOne(
+ (
+ localize: LocalizeFunc,
+ services: HomeAssistant["services"],
+ manifests: DomainManifestLookup | undefined,
+ type: "helper" | "other" | undefined
+ ): ListItem[] => {
+ if (!services || !manifests) {
+ return [];
+ }
+ const result: ListItem[] = [];
+ Object.keys(services)
+ .sort()
+ .forEach((domain) => {
+ const manifest = manifests[domain];
+ if (
+ (type === undefined &&
+ manifest?.integration_type === "entity" &&
+ !ENTITY_DOMAINS_OTHER.has(domain)) ||
+ (type === "helper" && manifest?.integration_type === "helper") ||
+ (type === "other" &&
+ (ENTITY_DOMAINS_OTHER.has(domain) ||
+ !["helper", "entity"].includes(
+ manifest?.integration_type || ""
+ )))
+ ) {
+ result.push({
+ group: true,
+ icon: domainIcon(domain),
+ key: `${SERVICE_PREFIX}${domain}`,
+ name: domainToName(localize, domain, manifest),
+ description: "",
+ });
+ }
+ });
+ return result;
+ }
+ );
+
+ 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) {
+ result.push({
+ group: false,
+ icon: domainIcon(dmn),
+ 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;
+ }
+
+ 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 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.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.group
+ ? html``
+ : html``}
+
+ `
+ )}
+
+
+ `;
+ }
+
+ private _back() {
+ 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;
+ }
+ 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 7e8bb4e270..1b51a9d278 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 f562d12203..7f38b7bb2b 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 {
`
)}