Improve labels picker

src/components/ha-generic-picker.ts

@@ -96,19 +96,22 @@ export class HaGenericPicker extends LitElement {
         ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
         : nothing}
       <div class="container">
+        <div id="picker">
+          <slot name="field">
             ${this.addButtonLabel && !this.value
               ? html`<ha-button
-              id="picker"
                   size="small"
                   appearance="filled"
                   @click=${this.open}
                   .disabled=${this.disabled}
                 >
-              <ha-svg-icon .path=${mdiPlaylistPlus} slot="start"></ha-svg-icon>
+                  <ha-svg-icon
+                    .path=${mdiPlaylistPlus}
+                    slot="start"
+                  ></ha-svg-icon>
                   ${this.addButtonLabel}
                 </ha-button>`
               : html`<ha-picker-field
-              id="picker"
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
@@ -123,6 +126,8 @@ export class HaGenericPicker extends LitElement {
                   .valueRenderer=${this.valueRenderer}
                 >
                 </ha-picker-field>`}
+          </slot>
+        </div>
         ${!this._openedNarrow && (this._pickerWrapperOpen || this._opened)
           ? html`
               <wa-popover
@@ -234,7 +239,8 @@ export class HaGenericPicker extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
-  public async open() {
+  public async open(ev?: Event) {
+    ev?.stopPropagation();
     if (this.disabled) {
       return;
     }

src/components/ha-label-picker.ts

@@ -2,7 +2,13 @@ import { mdiLabel, mdiPlus } from "@mdi/js";
 import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  customElement,
+  property,
+  query,
+  queryAssignedElements,
+  state,
+} from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LabelRegistryEntry } from "../data/label_registry";
@@ -84,6 +90,9 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
 
   @state() private _labels?: LabelRegistryEntry[];
 
+  @queryAssignedElements({ flatten: true })
+  private _slotNodes?: NodeListOf<HTMLElement>;
+
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
   public async open() {
@@ -226,6 +235,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
         .valueRenderer=${valueRenderer}
         @value-changed=${this._valueChanged}
       >
+        <slot .slot=${this._slotNodes?.length ? "field" : undefined}></slot>
       </ha-generic-picker>
     `;
   }

src/components/ha-labels-picker.ts

@@ -1,3 +1,4 @@
+import { mdiPlaylistPlus } from "@mdi/js";
 import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -123,10 +124,16 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
     );
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <ha-chip-set
+      <ha-label-picker
-        @click=${this._openPicker}
+        .hass=${this.hass}
-        class=${!labels?.length ? "clickable" : ""}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .placeholder=${this.placeholder}
+        .excludeLabels=${this.value}
+        @value-changed=${this._labelChanged}
       >
+        <ha-chip-set>
           ${labels?.length
             ? repeat(
                 labels,
@@ -155,19 +162,18 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
                   `;
                 }
               )
-          : html`<div class="placeholder">
+            : nothing}
-              ${this.hass.localize("ui.components.label-picker.labels")}
+          <ha-button
-            </div>`}
+            id="picker"
-      </ha-chip-set>
+            size="small"
-      <ha-label-picker
+            appearance="filled"
-        .hass=${this.hass}
+            @click=${this._openPicker}
-        .helper=${this.helper}
             .disabled=${this.disabled}
-        .required=${this.required}
-        .placeholder=${this.placeholder}
-        .excludeLabels=${this.value}
-        @value-changed=${this._labelChanged}
           >
+            <ha-svg-icon .path=${mdiPlaylistPlus} slot="start"></ha-svg-icon>
+            ${this.hass.localize("ui.components.label-picker.add")}
+          </ha-button>
+        </ha-chip-set>
       </ha-label-picker>
     `;
   }
@@ -210,16 +216,9 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
   }
 
   private _openPicker(ev: Event) {
-    const labels = this._sortedLabels(
-      this.value,
-      this._labels,
-      this.hass.locale.language
-    );
-    if (!labels?.length) {
     ev.stopPropagation();
     this.labelPicker.open();
   }
-  }
 
   static styles = css`
     ha-chip-set {
@@ -230,9 +229,6 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
       border-top-left-radius: var(--ha-border-radius-sm);
       padding: var(--ha-space-3);
     }
-    ha-chip-set.clickable {
-      cursor: pointer;
-    }
     .placeholder {
       color: var(--mdc-text-field-label-ink-color);
       display: flex;

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -1,34 +1,34 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
-import type { HassEntity } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/entity/ha-entity-picker";
+import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-alert";
 import "../../../components/ha-aliases-editor";
+import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-floor-picker";
+import "../../../components/ha-icon-picker";
+import "../../../components/ha-labels-picker";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
 import "../../../components/ha-settings-row";
-import "../../../components/ha-icon-picker";
-import "../../../components/ha-floor-picker";
-import "../../../components/entity/ha-entity-picker";
-import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-textfield";
-import "../../../components/ha-labels-picker";
 import type {
   AreaRegistryEntry,
   AreaRegistryEntryMutableParams,
 } from "../../../data/area_registry";
 import { deleteAreaRegistryEntry } from "../../../data/area_registry";
-import type { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
-import { haStyleDialog } from "../../../resources/styles";
-import type { HomeAssistant, ValueChangedEvent } from "../../../types";
-import type { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
 import {
   SENSOR_DEVICE_CLASS_HUMIDITY,
   SENSOR_DEVICE_CLASS_TEMPERATURE,
 } from "../../../data/sensor";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import type { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
+import { haStyleDialog } from "../../../resources/styles";
+import type { HomeAssistant, ValueChangedEvent } from "../../../types";
+import type { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
 
 const cropOptions: CropOptions = {
   round: false,
@@ -139,6 +139,7 @@ class DialogAreaDetail extends LitElement {
       ></ha-floor-picker>
 
       <ha-labels-picker
+        .label=${this.hass.localize("ui.components.label-picker.labels")}
         .hass=${this.hass}
         .value=${this._labels}
         @value-changed=${this._labelsChanged}