Also handle null

src/common/entity/compute_entity_id_format_example.ts

@@ -1,15 +0,0 @@
-import type { EntityIdPart } from "../../data/entity_id_format";
-import { slugify } from "../string/slugify";
-
-export const computeEntityIdFormatExample = (
-  format: EntityIdPart[],
-  examples: Record<EntityIdPart, string>
-): string => {
-  const parts = format
-    .map((item) => examples[item])
-    .filter(Boolean)
-    .map((part) => slugify(part, "_"))
-    .filter(Boolean);
-
-  return parts.join("_") || "unknown";
-};

src/components/buttons/ha-progress-button.ts

@@ -126,7 +126,7 @@ export class HaProgressButton extends LitElement {
       visibility: hidden;
     }
 
-    .progress ha-svg-icon {
+    :host([appearance="brand"]) ha-svg-icon {
       color: var(--white-color);
     }
   `;

src/components/chips/ha-input-chip.ts

@@ -27,7 +27,6 @@ export class HaInputChip extends InputChip {
         );
         --ha-input-chip-selected-container-opacity: 1;
         --md-input-chip-label-text-font: Roboto, sans-serif;
-        --md-input-chip-label-text-weight: 400;
       }
       /** Set the size of mdc icons **/
       ::slotted([slot="icon"]) {

src/components/ha-selector/ha-selector-choose.ts

@@ -141,7 +141,7 @@ export class HaChooseSelector extends LitElement {
   }
 
   private _value(choice?: string): any {
-    if (!this.value) {
+    if (this.value === null || this.value === undefined) {
       return undefined;
     }
     return typeof this.value === "object"

src/data/entity_id_format.ts

@@ -1,34 +0,0 @@
-import type { HomeAssistantApi } from "../types";
-
-export type EntityIdPart = "area" | "device" | "entity" | "floor";
-
-export type EntityIdFormat = EntityIdPart[];
-
-export const DEFAULT_ENTITY_ID_FORMAT: EntityIdFormat = [
-  "area",
-  "device",
-  "entity",
-];
-
-export const isDefaultEntityIdFormat = (format: EntityIdFormat): boolean =>
-  JSON.stringify(format) === JSON.stringify(DEFAULT_ENTITY_ID_FORMAT);
-
-export interface EntityRegistrySettings {
-  entity_id_parts: EntityIdFormat | null;
-}
-
-export const fetchEntityRegistrySettings = (
-  api: HomeAssistantApi
-): Promise<EntityRegistrySettings> =>
-  api.callWS<EntityRegistrySettings>({
-    type: "config/entity_registry/settings/get",
-  });
-
-export const updateEntityRegistrySettings = (
-  api: HomeAssistantApi,
-  updates: Partial<EntityRegistrySettings>
-): Promise<EntityRegistrySettings> =>
-  api.callWS<EntityRegistrySettings>({
-    type: "config/entity_registry/settings/update",
-    ...updates,
-  });

src/panels/config/config-sections.ts

@@ -22,7 +22,6 @@ import {
   mdiPuzzle,
   mdiRadioTower,
   mdiRemote,
-  mdiRenameOutline,
   mdiRobot,
   mdiScrewdriver,
   mdiScriptText,
@@ -495,14 +494,6 @@ export const configSections: Record<string, PageNavigation[]> = {
       component: "backup",
       adminOnly: true,
     },
-    {
-      path: "/config/entity-id-format",
-      translationKey: "entity_id_format",
-      iconPath: mdiRenameOutline,
-      iconColor: "#24a5cb",
-      core: true,
-      adminOnly: true,
-    },
     {
       path: "/config/analytics",
       translationKey: "analytics",

src/panels/config/core/ha-config-section-entity-id-format.ts

@@ -1,51 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../layouts/hass-subpage";
-import type { HomeAssistant } from "../../../types";
-import "./ha-entity-id-format-card";
-
-@customElement("ha-config-section-entity-id-format")
-export class HaConfigSectionEntityIdFormat extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  protected render() {
-    return html`
-      <hass-subpage
-        back-path="/config/system"
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .header=${this.hass.localize(
-          "ui.panel.config.entity_id_format.caption"
-        )}
-      >
-        <div class="content">
-          <ha-entity-id-format-card></ha-entity-id-format-card>
-        </div>
-      </hass-subpage>
-    `;
-  }
-
-  static styles = css`
-    .content {
-      padding: var(--ha-space-7) var(--ha-space-5) 0;
-      max-width: 1040px;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-5);
-    }
-    ha-entity-id-format-card {
-      max-width: 600px;
-      margin: 0 auto;
-      width: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-section-entity-id-format": HaConfigSectionEntityIdFormat;
-  }
-}

