Use list item for entity picker (#25176)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
Co-authored-by: Wendelin <w@pe8.at>
This commit is contained in:
Paul Bottein 2025-04-29 13:30:32 +02:00 committed by GitHub
parent 536602580d
commit f9fbb254bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 823 additions and 458 deletions

View File

@ -1,3 +1,3 @@
import "./ha-landing-page"; import "./ha-landing-page";
import("../../src/resources/ha-style"); import("../../src/resources/append-ha-style");

View File

@ -4,8 +4,8 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { isValidEntityId } from "../../common/entity/valid_entity_id"; import { isValidEntityId } from "../../common/entity/valid_entity_id";
import type { HomeAssistant, ValueChangedEvent } from "../../types"; import type { HomeAssistant, ValueChangedEvent } from "../../types";
import type { HaEntityComboBoxEntityFilterFunc } from "./ha-entity-combo-box";
import "./ha-entity-picker"; import "./ha-entity-picker";
import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";
@customElement("ha-entities-picker") @customElement("ha-entities-picker")
class HaEntitiesPickerLight extends LitElement { class HaEntitiesPickerLight extends LitElement {
@ -73,7 +73,7 @@ class HaEntitiesPickerLight extends LitElement {
@property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string; @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
@property({ attribute: false }) @property({ attribute: false })
public entityFilter?: HaEntityPickerEntityFilterFunc; public entityFilter?: HaEntityComboBoxEntityFilterFunc;
@property({ attribute: false, type: Array }) public createDomains?: string[]; @property({ attribute: false, type: Array }) public createDomains?: string[];

View File

@ -0,0 +1,522 @@
import { mdiMagnify, mdiPlus } from "@mdi/js";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import Fuse from "fuse.js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
import { computeAreaName } from "../../common/entity/compute_area_name";
import { computeDeviceName } from "../../common/entity/compute_device_name";
import { computeDomain } from "../../common/entity/compute_domain";
import { computeEntityName } from "../../common/entity/compute_entity_name";
import { computeStateName } from "../../common/entity/compute_state_name";
import { getEntityContext } from "../../common/entity/context/get_entity_context";
import { isValidEntityId } from "../../common/entity/valid_entity_id";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
import { computeRTL } from "../../common/util/compute_rtl";
import { domainToName } from "../../data/integration";
import type { HelperDomain } from "../../panels/config/helpers/const";
import { isHelperDomain } from "../../panels/config/helpers/const";
import { showHelperDetailDialog } from "../../panels/config/helpers/show-dialog-helper-detail";
import { HaFuse } from "../../resources/fuse";
import type { HomeAssistant, ValueChangedEvent } from "../../types";
import "../ha-combo-box";
import type { HaComboBox } from "../ha-combo-box";
import "../ha-combo-box-item";
import "../ha-icon-button";
import "../ha-svg-icon";
import "./state-badge";
const FAKE_ENTITY: HassEntity = {
entity_id: "",
state: "",
last_changed: "",
last_updated: "",
context: { id: "", user_id: null, parent_id: null },
attributes: {},
};
interface EntityComboBoxItem extends HassEntity {
// Force empty label to always display empty value by default in the search field
label: "";
primary: string;
secondary?: string;
translated_domain?: string;
show_entity_id?: boolean;
entity_name?: string;
area_name?: string;
device_name?: string;
friendly_name?: string;
sorting_label?: string;
icon_path?: string;
}
export type HaEntityComboBoxEntityFilterFunc = (entity: HassEntity) => boolean;
const CREATE_ID = "___create-new-entity___";
const DOMAIN_STYLE = styleMap({
fontSize: "var(--ha-font-size-s)",
fontWeight: "var(--ha-font-weight-normal)",
lineHeight: "var(--ha-line-height-normal)",
alignSelf: "flex-end",
maxWidth: "30%",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
});
const ENTITY_ID_STYLE = styleMap({
fontFamily: "var(--code-font-family, monospace)",
fontSize: "var(--ha-font-size-xs)",
});
@customElement("ha-entity-combo-box")
export class HaEntityComboBox extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
// eslint-disable-next-line lit/no-native-attributes
@property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@property({ type: Boolean, attribute: "allow-custom-entity" })
public allowCustomEntity;
@property() public label?: string;
@property() public value?: string;
@property() public helper?: string;
@property({ attribute: false, type: Array }) public createDomains?: string[];
/**
* Show entities from specific domains.
* @type {Array}
* @attr include-domains
*/
@property({ type: Array, attribute: "include-domains" })
public includeDomains?: string[];
/**
* Show no entities of these domains.
* @type {Array}
* @attr exclude-domains
*/
@property({ type: Array, attribute: "exclude-domains" })
public excludeDomains?: string[];
/**
* Show only entities of these device classes.
* @type {Array}
* @attr include-device-classes
*/
@property({ type: Array, attribute: "include-device-classes" })
public includeDeviceClasses?: string[];
/**
* Show only entities with these unit of measuments.
* @type {Array}
* @attr include-unit-of-measurement
*/
@property({ type: Array, attribute: "include-unit-of-measurement" })
public includeUnitOfMeasurement?: string[];
/**
* List of allowed entities to show.
* @type {Array}
* @attr include-entities
*/
@property({ type: Array, attribute: "include-entities" })
public includeEntities?: string[];
/**
* List of entities to be excluded.
* @type {Array}
* @attr exclude-entities
*/
@property({ type: Array, attribute: "exclude-entities" })
public excludeEntities?: string[];
@property({ attribute: false })
public entityFilter?: HaEntityComboBoxEntityFilterFunc;
@property({ attribute: "hide-clear-icon", type: Boolean })
public hideClearIcon = false;
@state() private _opened = false;
@query("ha-combo-box", true) public comboBox!: HaComboBox;
public async open() {
await this.updateComplete;
await this.comboBox?.open();
}
public async focus() {
await this.updateComplete;
await this.comboBox?.focus();
}
private _initialItems = false;
private _items: EntityComboBoxItem[] = [];
protected firstUpdated(changedProperties: PropertyValues): void {
super.firstUpdated(changedProperties);
this.hass.loadBackendTranslation("title");
}
private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
item,
{ index }
) => html`
<ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
${item.icon_path
? html`<ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>`
: html`
<state-badge
slot="start"
.stateObj=${item}
.hass=${this.hass}
></state-badge>
`}
<span slot="headline">${item.primary}</span>
${item.secondary
? html`<span slot="supporting-text">${item.secondary}</span>`
: nothing}
${item.entity_id && item.show_entity_id
? html`<span slot="supporting-text" style=${ENTITY_ID_STYLE}
>${item.entity_id}</span
>`
: nothing}
${item.translated_domain && !item.show_entity_id
? html`<div slot="trailing-supporting-text" style=${DOMAIN_STYLE}>
${item.translated_domain}
</div>`
: nothing}
</ha-combo-box-item>
`;
private _getItems = memoizeOne(
(
_opened: boolean,
hass: this["hass"],
includeDomains: this["includeDomains"],
excludeDomains: this["excludeDomains"],
entityFilter: this["entityFilter"],
includeDeviceClasses: this["includeDeviceClasses"],
includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
includeEntities: this["includeEntities"],
excludeEntities: this["excludeEntities"],
createDomains: this["createDomains"]
): EntityComboBoxItem[] => {
let states: EntityComboBoxItem[] = [];
let entityIds = Object.keys(hass.states);
const createItems = createDomains?.length
? createDomains.map((domain) => {
const primary = hass.localize(
"ui.components.entity.entity-picker.create_helper",
{
domain: isHelperDomain(domain)
? hass.localize(
`ui.panel.config.helpers.types.${domain as HelperDomain}`
)
: domainToName(hass.localize, domain),
}
);
return {
...FAKE_ENTITY,
label: "",
entity_id: CREATE_ID + domain,
primary: primary,
secondary: this.hass.localize(
"ui.components.entity.entity-picker.new_entity"
),
icon_path: mdiPlus,
} satisfies EntityComboBoxItem;
})
: [];
if (!entityIds.length) {
return [
{
...FAKE_ENTITY,
label: "",
primary: this.hass!.localize(
"ui.components.entity.entity-picker.no_entities"
),
icon_path: mdiMagnify,
},
...createItems,
];
}
if (includeEntities) {
entityIds = entityIds.filter((entityId) =>
includeEntities.includes(entityId)
);
}
if (excludeEntities) {
entityIds = entityIds.filter(
(entityId) => !excludeEntities.includes(entityId)
);
}
if (includeDomains) {
entityIds = entityIds.filter((eid) =>
includeDomains.includes(computeDomain(eid))
);
}
if (excludeDomains) {
entityIds = entityIds.filter(
(eid) => !excludeDomains.includes(computeDomain(eid))
);
}
const isRTL = computeRTL(this.hass);
states = entityIds
.map<EntityComboBoxItem>((entityId) => {
const stateObj = hass!.states[entityId];
const { area, device } = getEntityContext(stateObj, hass);
const friendlyName = computeStateName(stateObj); // Keep this for search
const entityName = computeEntityName(stateObj, hass);
const deviceName = device ? computeDeviceName(device) : undefined;
const areaName = area ? computeAreaName(area) : undefined;
const primary = entityName || deviceName || entityId;
const secondary = [areaName, entityName ? deviceName : undefined]
.filter(Boolean)
.join(isRTL ? " ◂ " : " ▸ ");
const translatedDomain = domainToName(
this.hass.localize,
computeDomain(entityId)
);
return {
...hass!.states[entityId],
label: "",
primary: primary,
secondary:
secondary ||
this.hass.localize("ui.components.device-picker.no_area"),
translated_domain: translatedDomain,
sorting_label: [deviceName, entityName].filter(Boolean).join("-"),
entity_name: entityName || deviceName,
area_name: areaName,
device_name: deviceName,
friendly_name: friendlyName,
show_entity_id: hass.userData?.showEntityIdPicker,
};
})
.sort((entityA, entityB) =>
caseInsensitiveStringCompare(
entityA.sorting_label!,
entityB.sorting_label!,
this.hass.locale.language
)
);
if (includeDeviceClasses) {
states = states.filter(
(stateObj) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value ||
(stateObj.attributes.device_class &&
includeDeviceClasses.includes(stateObj.attributes.device_class))
);
}
if (includeUnitOfMeasurement) {
states = states.filter(
(stateObj) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value ||
(stateObj.attributes.unit_of_measurement &&
includeUnitOfMeasurement.includes(
stateObj.attributes.unit_of_measurement
))
);
}
if (entityFilter) {
states = states.filter(
(stateObj) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value || entityFilter!(stateObj)
);
}
if (!states.length) {
return [
{
...FAKE_ENTITY,
label: "",
primary: this.hass!.localize(
"ui.components.entity.entity-picker.no_match"
),
icon_path: mdiMagnify,
},
...createItems,
];
}
if (createItems?.length) {
states.push(...createItems);
}
return states;
}
);
protected shouldUpdate(changedProps: PropertyValues) {
if (
changedProps.has("value") ||
changedProps.has("label") ||
changedProps.has("disabled")
) {
return true;
}
return !(!changedProps.has("_opened") && this._opened);
}
public willUpdate(changedProps: PropertyValues) {
if (!this._initialItems || (changedProps.has("_opened") && this._opened)) {
this._items = this._getItems(
this._opened,
this.hass,
this.includeDomains,
this.excludeDomains,
this.entityFilter,
this.includeDeviceClasses,
this.includeUnitOfMeasurement,
this.includeEntities,
this.excludeEntities,
this.createDomains
);
if (this._initialItems) {
this.comboBox.filteredItems = this._items;
}
this._initialItems = true;
}
if (changedProps.has("createDomains") && this.createDomains?.length) {
this.hass.loadFragmentTranslation("config");
}
}
protected render(): TemplateResult {
return html`
<ha-combo-box
item-value-path="entity_id"
.hass=${this.hass}
.value=${this._value}
.label=${this.label === undefined
? this.hass.localize("ui.components.entity.entity-picker.entity")
: this.label}
.helper=${this.helper}
.allowCustomValue=${this.allowCustomEntity}
.filteredItems=${this._items}
.renderer=${this._rowRenderer}
.required=${this.required}
.disabled=${this.disabled}
.hideClearIcon=${this.hideClearIcon}
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
@filter-changed=${this._filterChanged}
>
</ha-combo-box>
`;
}
private get _value() {
return this.value || "";
}
private _openedChanged(ev: ValueChangedEvent<boolean>) {
this._opened = ev.detail.value;
}
private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
ev.stopPropagation();
// Clear the input field to prevent showing the old value next time
this.comboBox.setTextFieldValue("");
const newValue = ev.detail.value?.trim();
if (newValue && newValue.startsWith(CREATE_ID)) {
const domain = newValue.substring(CREATE_ID.length);
showHelperDetailDialog(this, {
domain,
dialogClosedCallback: (item) => {
if (item.entityId) this._setValue(item.entityId);
},
});
return;
}
if (newValue !== this._value) {
this._setValue(newValue);
}
}
private _fuseIndex = memoizeOne((states: EntityComboBoxItem[]) =>
Fuse.createIndex(
[
"entity_name",
"device_name",
"area_name",
"translated_domain",
"friendly_name", // for backwards compatibility
"entity_id", // for technical search
],
states
)
);
private _filterChanged(ev: CustomEvent): void {
if (!this._opened) return;
const target = ev.target as HaComboBox;
const filterString = ev.detail.value.trim().toLowerCase() as string;
const index = this._fuseIndex(this._items);
const fuse = new HaFuse(this._items, {}, index);
const results = fuse.multiTermsSearch(filterString);
if (results) {
target.filteredItems = results.map((result) => result.item);
} else {
target.filteredItems = this._items;
}
}
private _setValue(value: string | undefined) {
if (!value || !isValidEntityId(value)) {
return;
}
setTimeout(() => {
fireEvent(this, "value-changed", { value });
}, 0);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-entity-combo-box": HaEntityComboBox;
}
}

View File

@ -1,77 +1,27 @@
import { mdiMagnify, mdiPlus } from "@mdi/js"; import { mdiClose, mdiMenuDown, mdiShape } from "@mdi/js";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit"; import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
import Fuse from "fuse.js"; import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { stopPropagation } from "../../common/dom/stop_propagation";
import { computeAreaName } from "../../common/entity/compute_area_name"; import { computeAreaName } from "../../common/entity/compute_area_name";
import { computeDeviceName } from "../../common/entity/compute_device_name"; import { computeDeviceName } from "../../common/entity/compute_device_name";
import { computeDomain } from "../../common/entity/compute_domain";
import { computeEntityName } from "../../common/entity/compute_entity_name"; import { computeEntityName } from "../../common/entity/compute_entity_name";
import { computeStateName } from "../../common/entity/compute_state_name";
import { getEntityContext } from "../../common/entity/context/get_entity_context"; import { getEntityContext } from "../../common/entity/context/get_entity_context";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
import { computeRTL } from "../../common/util/compute_rtl"; import { computeRTL } from "../../common/util/compute_rtl";
import { domainToName } from "../../data/integration"; import { debounce } from "../../common/util/debounce";
import type { HelperDomain } from "../../panels/config/helpers/const"; import type { HomeAssistant } from "../../types";
import { isHelperDomain } from "../../panels/config/helpers/const";
import { showHelperDetailDialog } from "../../panels/config/helpers/show-dialog-helper-detail";
import { HaFuse } from "../../resources/fuse";
import type { HomeAssistant, ValueChangedEvent } from "../../types";
import "../ha-combo-box";
import type { HaComboBox } from "../ha-combo-box";
import "../ha-combo-box-item"; import "../ha-combo-box-item";
import "../ha-icon-button"; import "../ha-icon-button";
import type { HaMdListItem } from "../ha-md-list-item";
import "../ha-svg-icon"; import "../ha-svg-icon";
import "./ha-entity-combo-box";
import type {
HaEntityComboBox,
HaEntityComboBoxEntityFilterFunc,
} from "./ha-entity-combo-box";
import "./state-badge"; import "./state-badge";
const FAKE_ENTITY: HassEntity = {
entity_id: "",
state: "",
last_changed: "",
last_updated: "",
context: { id: "", user_id: null, parent_id: null },
attributes: {},
};
interface EntityPickerItem extends HassEntity {
label: string;
primary: string;
secondary?: string;
translated_domain?: string;
show_entity_id?: boolean;
entity_name?: string;
area_name?: string;
device_name?: string;
friendly_name?: string;
sorting_label?: string;
icon_path?: string;
}
export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
const CREATE_ID = "___create-new-entity___";
const DOMAIN_STYLE = styleMap({
fontSize: "12px",
fontWeight: "400",
lineHeight: "18px",
alignSelf: "flex-end",
maxWidth: "30%",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
});
const ENTITY_ID_STYLE = styleMap({
fontFamily: "var(--code-font-family, monospace)",
fontSize: "11px",
});
@customElement("ha-entity-picker") @customElement("ha-entity-picker")
export class HaEntityPicker extends LitElement { export class HaEntityPicker extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -92,6 +42,8 @@ export class HaEntityPicker extends LitElement {
@property() public helper?: string; @property() public helper?: string;
@property() public placeholder?: string;
@property({ attribute: false, type: Array }) public createDomains?: string[]; @property({ attribute: false, type: Array }) public createDomains?: string[];
/** /**
@ -143,381 +95,240 @@ export class HaEntityPicker extends LitElement {
public excludeEntities?: string[]; public excludeEntities?: string[];
@property({ attribute: false }) @property({ attribute: false })
public entityFilter?: HaEntityPickerEntityFilterFunc; public entityFilter?: HaEntityComboBoxEntityFilterFunc;
@property({ attribute: "hide-clear-icon", type: Boolean }) @property({ attribute: "hide-clear-icon", type: Boolean })
public hideClearIcon = false; public hideClearIcon = false;
@property({ attribute: "item-label-path" }) public itemLabelPath = "label"; @query("#anchor") private _anchor?: HaMdListItem;
@query("#input") private _input?: HaEntityComboBox;
@state() private _opened = false; @state() private _opened = false;
@query("ha-combo-box", true) public comboBox!: HaComboBox; private _renderContent() {
const entityId = this.value || "";
public async open() { if (!this.value) {
await this.updateComplete; return html`
await this.comboBox?.open(); <span slot="headline" class="placeholder"
} >${this.placeholder ??
this.hass.localize(
public async focus() { "ui.components.entity.entity-picker.placeholder"
await this.updateComplete; )}</span
await this.comboBox?.focus(); >
} <ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
private _initialItems = false;
private _items: EntityPickerItem[] = [];
protected firstUpdated(changedProperties: PropertyValues): void {
super.firstUpdated(changedProperties);
this.hass.loadBackendTranslation("title");
}
private _rowRenderer: ComboBoxLitRenderer<EntityPickerItem> = (
item,
{ index }
) => html`
<ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
${item.icon_path
? html`<ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>`
: html`
<state-badge
slot="start"
.stateObj=${item}
.hass=${this.hass}
></state-badge>
`}
<span slot="headline">${item.primary} </span>
${item.secondary
? html`<span slot="supporting-text">${item.secondary}</span>`
: nothing}
${item.entity_id && item.show_entity_id
? html`<span slot="supporting-text" style=${ENTITY_ID_STYLE}
>${item.entity_id}</span
>`
: nothing}
${item.translated_domain && !item.show_entity_id
? html`<div slot="trailing-supporting-text" style=${DOMAIN_STYLE}>
${item.translated_domain}
</div>`
: nothing}
</ha-combo-box-item>
`; `;
private _getItems = memoizeOne(
(
_opened: boolean,
hass: this["hass"],
includeDomains: this["includeDomains"],
excludeDomains: this["excludeDomains"],
entityFilter: this["entityFilter"],
includeDeviceClasses: this["includeDeviceClasses"],
includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
includeEntities: this["includeEntities"],
excludeEntities: this["excludeEntities"],
createDomains: this["createDomains"]
): EntityPickerItem[] => {
let states: EntityPickerItem[] = [];
if (!hass) {
return [];
}
let entityIds = Object.keys(hass.states);
const createItems = createDomains?.length
? createDomains.map((domain) => {
const primary = hass.localize(
"ui.components.entity.entity-picker.create_helper",
{
domain: isHelperDomain(domain)
? hass.localize(
`ui.panel.config.helpers.types.${domain as HelperDomain}`
)
: domainToName(hass.localize, domain),
}
);
return {
...FAKE_ENTITY,
entity_id: CREATE_ID + domain,
primary: primary,
label: primary,
secondary: this.hass.localize(
"ui.components.entity.entity-picker.new_entity"
),
icon_path: mdiPlus,
};
})
: [];
if (!entityIds.length) {
return [
{
...FAKE_ENTITY,
primary: this.hass!.localize(
"ui.components.entity.entity-picker.no_entities"
),
label: this.hass!.localize(
"ui.components.entity.entity-picker.no_entities"
),
icon_path: mdiMagnify,
},
...createItems,
];
} }
if (includeEntities) { const stateObj = this.hass.states[entityId];
entityIds = entityIds.filter((entityId) =>
includeEntities.includes(entityId) const showClearIcon =
); !this.required && !this.disabled && !this.hideClearIcon;
if (!stateObj) {
return html`
<ha-svg-icon slot="start" .path=${mdiShape}></ha-svg-icon>
<span slot="headline">${entityId}</span>
${showClearIcon
? html`<ha-icon-button
class="clear"
slot="end"
@click=${this._clear}
.path=${mdiClose}
></ha-icon-button>`
: nothing}
<ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
`;
} }
if (excludeEntities) { const { area, device } = getEntityContext(stateObj, this.hass);
entityIds = entityIds.filter(
(entityId) => !excludeEntities.includes(entityId)
);
}
if (includeDomains) { const entityName = computeEntityName(stateObj, this.hass);
entityIds = entityIds.filter((eid) =>
includeDomains.includes(computeDomain(eid))
);
}
if (excludeDomains) {
entityIds = entityIds.filter(
(eid) => !excludeDomains.includes(computeDomain(eid))
);
}
const isRTL = computeRTL(this.hass);
states = entityIds
.map<EntityPickerItem>((entityId) => {
const stateObj = hass!.states[entityId];
const { area, device } = getEntityContext(stateObj, hass);
const friendlyName = computeStateName(stateObj); // Keep this for search
const entityName = computeEntityName(stateObj, hass);
const deviceName = device ? computeDeviceName(device) : undefined; const deviceName = device ? computeDeviceName(device) : undefined;
const areaName = area ? computeAreaName(area) : undefined; const areaName = area ? computeAreaName(area) : undefined;
const isRTL = computeRTL(this.hass);
const primary = entityName || deviceName || entityId; const primary = entityName || deviceName || entityId;
const secondary = [areaName, entityName ? deviceName : undefined] const secondary = [areaName, entityName ? deviceName : undefined]
.filter(Boolean) .filter(Boolean)
.join(isRTL ? " ◂ " : " ▸ "); .join(isRTL ? " ◂ " : " ▸ ");
const translatedDomain = domainToName(
this.hass.localize,
computeDomain(entityId)
);
return {
...hass!.states[entityId],
primary: primary,
secondary:
secondary ||
this.hass.localize("ui.components.device-picker.no_area"),
label: friendlyName,
translated_domain: translatedDomain,
sorting_label: [deviceName, entityName].filter(Boolean).join("-"),
entity_name: entityName || deviceName,
area_name: areaName,
device_name: deviceName,
friendly_name: friendlyName,
show_entity_id: hass.userData?.showEntityIdPicker,
};
})
.sort((entityA, entityB) =>
caseInsensitiveStringCompare(
entityA.sorting_label!,
entityB.sorting_label!,
this.hass.locale.language
)
);
if (includeDeviceClasses) {
states = states.filter(
(stateObj) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value ||
(stateObj.attributes.device_class &&
includeDeviceClasses.includes(stateObj.attributes.device_class))
);
}
if (includeUnitOfMeasurement) {
states = states.filter(
(stateObj) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value ||
(stateObj.attributes.unit_of_measurement &&
includeUnitOfMeasurement.includes(
stateObj.attributes.unit_of_measurement
))
);
}
if (entityFilter) {
states = states.filter(
(stateObj) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value || entityFilter!(stateObj)
);
}
if (!states.length) {
return [
{
...FAKE_ENTITY,
primary: this.hass!.localize(
"ui.components.entity.entity-picker.no_match"
),
label: this.hass!.localize(
"ui.components.entity.entity-picker.no_match"
),
icon_path: mdiMagnify,
},
...createItems,
];
}
if (createItems?.length) {
states.push(...createItems);
}
return states;
}
);
protected shouldUpdate(changedProps: PropertyValues) {
if (
changedProps.has("value") ||
changedProps.has("label") ||
changedProps.has("disabled")
) {
return true;
}
return !(!changedProps.has("_opened") && this._opened);
}
public willUpdate(changedProps: PropertyValues) {
if (!this._initialItems || (changedProps.has("_opened") && this._opened)) {
this._items = this._getItems(
this._opened,
this.hass,
this.includeDomains,
this.excludeDomains,
this.entityFilter,
this.includeDeviceClasses,
this.includeUnitOfMeasurement,
this.includeEntities,
this.excludeEntities,
this.createDomains
);
if (this._initialItems) {
this.comboBox.filteredItems = this._items;
}
this._initialItems = true;
}
if (changedProps.has("createDomains") && this.createDomains?.length) {
this.hass.loadFragmentTranslation("config");
}
}
protected render(): TemplateResult {
return html` return html`
<ha-combo-box <state-badge
item-value-path="entity_id"
.itemLabelPath=${this.itemLabelPath}
.hass=${this.hass} .hass=${this.hass}
.value=${this._value} .stateObj=${stateObj}
.label=${this.label === undefined slot="start"
? this.hass.localize("ui.components.entity.entity-picker.entity") ></state-badge>
: this.label} <span slot="headline">${primary}</span>
.helper=${this.helper} <span slot="supporting-text">
.allowCustomValue=${this.allowCustomEntity} ${secondary ||
.filteredItems=${this._items} this.hass.localize("ui.components.device-picker.no_area")}
.renderer=${this._rowRenderer} </span>
.required=${this.required} ${showClearIcon
.disabled=${this.disabled} ? html`<ha-icon-button
.hideClearIcon=${this.hideClearIcon} class="clear"
@opened-changed=${this._openedChanged} slot="end"
@value-changed=${this._valueChanged} @click=${this._clear}
@filter-changed=${this._filterChanged} .path=${mdiClose}
> ></ha-icon-button>`
</ha-combo-box> : nothing}
<ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
`; `;
} }
private get _value() { protected render() {
return this.value || ""; return html`
${this.label ? html`<p class="label">${this.label}</p>` : nothing}
<div class="container">
${!this._opened
? html`<ha-combo-box-item
.disabled=${this.disabled}
id="anchor"
type="button"
compact
@click=${this._showPicker}
>
${this._renderContent()}
</ha-combo-box-item>`
: html`<ha-entity-combo-box
id="input"
.hass=${this.hass}
.autofocus=${this.autofocus}
.allowCustomEntity=${this.allowCustomEntity}
.label=${this.hass.localize("ui.common.search")}
.value=${this.value}
.createDomains=${this.createDomains}
.includeDomains=${this.includeDomains}
.excludeDomains=${this.excludeDomains}
.includeDeviceClasses=${this.includeDeviceClasses}
.includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
.includeEntities=${this.includeEntities}
.excludeEntities=${this.excludeEntities}
.entityFilter=${this.entityFilter}
hide-clear-icon
@opened-changed=${this._debounceOpenedChanged}
@input=${stopPropagation}
></ha-entity-combo-box>`}
${this._renderHelper()}
</div>
`;
} }
private _openedChanged(ev: ValueChangedEvent<boolean>) { private _renderHelper() {
this._opened = ev.detail.value; return this.helper
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
: nothing;
} }
private _valueChanged(ev: ValueChangedEvent<string | undefined>) { private _clear(e) {
ev.stopPropagation(); e.stopPropagation();
const newValue = ev.detail.value?.trim(); this.value = undefined;
fireEvent(this, "value-changed", { value: undefined });
fireEvent(this, "change");
}
if (newValue && newValue.startsWith(CREATE_ID)) { private async _showPicker() {
const domain = newValue.substring(CREATE_ID.length); if (this.disabled) {
showHelperDetailDialog(this, {
domain,
dialogClosedCallback: (item) => {
if (item.entityId) this._setValue(item.entityId);
},
});
return; return;
} }
this._opened = true;
if (newValue !== this._value) { await this.updateComplete;
this._setValue(newValue); this._input?.focus();
} this._input?.open();
} }
private _fuseIndex = memoizeOne((states: EntityPickerItem[]) => // Multiple calls to _openedChanged can be triggered in quick succession
Fuse.createIndex( // when the menu is opened
[ private _debounceOpenedChanged = debounce(
"entity_name", (ev) => this._openedChanged(ev),
"device_name", 10
"area_name",
"translated_domain",
"friendly_name", // for backwards compatibility
"entity_id", // for technical search
],
states
)
); );
private _filterChanged(ev: CustomEvent): void { private async _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
if (!this._opened) return; const opened = ev.detail.value;
if (this._opened && !opened) {
const target = ev.target as HaComboBox; this._opened = false;
const filterString = ev.detail.value.trim().toLowerCase() as string; await this.updateComplete;
this._anchor?.focus();
const index = this._fuseIndex(this._items);
const fuse = new HaFuse(this._items, {}, index);
const results = fuse.multiTermsSearch(filterString);
if (results) {
target.filteredItems = results.map((result) => result.item);
} else {
target.filteredItems = this._items;
} }
} }
private _setValue(value: string | undefined) { static get styles(): CSSResultGroup {
this.value = value; return [
setTimeout(() => { css`
fireEvent(this, "value-changed", { value }); mwc-menu-surface {
fireEvent(this, "change"); --mdc-menu-min-width: 100%;
}, 0); }
.container {
position: relative;
display: block;
}
ha-combo-box-item {
background-color: var(--mdc-text-field-fill-color, whitesmoke);
border-radius: 4px;
border-end-end-radius: 0;
border-end-start-radius: 0;
--md-list-item-one-line-container-height: 56px;
--md-list-item-two-line-container-height: 56px;
--md-list-item-top-space: 8px;
--md-list-item-bottom-space: 8px;
--md-list-item-leading-space: 8px;
--md-list-item-trailing-space: 8px;
--ha-md-list-item-gap: 8px;
/* Remove the default focus ring */
--md-focus-ring-width: 0px;
--md-focus-ring-duration: 0s;
}
/* Add Similar focus style as the text field */
ha-combo-box-item:after {
display: block;
content: "";
position: absolute;
pointer-events: none;
bottom: 0;
left: 0;
right: 0;
height: 1px;
width: 100%;
background-color: var(
--mdc-text-field-idle-line-color,
rgba(0, 0, 0, 0.42)
);
transform:
height 180ms ease-in-out,
background-color 180ms ease-in-out;
}
ha-combo-box-item:focus:after {
height: 2px;
background-color: var(--mdc-theme-primary);
}
ha-combo-box-item ha-svg-icon[slot="start"] {
margin: 0 4px;
}
.clear {
margin: 0 -8px;
--mdc-icon-button-size: 32px;
--mdc-icon-size: 20px;
}
.edit {
--mdc-icon-size: 20px;
width: 32px;
}
.label {
display: block;
margin: 0 0 8px;
}
.placeholder {
color: var(--secondary-text-color);
padding: 0 8px;
}
`,
];
} }
} }

View File

@ -17,6 +17,9 @@ export class HaComboBoxItem extends HaMdListItem {
:host([border-top]) md-item { :host([border-top]) md-item {
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
} }
[slot="start"] {
--state-icon-color: var(--secondary-text-color);
}
[slot="headline"] { [slot="headline"] {
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;

View File

@ -147,6 +147,10 @@ export class HaComboBox extends LitElement {
this._comboBox.value = value; this._comboBox.value = value;
} }
public setTextFieldValue(value: string) {
this._inputElement.value = value;
}
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<!-- @ts-ignore Tag definition is not included in theme folder --> <!-- @ts-ignore Tag definition is not included in theme folder -->

View File

@ -17,6 +17,7 @@ export const haMdListStyles = [
md-item { md-item {
overflow: var(--md-item-overflow, hidden); overflow: var(--md-item-overflow, hidden);
align-items: var(--md-item-align-items, center); align-items: var(--md-item-align-items, center);
gap: var(--ha-md-list-item-gap, 16px);
} }
`, `,
]; ];

View File

@ -39,8 +39,8 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import "./device/ha-device-picker"; import "./device/ha-device-picker";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./entity/ha-entity-picker"; import "./entity/ha-entity-combo-box";
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker"; import type { HaEntityComboBoxEntityFilterFunc } from "./entity/ha-entity-combo-box";
import "./ha-area-floor-picker"; import "./ha-area-floor-picker";
import { floorDefaultIconPath } from "./ha-floor-icon"; import { floorDefaultIconPath } from "./ha-floor-icon";
import "./ha-icon-button"; import "./ha-icon-button";
@ -80,7 +80,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
public deviceFilter?: HaDevicePickerDeviceFilterFunc; public deviceFilter?: HaDevicePickerDeviceFilterFunc;
@property({ attribute: false }) @property({ attribute: false })
public entityFilter?: HaEntityPickerEntityFilterFunc; public entityFilter?: HaEntityComboBoxEntityFilterFunc;
@property({ type: Boolean, reflect: true }) public disabled = false; @property({ type: Boolean, reflect: true }) public disabled = false;
@ -449,7 +449,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
></ha-label-picker> ></ha-label-picker>
` `
: html` : html`
<ha-entity-picker <ha-entity-combo-box
.hass=${this.hass} .hass=${this.hass}
id="input" id="input"
.type=${"entity_id"} .type=${"entity_id"}
@ -464,7 +464,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
@value-changed=${this._targetPicked} @value-changed=${this._targetPicked}
@click=${this._preventDefault} @click=${this._preventDefault}
allow-custom-entity allow-custom-entity
></ha-entity-picker> ></ha-entity-combo-box>
`}</mwc-menu-surface `}</mwc-menu-surface
>`; >`;
} }
@ -839,7 +839,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
mwc-menu-surface { mwc-menu-surface {
--mdc-menu-min-width: 100%; --mdc-menu-min-width: 100%;
} }
ha-entity-picker, ha-entity-combo-box,
ha-device-picker, ha-device-picker,
ha-area-floor-picker { ha-area-floor-picker {
display: block; display: block;

View File

@ -8,9 +8,9 @@ import { computeDomain } from "../common/entity/compute_domain";
import { computeStateDomain } from "../common/entity/compute_state_domain"; import { computeStateDomain } from "../common/entity/compute_state_domain";
import { autoCaseNoun } from "../common/translations/auto_case_noun"; import { autoCaseNoun } from "../common/translations/auto_case_noun";
import type { LocalizeFunc } from "../common/translations/localize"; import type { LocalizeFunc } from "../common/translations/localize";
import type { HaEntityPickerEntityFilterFunc } from "../components/entity/ha-entity-picker";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import { UNAVAILABLE, UNKNOWN } from "./entity"; import { UNAVAILABLE, UNKNOWN } from "./entity";
import type { HaEntityComboBoxEntityFilterFunc } from "../components/entity/ha-entity-combo-box";
const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages"; const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor", "zone"]; export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor", "zone"];
@ -322,9 +322,8 @@ export const localizeStateMessage = (
}); });
}; };
export const filterLogbookCompatibleEntities: HaEntityPickerEntityFilterFunc = ( export const filterLogbookCompatibleEntities: HaEntityComboBoxEntityFilterFunc =
entity (entity) =>
) =>
computeStateDomain(entity) !== "sensor" || computeStateDomain(entity) !== "sensor" ||
(entity.attributes.unit_of_measurement === undefined && (entity.attributes.unit_of_measurement === undefined &&
entity.attributes.state_class === undefined); entity.attributes.state_class === undefined);

View File

@ -1,5 +1,6 @@
import { import {
mdiClipboardTextMultipleOutline, mdiClipboardTextMultipleOutline,
mdiContentCopy,
mdiInformationOutline, mdiInformationOutline,
mdiRefresh, mdiRefresh,
} from "@mdi/js"; } from "@mdi/js";
@ -19,13 +20,13 @@ import { storage } from "../../../common/decorators/storage";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { escapeRegExp } from "../../../common/string/escape_regexp"; import { escapeRegExp } from "../../../common/string/escape_regexp";
import { copyToClipboard } from "../../../common/util/copy-clipboard"; import { copyToClipboard } from "../../../common/util/copy-clipboard";
import { isMobileClient } from "../../../util/is_mobile";
import "../../../components/entity/ha-entity-picker"; import "../../../components/entity/ha-entity-picker";
import "../../../components/ha-alert"; import "../../../components/ha-alert";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-checkbox"; import "../../../components/ha-checkbox";
import "../../../components/ha-expansion-panel"; import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-input-helper-text";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-tip"; import "../../../components/ha-tip";
import "../../../components/ha-yaml-editor"; import "../../../components/ha-yaml-editor";
@ -34,7 +35,7 @@ import "../../../components/search-input";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../resources/styles"; import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog"; import { showToast } from "../../../util/toast";
@customElement("developer-tools-state") @customElement("developer-tools-state")
class HaPanelDevState extends LitElement { class HaPanelDevState extends LitElement {
@ -128,18 +129,20 @@ class HaPanelDevState extends LitElement {
.value=${this._entityId} .value=${this._entityId}
@value-changed=${this._entityIdChanged} @value-changed=${this._entityIdChanged}
allow-custom-entity allow-custom-entity
item-label-path="entity_id"
></ha-entity-picker> ></ha-entity-picker>
${this.hass.enableShortcuts && !isMobileClient ${this._entityId
? html`<ha-tip .hass=${this.hass} ? html`
>${this.hass.localize("ui.tips.key_e_tip", { <div class="entity-id">
keyboard_shortcut: html`<a <span>${this._entityId}</span>
href="#" <ha-icon-button
@click=${this._openShortcutDialog} .path=${mdiContentCopy}
>${this.hass.localize("ui.tips.keyboard_shortcut")}</a @click=${this._copyStateEntity}
>`, title=${this.hass.localize(
})}</ha-tip "ui.panel.developer-tools.tabs.states.copy_id"
>` )}
></ha-icon-button>
</div>
`
: nothing} : nothing}
<ha-textfield <ha-textfield
.label=${this.hass.localize( .label=${this.hass.localize(
@ -337,6 +340,14 @@ class HaPanelDevState extends LitElement {
await copyToClipboard(entity.entity_id); await copyToClipboard(entity.entity_id);
} }
private async _copyStateEntity(ev) {
ev.preventDefault();
await copyToClipboard(this._entityId);
showToast(this, {
message: this.hass.localize("ui.common.copied_clipboard"),
});
}
private _entitySelected(ev) { private _entitySelected(ev) {
const entityState: HassEntity = (ev.currentTarget! as any).entity; const entityState: HassEntity = (ev.currentTarget! as any).entity;
this._entityId = entityState.entity_id; this._entityId = entityState.entity_id;
@ -574,11 +585,6 @@ class HaPanelDevState extends LitElement {
this._validJSON = ev.detail.isValid; this._validJSON = ev.detail.isValid;
} }
private _openShortcutDialog(ev: Event) {
ev.preventDefault();
showShortcutsDialog(this);
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,
@ -599,6 +605,32 @@ class HaPanelDevState extends LitElement {
display: block; display: block;
} }
.entity-id {
display: block;
font-family: var(--ha-font-family-code);
color: var(--secondary-text-color);
padding: 0 8px;
margin-bottom: 8px;
margin-top: 4px;
font-size: var(--ha-font-size-s);
--mdc-icon-size: 14px;
--mdc-icon-button-size: 24px;
display: flex;
align-items: center;
gap: 8px;
}
.entity-id ha-icon-button {
flex: none;
}
.entity-id span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.state-input { .state-input {
margin-top: 16px; margin-top: 16px;
} }
@ -641,11 +673,6 @@ class HaPanelDevState extends LitElement {
display: block; display: block;
--mdc-text-field-fill-color: transparent; --mdc-text-field-fill-color: transparent;
} }
ha-tip {
display: flex;
padding: 8px 0;
text-align: left;
}
th.attributes { th.attributes {
position: relative; position: relative;

View File

@ -3,11 +3,9 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import type { HaEntityComboBoxEntityFilterFunc } from "../../../components/entity/ha-entity-combo-box";
import "../../../components/entity/ha-entity-picker"; import "../../../components/entity/ha-entity-picker";
import type { import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
HaEntityPicker,
HaEntityPickerEntityFilterFunc,
} from "../../../components/entity/ha-entity-picker";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-sortable"; import "../../../components/ha-sortable";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
@ -20,7 +18,7 @@ export class HuiEntityEditor extends LitElement {
@property({ attribute: false }) public entities?: EntityConfig[]; @property({ attribute: false }) public entities?: EntityConfig[];
@property({ attribute: false }) @property({ attribute: false })
public entityFilter?: HaEntityPickerEntityFilterFunc; public entityFilter?: HaEntityComboBoxEntityFilterFunc;
@property() public label?: string; @property() public label?: string;

View File

@ -8,8 +8,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { preventDefault } from "../../../../common/dom/prevent_default"; import { preventDefault } from "../../../../common/dom/prevent_default";
import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { computeStateName } from "../../../../common/entity/compute_state_name"; import { computeStateName } from "../../../../common/entity/compute_state_name";
import type { HaEntityComboBox } from "../../../../components/entity/ha-entity-combo-box";
import "../../../../components/entity/ha-entity-picker"; import "../../../../components/entity/ha-entity-picker";
import type { HaEntityPicker } from "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-sortable"; import "../../../../components/ha-sortable";
@ -33,7 +33,7 @@ export class HuiHeadingBadgesEditor extends LitElement {
@query(".add-container", true) private _addContainer?: HTMLDivElement; @query(".add-container", true) private _addContainer?: HTMLDivElement;
@query("ha-entity-picker") private _entityPicker?: HaEntityPicker; @query("ha-entity-combo-box") private _entityCombobox?: HaEntityComboBox;
@state() private _addMode = false; @state() private _addMode = false;
@ -144,17 +144,16 @@ export class HuiHeadingBadgesEditor extends LitElement {
@opened-changed=${this._openedChanged} @opened-changed=${this._openedChanged}
@input=${stopPropagation} @input=${stopPropagation}
> >
<ha-entity-picker <ha-entity-combo-box
.hass=${this.hass} .hass=${this.hass}
id="input" id="input"
.type=${"entity_id"}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.components.target-picker.add_entity_id" "ui.components.target-picker.add_entity_id"
)} )}
@value-changed=${this._entityPicked} @value-changed=${this._entityPicked}
@click=${preventDefault} @click=${preventDefault}
allow-custom-entity allow-custom-entity
></ha-entity-picker> ></ha-entity-combo-box>
</mwc-menu-surface> </mwc-menu-surface>
`; `;
} }
@ -168,8 +167,8 @@ export class HuiHeadingBadgesEditor extends LitElement {
if (!this._addMode) { if (!this._addMode) {
return; return;
} }
await this._entityPicker?.focus(); await this._entityCombobox?.focus();
await this._entityPicker?.open(); await this._entityCombobox?.open();
this._opened = true; this._opened = true;
} }

View File

@ -566,6 +566,7 @@
"no_match": "No matching entities found", "no_match": "No matching entities found",
"show_entities": "Show entities", "show_entities": "Show entities",
"new_entity": "Create a new entity", "new_entity": "Create a new entity",
"placeholder": "Select an entity",
"create_helper": "Create a new {domain, select, \n undefined {} \n other {{domain} }\n } helper." "create_helper": "Create a new {domain, select, \n undefined {} \n other {{domain} }\n } helper."
}, },
"entity-attribute-picker": { "entity-attribute-picker": {