diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 48ebb5df49..d9d8fc220a 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -11,10 +11,13 @@ import { TemplateResult, } from "lit"; import { customElement, property, state } from "lit/decorators"; +import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { computeDomain } from "../../../common/entity/compute_domain"; import { domainIcon } from "../../../common/entity/domain_icon"; +import { stringCompare } from "../../../common/string/compare"; +import { LocalizeFunc } from "../../../common/translations/localize"; import "../../../components/ha-alert"; import "../../../components/ha-area-picker"; import "../../../components/ha-expansion-panel"; @@ -273,22 +276,26 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { @selected=${this._deviceClassChanged} @closed=${stopPropagation} > - ${this._deviceClassOptions[0].map( - (deviceClass: string) => html` - - ${this.hass.localize( - `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}` - )} + ${this._deviceClassesSorted( + domain, + this._deviceClassOptions[0], + this.hass.localize + ).map( + (entry) => html` + + ${entry.label} ` )}
  • - ${this._deviceClassOptions[1].map( - (deviceClass: string) => html` - - ${this.hass.localize( - `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}` - )} + ${this._deviceClassesSorted( + domain, + this._deviceClassOptions[1], + this.hass.localize + ).map( + (entry) => html` + + ${entry.label} ` )} @@ -719,6 +726,18 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { showOptionsFlowDialog(this, this._helperConfigEntry!); } + private _deviceClassesSorted = memoizeOne( + (domain: string, deviceClasses: string[], localize: LocalizeFunc) => + deviceClasses + .map((entry) => ({ + deviceClass: entry, + label: localize( + `ui.dialogs.entity_registry.editor.device_classes.${domain}.${entry}` + ), + })) + .sort((a, b) => stringCompare(a.label, b.label)) + ); + static get styles(): CSSResultGroup { return [ haStyle,