src/panels/config/core/ha-entity-id-format-card.ts

@@ -1,227 +0,0 @@
-import { consume, type ContextType } from "@lit/context";
-import { mdiRestore } from "@mdi/js";
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
-import { computeEntityIdFormatExample } from "../../../common/entity/compute_entity_id_format_example";
-import type { LocalizeFunc } from "../../../common/translations/localize";
-import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
-import "../../../components/buttons/ha-progress-button";
-import "../../../components/ha-alert";
-import "../../../components/ha-button";
-import "../../../components/ha-card";
-import "../../../components/ha-svg-icon";
-import { apiContext, configContext } from "../../../data/context";
-import {
-  DEFAULT_ENTITY_ID_FORMAT,
-  fetchEntityRegistrySettings,
-  isDefaultEntityIdFormat,
-  updateEntityRegistrySettings,
-  type EntityIdFormat,
-  type EntityIdPart,
-} from "../../../data/entity_id_format";
-import { haStyle } from "../../../resources/styles";
-import { documentationUrl } from "../../../util/documentation-url";
-import "./ha-entity-id-format-editor";
-
-const EXAMPLE_DOMAIN = "sensor";
-
-@customElement("ha-entity-id-format-card")
-export class HaEntityIdFormatCard extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @state()
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: ContextType<typeof configContext>;
-
-  @state() private _format?: EntityIdFormat;
-
-  @state() private _error?: string;
-
-  protected async firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    try {
-      const settings = await fetchEntityRegistrySettings(this._api);
-      this._format = settings.entity_id_parts ?? DEFAULT_ENTITY_ID_FORMAT;
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  private _examples = memoizeOne(
-    (localize: LocalizeFunc): Record<EntityIdPart, string> => ({
-      area: localize(
-        "ui.panel.config.entity_id_format.card.editor.examples.area"
-      ),
-      device: localize(
-        "ui.panel.config.entity_id_format.card.editor.examples.device"
-      ),
-      entity: localize(
-        "ui.panel.config.entity_id_format.card.editor.examples.entity"
-      ),
-      floor: localize(
-        "ui.panel.config.entity_id_format.card.editor.examples.floor"
-      ),
-    })
-  );
-
-  protected render() {
-    return html`
-      <ha-card
-        outlined
-        .header=${this._localize(
-          "ui.panel.config.entity_id_format.card.header"
-        )}
-      >
-        <div class="card-content">
-          ${
-            this._error
-              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-              : nothing
-          }
-          <p class="description">
-            ${this._localize(
-              "ui.panel.config.entity_id_format.card.description"
-            )}
-            <a
-              href=${documentationUrl(
-                this._config,
-                "/docs/configuration/customizing-devices/"
-              )}
-              target="_blank"
-              rel="noreferrer"
-              >${this._localize(
-                "ui.panel.config.entity_id_format.card.learn_more"
-              )}</a
-            >
-          </p>
-          ${
-            this._format
-              ? html`
-                  <ha-entity-id-format-editor
-                    .value=${this._format}
-                    .label=${this._localize(
-                      "ui.panel.config.entity_id_format.card.editor.label"
-                    )}
-                    @value-changed=${this._formatChanged}
-                  ></ha-entity-id-format-editor>
-                  ${this._renderPreview()}
-                `
-              : nothing
-          }
-        </div>
-        <div class="card-actions">
-          <ha-button
-            appearance="plain"
-            @click=${this._reset}
-            .disabled=${!this._format || isDefaultEntityIdFormat(this._format)}
-          >
-            <ha-svg-icon slot="start" .path=${mdiRestore}></ha-svg-icon>
-            ${this._localize("ui.panel.config.entity_id_format.card.reset")}
-          </ha-button>
-          <ha-progress-button
-            appearance="filled"
-            @click=${this._save}
-            .disabled=${!this._format}
-          >
-            ${this._localize("ui.common.save")}
-          </ha-progress-button>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _renderPreview() {
-    const example = computeEntityIdFormatExample(
-      this._format!,
-      this._examples(this._localize)
-    );
-    return html`
-      <div class="preview">
-        <span class="preview-label">
-          ${this._localize("ui.panel.config.entity_id_format.card.preview")}
-        </span>
-        <code>${EXAMPLE_DOMAIN}.${example}</code>
-      </div>
-    `;
-  }
-
-  private _formatChanged(ev: CustomEvent) {
-    this._format = ev.detail.value;
-  }
-
-  private _reset() {
-    this._format = [...DEFAULT_ENTITY_ID_FORMAT];
-  }
-
-  private async _save(ev: Event) {
-    const button = ev.currentTarget as HaProgressButton;
-    if (button.progress) {
-      return;
-    }
-    button.progress = true;
-    this._error = undefined;
-    try {
-      const format = this._format!;
-      const settings = await updateEntityRegistrySettings(this._api, {
-        entity_id_parts: isDefaultEntityIdFormat(format) ? null : format,
-      });
-      this._format = settings.entity_id_parts ?? DEFAULT_ENTITY_ID_FORMAT;
-      button.actionSuccess();
-    } catch (err: any) {
-      button.actionError();
-      this._error = err.message;
-    } finally {
-      button.progress = false;
-    }
-  }
-
-  static styles = [
-    haStyle,
-    css`
-      :host {
-        display: block;
-      }
-      .description {
-        margin-top: 0;
-        color: var(--secondary-text-color);
-      }
-      .preview {
-        display: flex;
-        flex-direction: column;
-        gap: var(--ha-space-1);
-        margin-top: var(--ha-space-5);
-      }
-      .preview-label {
-        font-weight: 500;
-      }
-      .preview code {
-        display: block;
-        padding: var(--ha-space-3);
-        border-radius: var(--ha-border-radius-md);
-        background-color: var(--secondary-background-color);
-        font-family: var(--ha-font-family-code);
-        overflow-wrap: anywhere;
-      }
-      .card-actions {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-entity-id-format-card": HaEntityIdFormatCard;
-  }
-}

src/panels/config/core/ha-entity-id-format-editor.ts

@@ -1,348 +0,0 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../../common/translations/localize";
-import "../../../components/chips/ha-assist-chip";
-import "../../../components/chips/ha-chip-set";
-import "../../../components/chips/ha-input-chip";
-import "../../../components/ha-combo-box-item";
-import "../../../components/ha-generic-picker";
-import type { HaGenericPicker } from "../../../components/ha-generic-picker";
-import type { PickerComboBoxItem } from "../../../components/ha-picker-combo-box";
-import "../../../components/ha-sortable";
-import "../../../components/ha-svg-icon";
-import type {
-  EntityIdFormat,
-  EntityIdPart,
-} from "../../../data/entity_id_format";
-import type { ValueChangedEvent } from "../../../types";
-
-const STRUCTURAL_TYPES = ["area", "device", "entity", "floor"] as const;
-
-const REQUIRED_TYPES: readonly EntityIdPart[] = ["device", "entity"];
-
-const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
-  <ha-combo-box-item type="button" compact>
-    <span slot="headline">${item.primary}</span>
-  </ha-combo-box-item>
-`;
-
-const encodeType = (type: EntityIdPart) => `___${type}___`;
-
-const decodeType = (value: string): EntityIdPart | undefined => {
-  const type =
-    value.startsWith("___") && value.endsWith("___")
-      ? value.slice(3, -3)
-      : value;
-  return (STRUCTURAL_TYPES as readonly string[]).includes(type)
-    ? (type as EntityIdPart)
-    : undefined;
-};
-
-@customElement("ha-entity-id-format-editor")
-export class HaEntityIdFormatEditor extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @property({ attribute: false }) public value: EntityIdFormat = [];
-
-  @property() public label?: string;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @query("ha-generic-picker") private _picker?: HaGenericPicker;
-
-  private _editIndex?: number;
-
-  protected render() {
-    return html`
-      <div class="container">
-        ${this.label ? html`<label>${this.label}</label>` : nothing}
-        <ha-generic-picker
-          .disabled=${this.disabled}
-          .getItems=${this._getFilteredItems}
-          .rowRenderer=${rowRenderer}
-          .value=${this._getPickerValue()}
-          @value-changed=${this._pickerValueChanged}
-          .searchLabel=${this._localize(
-            "ui.panel.config.entity_id_format.card.editor.search"
-          )}
-        >
-          <div slot="field" class="field">
-            <ha-sortable
-              no-style
-              @item-moved=${this._moveItem}
-              .disabled=${this.disabled}
-              handle-selector="button.primary.action"
-              filter=".add"
-            >
-              <ha-chip-set>
-                ${repeat(
-                  this.value,
-                  (item) => item,
-                  (item: EntityIdPart, idx) => {
-                    const label = this._formatType(item);
-                    if (REQUIRED_TYPES.includes(item)) {
-                      return html`
-                        <ha-assist-chip
-                          filled
-                          class="required"
-                          .label=${label}
-                          .disabled=${this.disabled}
-                        >
-                          <ha-svg-icon
-                            slot="icon"
-                            .path=${mdiDragHorizontalVariant}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                      `;
-                    }
-                    return html`
-                      <ha-input-chip
-                        data-idx=${idx}
-                        @remove=${this._removeItem}
-                        @click=${this._editItem}
-                        .label=${label}
-                        .selected=${!this.disabled}
-                        .disabled=${this.disabled}
-                      >
-                        <ha-svg-icon
-                          slot="icon"
-                          .path=${mdiDragHorizontalVariant}
-                        ></ha-svg-icon>
-                      </ha-input-chip>
-                    `;
-                  }
-                )}
-                ${
-                  this.disabled
-                    ? nothing
-                    : html`
-                        <ha-assist-chip
-                          @click=${this._addItem}
-                          .disabled=${this.disabled}
-                          label=${this._localize(
-                            "ui.panel.config.entity_id_format.card.editor.add"
-                          )}
-                          class="add"
-                        >
-                          <ha-svg-icon
-                            slot="icon"
-                            .path=${mdiPlus}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                      `
-                }
-              </ha-chip-set>
-            </ha-sortable>
-          </div>
-        </ha-generic-picker>
-      </div>
-    `;
-  }
-
-  private async _addItem(ev: Event) {
-    ev.stopPropagation();
-    this._editIndex = undefined;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private async _editItem(ev: Event) {
-    ev.stopPropagation();
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx || "",
-      10
-    );
-    this._editIndex = idx;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private _moveItem(ev: CustomEvent) {
-    ev.stopPropagation();
-    const { oldIndex, newIndex } = ev.detail;
-    const newValue = this.value.concat();
-    const element = newValue.splice(oldIndex, 1)[0];
-    newValue.splice(newIndex, 0, element);
-    this._setValue(newValue);
-  }
-
-  private _removeItem(ev: Event) {
-    ev.stopPropagation();
-    const value = [...this.value];
-    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
-    value.splice(idx, 1);
-    this._setValue(value);
-  }
-
-  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-
-    if (this.disabled || !value) {
-      return;
-    }
-
-    const type = decodeType(value);
-    if (!type) {
-      return;
-    }
-
-    const newValue = [...this.value];
-
-    if (this._editIndex != null) {
-      newValue[this._editIndex] = type;
-      this._editIndex = undefined;
-    } else {
-      newValue.push(type);
-    }
-
-    this._setValue(newValue);
-
-    if (this._picker) {
-      this._picker.value = undefined;
-    }
-  }
-
-  private _setValue(value: EntityIdFormat) {
-    this.value = value;
-    fireEvent(this, "value-changed", { value });
-  }
-
-  private _formatType = (type: EntityIdPart) =>
-    this._localize(`ui.components.entity.entity-name-picker.types.${type}`);
-
-  private _getItems = memoizeOne(
-    (localize: LocalizeFunc): PickerComboBoxItem[] =>
-      STRUCTURAL_TYPES.map((type) => {
-        const primary = localize(
-          `ui.components.entity.entity-name-picker.types.${type}`
-        );
-        const id = encodeType(type);
-        return {
-          id,
-          primary,
-          search_labels: { primary, id },
-          sorting_label: primary,
-        };
-      })
-  );
-
-  private _getPickerValue(): string | undefined {
-    if (this._editIndex != null) {
-      const item = this.value[this._editIndex];
-      return item ? encodeType(item) : undefined;
-    }
-    return undefined;
-  }
-
-  private _getFilteredItems = (): PickerComboBoxItem[] => {
-    const items = this._getItems(this._localize);
-    const currentValue =
-      this._editIndex != null
-        ? encodeType(this.value[this._editIndex])
-        : undefined;
-
-    const usedValues = new Set(this.value.map((item) => encodeType(item)));
-
-    return items.filter(
-      (item) => !usedValues.has(item.id) || item.id === currentValue
-    );
-  };
-
-  static styles = css`
-    :host {
-      position: relative;
-      width: 100%;
-    }
-
-    .container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-2);
-    }
-
-    label {
-      display: block;
-      font-weight: 500;
-    }
-
-    ha-generic-picker {
-      width: 100%;
-    }
-
-    .field {
-      position: relative;
-      background-color: var(--mdc-text-field-fill-color, whitesmoke);
-      border-radius: var(--ha-border-radius-sm);
-      border-end-end-radius: var(--ha-border-radius-square);
-      border-end-start-radius: var(--ha-border-radius-square);
-    }
-    .field: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)
-      );
-    }
-    :host([disabled]) .field:after {
-      background-color: var(
-        --mdc-text-field-disabled-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-    .field:focus-within:after {
-      height: 2px;
-      background-color: var(--mdc-theme-primary);
-    }
-
-    ha-chip-set {
-      padding: var(--ha-space-3);
-    }
-
-    ha-assist-chip.required {
-      --ha-assist-chip-filled-container-color: rgba(
-        var(--rgb-primary-text-color),
-        0.15
-      );
-    }
-
-    .add {
-      order: 1;
-    }
-
-    .sortable-fallback {
-      display: none;
-      opacity: 0;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
-
-    .sortable-drag {
-      cursor: grabbing;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-entity-id-format-editor": HaEntityIdFormatEditor;
-  }
-}

src/panels/config/ha-panel-config.ts

@@ -170,10 +170,6 @@ class HaPanelConfig extends HassRouterPage {
         tag: "ha-config-section-ai-tasks",
         load: () => import("./core/ha-config-section-ai-tasks"),
       },
-      "entity-id-format": {
-        tag: "ha-config-section-entity-id-format",
-        load: () => import("./core/ha-config-section-entity-id-format"),
-      },
       zha: {
         tag: "zha-config-dashboard-router",
         load: () =>

src/translations/en.json

@@ -8599,28 +8599,6 @@
           "caption": "AI tasks",
           "description": "Configure AI suggestions and task preferences"
         },
-        "entity_id_format": {
-          "caption": "Entity ID format",
-          "description": "Manage the format of newly created entity IDs",
-          "card": {
-            "header": "Entity ID format for new entities",
-            "description": "Entity IDs are used to reference entities in automations, scripts, and dashboards. This format only applies when a new entity is created. Using it is optional, and you can still rename each entity ID afterwards in its settings",
-            "learn_more": "Learn more",
-            "preview": "Preview",
-            "reset": "Reset to default",
-            "editor": {
-              "label": "Format",
-              "add": "Add",
-              "search": "Search part",
-              "examples": {
-                "area": "Living room",
-                "device": "Thermostat",
-                "entity": "Temperature",
-                "floor": "Ground floor"
-              }
-            }
-          }
-        },
         "labs": {
           "caption": "Labs",
           "custom_integration": "Custom integration",