Refactor generic pickers (#28570)

2025-12-20 02:38:53 +00:00 · 2025-12-18 09:53:50 +00:00
parent 1adfe63322
commit 7ca681e417
20 changed files with 131 additions and 122 deletions
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -277,13 +277,13 @@ export class HaEntityPicker extends LitElement {
        .disabled=${this.disabled}
        .autofocus=${this.autofocus}
        .allowCustomValue=${this.allowCustomEntity}
-        .label=${this.label}
        .required=${this.required}
+        .label=${this.label}
+        .placeholder=${placeholder}
        .helper=${this.helper}
+        .value=${this.addButton ? undefined : this.value}
        .searchLabel=${this.searchLabel}
        .notFoundLabel=${this._notFoundLabel}
-        .placeholder=${placeholder}
-        .value=${this.addButton ? undefined : this.value}
        .rowRenderer=${this._rowRenderer}
        .getItems=${this._getItems}
        .getAdditionalItems=${this._getAdditionalItems}
@@ -291,6 +291,7 @@ export class HaEntityPicker extends LitElement {
        .searchFn=${this._searchFn}
        .valueRenderer=${this._valueRenderer}
        .searchKeys=${entityComboBoxKeys}
+        use-top-label
        .addButtonLabel=${this.addButton
          ? this.hass.localize("ui.components.entity.entity-picker.add")
          : undefined}
--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@@ -471,14 +471,14 @@ export class HaStatisticPicker extends LitElement {
        .hass=${this.hass}
        .autofocus=${this.autofocus}
        .allowCustomValue=${this.allowCustomEntity}
-        .label=${this.label}
        .disabled=${this.disabled}
+        .label=${this.label}
+        .placeholder=${placeholder}
+        .value=${this.value}
        .notFoundLabel=${this._notFoundLabel}
        .emptyLabel=${this.hass.localize(
          "ui.components.statistic-picker.no_statistics"
        )}
-        .placeholder=${placeholder}
-        .value=${this.value}
        .rowRenderer=${this._rowRenderer}
        .getItems=${this._getItems}
        .getAdditionalItems=${this._getAdditionalItems}
--- a/src/components/ha-addon-picker.ts
+++ b/src/components/ha-addon-picker.ts
@@ -61,6 +61,11 @@ class HaAddonPicker extends LitElement {
  }

  protected render() {
+    const label =
+      this.label === undefined && this.hass
+        ? this.hass.localize("ui.components.addon-picker.addon")
+        : this.label;
+
    if (this._error) {
      return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
    }
@@ -72,14 +77,11 @@ class HaAddonPicker extends LitElement {
      <ha-generic-picker
        .hass=${this.hass}
        .autofocus=${this.autofocus}
-        .placeholder=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.addon-picker.addon")
-          : this.label}
+        .label=${label}
        .valueRenderer=${this._valueRenderer}
        .helper=${this.helper}
        .disabled=${this.disabled}
        .required=${this.required}
-        show-label
        .value=${this.value}
        .getItems=${this._getItems}
        .searchKeys=${SEARCH_KEYS}
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@@ -51,9 +51,6 @@ export class HaAreaPicker extends LitElement {
  @property({ type: Boolean, attribute: "no-add" })
  public noAdd = false;

-  @property({ type: Boolean, attribute: "show-label" })
-  public showLabel = false;
-
  /**
   * Show only areas with entities from specific domains.
   * @type {Array}
@@ -366,16 +363,19 @@ export class HaAreaPicker extends LitElement {
  };

  protected render(): TemplateResult {
-    const placeholder =
-      this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
+    const baseLabel =
+      this.label ?? this.hass.localize("ui.components.area-picker.area");
    const valueRenderer = this._computeValueRenderer(this.hass.areas);

-    let showLabel = this.showLabel;
-    if (this.value) {
+    // Only show label if there's no floor
+    let label: string | undefined = baseLabel;
+    if (this.value && baseLabel) {
      const area = this.hass.areas[this.value];
      if (area) {
        const { floor } = getAreaContext(area, this.hass.floors);
-        showLabel = !floor && this.showLabel;
+        if (floor) {
+          label = undefined;
+        }
      }
    }

@@ -383,14 +383,12 @@ export class HaAreaPicker extends LitElement {
      <ha-generic-picker
        .hass=${this.hass}
        .autofocus=${this.autofocus}
-        .label=${this.label}
+        .label=${label}
        .helper=${this.helper}
        .notFoundLabel=${this._notFoundLabel}
        .emptyLabel=${this.hass.localize("ui.components.area-picker.no_areas")}
        .disabled=${this.disabled}
        .required=${this.required}
-        .placeholder=${placeholder}
-        .showLabel=${showLabel}
        .value=${this.value}
        .getItems=${this._getItems}
        .getAdditionalItems=${this._getAdditionalItems}
--- a/src/components/ha-floor-picker.ts
+++ b/src/components/ha-floor-picker.ts
@@ -389,14 +389,14 @@ export class HaFloorPicker extends LitElement {
      <ha-generic-picker
        .hass=${this.hass}
        .autofocus=${this.autofocus}
+        .disabled=${this.disabled}
        .label=${this.label}
        .helper=${this.helper}
-        .disabled=${this.disabled}
+        .placeholder=${placeholder}
        .notFoundLabel=${this._notFoundLabel}
        .emptyLabel=${this.hass.localize(
          "ui.components.floor-picker.no_floors"
        )}
-        .placeholder=${placeholder}
        .value=${this.value}
        .getItems=${this._getItems}
        .getAdditionalItems=${this._getAdditionalItems}
--- a/src/components/ha-generic-picker.ts
+++ b/src/components/ha-generic-picker.ts
@@ -7,6 +7,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
+import { PickerMixin } from "../mixins/picker-mixin";
 import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../types";
 import { isIosApp } from "../util/is_ios";
@@ -21,39 +22,18 @@ import type {
  PickerComboBoxSearchFn,
 } from "./ha-picker-combo-box";
 import "./ha-picker-field";
-import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";

@customElement("ha-generic-picker")
-export class HaGenericPicker extends LitElement {
+export class HaGenericPicker extends PickerMixin(LitElement) {
  @property({ attribute: false }) public hass?: HomeAssistant;

-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
  @property({ type: Boolean, attribute: "allow-custom-value" })
  public allowCustomValue;

-  @property() public value?: string;
-
-  @property() public icon?: string;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property() public placeholder?: string;
-
  @property({ type: String, attribute: "search-label" })
  public searchLabel?: string;

-  @property({ attribute: "hide-clear-icon", type: Boolean })
-  public hideClearIcon = false;
-
-  @property({ attribute: "show-label", type: Boolean })
-  public showLabel = false;
-
  /** To prevent lags, getItems needs to be memoized */
  @property({ attribute: false })
  public getItems!: (
@@ -67,9 +47,6 @@ export class HaGenericPicker extends LitElement {
  @property({ attribute: false })
  public rowRenderer?: RenderItemFunction<PickerComboBoxItem>;

-  @property({ attribute: false })
-  public valueRenderer?: PickerValueRenderer;
-
  @property({ attribute: false })
  public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;

@@ -119,7 +96,8 @@ export class HaGenericPicker extends LitElement {

  @property({ attribute: "selected-section" }) public selectedSection?: string;

-  @property({ attribute: "unknown-item-text" }) public unknownItemText?: string;
+  @property({ type: Boolean, attribute: "use-top-label" })
+  public useTopLabel = false;

  @query(".container") private _containerElement?: HTMLDivElement;

@@ -150,11 +128,13 @@ export class HaGenericPicker extends LitElement {
  private _unsubscribeTinyKeys?: () => void;

  protected render() {
-    return html`
-      ${this.label
+    // Only show label if it's not a top label and there is a value.
+    const label = this.useTopLabel && this.value ? undefined : this.label;
+
+    return html`<div class="container">
+        ${this.useTopLabel && this.label
          ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
          : nothing}
-      <div class="container">
        <div id="picker">
          <slot name="field">
            ${this.addButtonLabel && !this.value
@@ -180,8 +160,10 @@ export class HaGenericPicker extends LitElement {
                  @click=${this.open}
                  @clear=${this._clear}
                  .icon=${this.icon}
-                  .showLabel=${this.showLabel}
+                  .image=${this.image}
+                  .label=${label}
                  .placeholder=${this.placeholder}
+                  .helper=${this.helper}
                  .value=${this.value}
                  .valueRenderer=${this.valueRenderer}
                  .required=${this.required}
@@ -189,6 +171,7 @@ export class HaGenericPicker extends LitElement {
                  .invalid=${this.invalid}
                  .hideClearIcon=${this.hideClearIcon}
                >
+                  <slot name="start"></slot>
                </ha-picker-field>`}
          </slot>
        </div>
@@ -227,8 +210,7 @@ export class HaGenericPicker extends LitElement {
              </ha-bottom-sheet>`
            : nothing}
      </div>
-      ${this._renderHelper()}
-    `;
+      ${this._renderHelper()}`;
  }

  private _renderComboBox(dialogMode = false) {
@@ -321,7 +303,7 @@ export class HaGenericPicker extends LitElement {
    this._newValue = value;
  }

-  private _clear(e) {
+  private _clear(e: CustomEvent) {
    e.stopPropagation();
    this._setValue(undefined);
  }
--- a/src/components/ha-icon-picker.ts
+++ b/src/components/ha-icon-picker.ts
@@ -113,7 +113,6 @@ export class HaIconPicker extends LitElement {
      <ha-generic-picker
        .hass=${this.hass}
        allow-custom-value
-        show-label
        .getItems=${this._getIconPickerItems}
        .helper=${this.helper}
        .disabled=${this.disabled}
@@ -122,7 +121,7 @@ export class HaIconPicker extends LitElement {
        .invalid=${this.invalid}
        .rowRenderer=${rowRenderer}
        .icon=${this._icon}
-        .placeholder=${this.label}
+        .label=${this.label}
        .value=${this._value}
        .searchFn=${this._filterIcons}
        .notFoundLabel=${this.hass?.localize(
@@ -131,6 +130,7 @@ export class HaIconPicker extends LitElement {
        popover-placement="bottom-start"
        @value-changed=${this._valueChanged}
      >
+        <slot name="start"></slot>
      </ha-generic-picker>
    `;
  }
--- a/src/components/ha-language-picker.ts
+++ b/src/components/ha-language-picker.ts
@@ -116,6 +116,11 @@ export class HaLanguagePicker extends LitElement {
    > `;

  protected render() {
+    const label =
+      this.label ??
+      (this.hass?.localize("ui.components.language-picker.language") ||
+        "Language");
+
    const value =
      this.value ??
      (this.required && !this.disabled ? this._getItems()[0].id : this.value);
@@ -129,10 +134,7 @@ export class HaLanguagePicker extends LitElement {
        .emptyLabel=${this.hass?.localize(
          "ui.components.language-picker.no_languages"
        ) || "No languages available"}
-        .placeholder=${this.label ??
-        (this.hass?.localize("ui.components.language-picker.language") ||
-          "Language")}
-        show-label
+        .label=${label}
        .value=${value}
        .valueRenderer=${this._valueRenderer}
        .disabled=${this.disabled}
--- a/src/components/ha-picker-field.ts
+++ b/src/components/ha-picker-field.ts
@@ -9,7 +9,9 @@ import {
  type TemplateResult,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
+import { PickerMixin } from "../mixins/picker-mixin";
 import { localizeContext } from "../data/context";
 import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
@@ -26,32 +28,7 @@ declare global {
 export type PickerValueRenderer = (value: string) => TemplateResult<1>;

@customElement("ha-picker-field")
-export class HaPickerField extends LitElement {
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property() public value?: string;
-
-  @property() public icon?: string;
-
-  @property() public helper?: string;
-
-  @property() public placeholder?: string;
-
-  @property({ type: Boolean, reflect: true }) public unknown = false;
-
-  @property({ attribute: "unknown-item-text" }) public unknownItemText?: string;
-
-  @property({ attribute: "hide-clear-icon", type: Boolean })
-  public hideClearIcon = false;
-
-  @property({ attribute: "show-label", type: Boolean })
-  public showLabel = false;
-
-  @property({ attribute: false })
-  public valueRenderer?: PickerValueRenderer;
-
+export class HaPickerField extends PickerMixin(LitElement) {
  @property({ type: Boolean, reflect: true }) public invalid = false;

  @query("ha-combo-box-item", true) public item!: HaComboBoxItem;
@@ -66,15 +43,17 @@ export class HaPickerField extends LitElement {
  }

  protected render() {
-    const hasValue = !!this.value?.length;
+    const hasValue = !!this.value;

    const showClearIcon =
      !!this.value && !this.required && !this.disabled && !this.hideClearIcon;

+    const placeholderText = this.placeholder ?? this.label;
+
    const overlineLabel =
-      this.showLabel && hasValue && this.placeholder
+      this.label && hasValue
        ? html`<span slot="overline"
-            >${this.placeholder}${this.required ? " *" : ""}</span
+            >${this.label}${this.required ? " *" : ""}</span
          >`
        : nothing;

@@ -82,17 +61,30 @@ export class HaPickerField extends LitElement {
      ? this.valueRenderer
        ? this.valueRenderer(this.value ?? "")
        : html`<span slot="headline">${this.value}</span>`
-      : this.placeholder
+      : placeholderText
        ? html`<span slot="headline" class="placeholder">
-            ${this.placeholder}${this.required ? " *" : ""}
+            ${placeholderText}${this.required ? " *" : ""}
          </span>`
        : nothing;

    return html`
-      <ha-combo-box-item .disabled=${this.disabled} type="button" compact>
-        ${this.icon
+      <ha-combo-box-item
+        aria-label=${ifDefined(this.label || this.placeholder)}
+        .disabled=${this.disabled}
+        type="button"
+        compact
+      >
+        ${this.image
+          ? html`<img
+              alt=${this.label ?? ""}
+              slot="start"
+              .src=${this.image}
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer"
+            />`
+          : this.icon
            ? html`<ha-icon slot="start" .icon=${this.icon}></ha-icon>`
-          : nothing}
+            : html`<slot name="start"></slot>`}
        ${overlineLabel}${headlineContent}
        ${this.unknown
          ? html`<div slot="supporting-text" class="unknown">
@@ -119,7 +111,7 @@ export class HaPickerField extends LitElement {
    `;
  }

-  private _clear(e) {
+  private _clear(e: CustomEvent) {
    e.stopPropagation();
    fireEvent(this, "clear");
  }
--- a/src/components/ha-selector/ha-selector-entity.ts
+++ b/src/components/ha-selector/ha-selector-entity.ts
@@ -66,12 +66,12 @@ export class HaEntitySelector extends LitElement {
        .hass=${this.hass}
        .value=${this.value}
        .label=${this.label}
+        .placeholder=${this.placeholder}
        .helper=${this.helper}
        .includeEntities=${this.selector.entity?.include_entities}
        .excludeEntities=${this.selector.entity?.exclude_entities}
        .entityFilter=${this._filterEntities}
        .createDomains=${this._createDomains}
-        .placeholder=${this.placeholder}
        .disabled=${this.disabled}
        .required=${this.required}
        allow-custom-entity
@@ -83,13 +83,13 @@ export class HaEntitySelector extends LitElement {
        .hass=${this.hass}
        .value=${this.value}
        .label=${this.label}
+        .placeholder=${this.placeholder}
        .helper=${this.helper}
        .includeEntities=${this.selector.entity.include_entities}
        .excludeEntities=${this.selector.entity.exclude_entities}
        .reorder=${this.selector.entity.reorder ?? false}
        .entityFilter=${this._filterEntities}
        .createDomains=${this._createDomains}
-        .placeholder=${this.placeholder}
        .disabled=${this.disabled}
        .required=${this.required}
      ></ha-entities-picker>
--- a/src/components/ha-selector/ha-selector-icon.ts
+++ b/src/components/ha-selector/ha-selector-icon.ts
@@ -52,7 +52,7 @@ export class HaIconSelector extends LitElement {
        ${!placeholder && stateObj
          ? html`
              <ha-state-icon
-                slot="fallback"
+                slot="start"
                .hass=${this.hass}
                .stateObj=${stateObj}
              ></ha-state-icon>
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -393,6 +393,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
          .rowRenderer=${this._renderRow}
          .getItems=${this._getItems}
          @value-changed=${this._targetPicked}
+          use-top-label
          .addButtonLabel=${this.hass.localize(
            "ui.components.target-picker.add_target"
          )}
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -132,9 +132,9 @@ class HaUserPicker extends LitElement {
        .hass=${this.hass}
        .autofocus=${this.autofocus}
        .label=${this.label}
-        .notFoundLabel=${this._notFoundLabel}
        .placeholder=${placeholder}
        .value=${this.value}
+        .notFoundLabel=${this._notFoundLabel}
        .getItems=${this._getItems}
        .valueRenderer=${this._valueRenderer}
        .rowRenderer=${this._rowRenderer}
--- a/src/mixins/picker-mixin.ts
+++ b/src/mixins/picker-mixin.ts
@@ -0,0 +1,38 @@
+import type { ReactiveElement } from "lit";
+import { property } from "lit/decorators";
+import type { Constructor } from "../types";
+import type { PickerValueRenderer } from "../components/ha-picker-field";
+
+export const PickerMixin = <T extends Constructor<ReactiveElement>>(
+  superClass: T
+) => {
+  class PickerFieldClass extends superClass {
+    @property({ type: Boolean }) public disabled = false;
+
+    @property({ type: Boolean }) public required = false;
+
+    @property() public icon?: string;
+
+    @property() public image?: string;
+
+    @property() public label?: string;
+
+    @property() public placeholder?: string;
+
+    @property() public helper?: string;
+
+    @property() public value?: string;
+
+    @property({ type: Boolean, reflect: true }) public unknown = false;
+
+    @property({ attribute: "unknown-item-text" })
+    public unknownItemText?: string;
+
+    @property({ attribute: "hide-clear-icon", type: Boolean })
+    public hideClearIcon = false;
+
+    @property({ attribute: false })
+    public valueRenderer?: PickerValueRenderer;
+  }
+  return PickerFieldClass;
+};
--- a/src/panels/config/areas/dialog-floor-registry-detail.ts
+++ b/src/panels/config/areas/dialog-floor-registry-detail.ts
@@ -160,7 +160,7 @@ class DialogFloorDetail extends LitElement {
              ${!this._icon
                ? html`
                    <ha-floor-icon
-                      slot="fallback"
+                      slot="start"
                      .floor=${{ level: this._level }}
                    ></ha-floor-icon>
                  `
--- a/src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts
+++ b/src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts
@@ -148,7 +148,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
              @value-changed=${this._iconChanged}
            >
              <ha-domain-icon
-                slot="fallback"
+                slot="start"
                domain=${this._params.domain}
                .hass=${this.hass}
              >
@@ -176,8 +176,10 @@ class DialogAutomationSave extends LitElement implements HassDialog {
            id="category"
            .hass=${this.hass}
            .scope=${this._params.domain}
+            .label=${this.hass.localize(
+              "ui.components.category-picker.category"
+            )}
            .value=${this._entryUpdates.category}
-            show-label
            @value-changed=${this._registryEntryChanged}
          ></ha-category-picker>`
        : nothing}
@@ -194,7 +196,6 @@ class DialogAutomationSave extends LitElement implements HassDialog {
            id="area"
            .hass=${this.hass}
            .value=${this._entryUpdates.area}
-            show-label
            @value-changed=${this._registryEntryChanged}
          ></ha-area-picker>`
        : nothing}
--- a/src/panels/config/category/dialog-assign-category.ts
+++ b/src/panels/config/category/dialog-assign-category.ts
@@ -65,6 +65,9 @@ class DialogAssignCategory extends LitElement {
            <ha-category-picker
              .hass=${this.hass}
              .scope=${this._scope}
+              .label=${this.hass.localize(
+                "ui.components.category-picker.category"
+              )}
              .value=${this._category}
              @value-changed=${this._categoryChanged}
            ></ha-category-picker>
--- a/src/panels/config/category/ha-category-picker.ts
+++ b/src/panels/config/category/ha-category-picker.ts
@@ -39,9 +39,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
  @property({ type: Boolean, attribute: "no-add" })
  public noAdd = false;

-  @property({ type: Boolean, attribute: "show-label" })
-  public showLabel = false;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public required = false;
@@ -183,10 +180,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
  };

  protected render(): TemplateResult {
-    const placeholder =
-      this.placeholder ??
-      this.hass.localize("ui.components.category-picker.category");
-
    const valueRenderer = this._computeValueRenderer(this._categories);

    return html`
@@ -194,13 +187,12 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
        .hass=${this.hass}
        .autofocus=${this.autofocus}
        .label=${this.label}
+        .placeholder=${this.placeholder}
+        .value=${this.value}
        .notFoundLabel=${this._notFoundLabel}
        .emptyLabel=${this.hass.localize(
          "ui.components.category-picker.no_categories"
        )}
-        .placeholder=${placeholder}
-        .showLabel=${this.showLabel}
-        .value=${this.value}
        .getItems=${this._getItems}
        .getAdditionalItems=${this._getAdditionalItems}
        .valueRenderer=${valueRenderer}
--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
@@ -80,7 +80,6 @@ class DialogDeviceRegistryDetail extends LitElement {
            <ha-area-picker
              .hass=${this.hass}
              .value=${this._areaId}
-              show-label
              @value-changed=${this._areaPicked}
            ></ha-area-picker>
            <ha-labels-picker
--- a/src/panels/config/entities/entity-registry-settings-editor.ts
+++ b/src/panels/config/entities/entity-registry-settings-editor.ts
@@ -403,7 +403,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
              ${!this._icon && !stateObj?.attributes.icon && stateObj
                ? html`
                    <ha-state-icon
-                      slot="fallback"
+                      slot="start"
                      .hass=${this.hass}
                      .stateObj=${stateObj}
                    ></ha-state-icon>
@@ -778,7 +778,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
            .hass=${this.hass}
            .value=${this._areaId}
            .disabled=${this.disabled}
-            show-label
            @value-changed=${this._areaPicked}
          ></ha-area-picker>`
        : ""}
@@ -1013,7 +1012,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
              ? html`<ha-area-picker
                  .hass=${this.hass}
                  .value=${this._areaId}
-                  show-label
                  .disabled=${this.disabled}
                  @value-changed=${this._areaPicked}
                ></ha-area-picker>`