20240402.1 (#20326)

home-assistant · Apr 2, 2024 · 4f1cf11 · 4f1cf11
2 parents d3bf0da + a434bfd
commit 4f1cf11
Show file tree

Hide file tree

Showing 38 changed files with 1,032 additions and 287 deletions.
diff --git a/gallery/src/pages/components/ha-control-select.ts b/gallery/src/pages/components/ha-control-select.ts
@@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
         --mdc-icon-size: 24px;
         --control-select-color: var(--state-fan-active-color);
         --control-select-thickness: 130px;
-        --control-select-border-radius: 48px;
+        --control-select-border-radius: 36px;
       }
       .vertical-selects {
         height: 300px;

diff --git a/gallery/src/pages/components/ha-control-slider.ts b/gallery/src/pages/components/ha-control-slider.ts
@@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
         --control-slider-background: #ffcf4c;
         --control-slider-background-opacity: 0.2;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 48px;
+        --control-slider-border-radius: 36px;
       }
       .vertical-sliders {
         height: 300px;

diff --git a/gallery/src/pages/components/ha-control-switch.ts b/gallery/src/pages/components/ha-control-switch.ts
@@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
         --control-switch-on-color: var(--green-color);
         --control-switch-off-color: var(--red-color);
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 48px;
+        --control-switch-border-radius: 36px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }

diff --git a/pyproject.toml b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240402.0"
+version      = "20240402.1"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

diff --git a/src/components/data-table/ha-data-table-labels.ts b/src/components/data-table/ha-data-table-labels.ts
@@ -5,20 +5,22 @@ import { LabelRegistryEntry } from "../../data/label_registry";
 import { computeCssColor } from "../../common/color/compute-color";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-label";
+import { stringCompare } from "../../common/string/compare";
 
 @customElement("ha-data-table-labels")
 class HaDataTableLabels extends LitElement {
   @property({ attribute: false }) public labels!: LabelRegistryEntry[];
 
   protected render(): TemplateResult {
+    const labels = this.labels.sort((a, b) => stringCompare(a.name, b.name));
     return html`
       <ha-chip-set>
         ${repeat(
-          this.labels.slice(0, 2),
+          labels.slice(0, 2),
           (label) => label.label_id,
           (label) => this._renderLabel(label, true)
         )}
-        ${this.labels.length > 2
+        ${labels.length > 2
           ? html`<ha-button-menu
               absolute
               role="button"
@@ -27,10 +29,10 @@ class HaDataTableLabels extends LitElement {
               @closed=${this._handleIconOverflowMenuClosed}
             >
               <ha-label slot="trigger" class="plus" dense>
-                +${this.labels.length - 2}
+                +${labels.length - 2}
               </ha-label>
               ${repeat(
-                this.labels.slice(2),
+                labels.slice(2),
                 (label) => label.label_id,
                 (label) => html`
                   <ha-list-item @click=${this._labelClicked} .item=${label}>

diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts
@@ -21,10 +21,8 @@ import {
   getDeviceEntityDisplayLookup,
 } from "../data/device_registry";
 import { EntityRegistryDisplayEntry } from "../data/entity_registry";
-import {
-  showAlertDialog,
-  showPromptDialog,
-} from "../dialogs/generic/show-dialog-box";
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
+import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
@@ -38,14 +36,18 @@ type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
   html`<ha-list-item
     graphic="icon"
-    class=${classMap({ "add-new": item.area_id === "add_new" })}
+    class=${classMap({ "add-new": item.area_id === ADD_NEW_ID })}
   >
     ${item.icon
       ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
       : html`<ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>`}
     ${item.name}
   </ha-list-item>`;
 
+const ADD_NEW_ID = "___ADD_NEW___";
+const NO_ITEMS_ID = "___NO_ITEMS___";
+const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
+
 @customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -134,20 +136,6 @@ export class HaAreaPicker extends LitElement {
       noAdd: this["noAdd"],
       excludeAreas: this["excludeAreas"]
     ): AreaRegistryEntry[] => {
-      if (!areas.length) {
-        return [
-          {
-            area_id: "no_areas",
-            floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_areas"),
-            picture: null,
-            icon: null,
-            aliases: [],
-            labels: [],
-          },
-        ];
-      }
-
       let deviceEntityLookup: DeviceEntityDisplayLookup = {};
       let inputDevices: DeviceRegistryEntry[] | undefined;
       let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -284,9 +272,9 @@ export class HaAreaPicker extends LitElement {
       if (!outputAreas.length) {
         outputAreas = [
           {
-            area_id: "no_areas",
+            area_id: NO_ITEMS_ID,
             floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_match"),
+            name: this.hass.localize("ui.components.area-picker.no_areas"),
             picture: null,
             icon: null,
             aliases: [],
@@ -300,7 +288,7 @@ export class HaAreaPicker extends LitElement {
         : [
             ...outputAreas,
             {
-              area_id: "add_new",
+              area_id: ADD_NEW_ID,
               floor_id: null,
               name: this.hass.localize("ui.components.area-picker.add_new"),
               picture: null,
@@ -374,20 +362,40 @@ export class HaAreaPicker extends LitElement {
 
     const filteredItems = fuzzyFilterSort<ScorableAreaRegistryEntry>(
       filterString,
-      target.items || []
+      target.items?.filter(
+        (item) => ![NO_ITEMS_ID, ADD_NEW_ID].includes(item.label_id)
+      ) || []
     );
-    if (!this.noAdd && filteredItems?.length === 0) {
-      this._suggestion = filterString;
-      this.comboBox.filteredItems = [
-        {
-          area_id: "add_new_suggestion",
-          name: this.hass.localize(
-            "ui.components.area-picker.add_new_sugestion",
-            { name: this._suggestion }
-          ),
-          picture: null,
-        },
-      ];
+    if (filteredItems.length === 0) {
+      if (!this.noAdd) {
+        this.comboBox.filteredItems = [
+          {
+            area_id: NO_ITEMS_ID,
+            floor_id: null,
+            name: this.hass.localize("ui.components.area-picker.no_match"),
+            icon: null,
+            picture: null,
+            labels: [],
+            aliases: [],
+          },
+        ] as AreaRegistryEntry[];
+      } else {
+        this._suggestion = filterString;
+        this.comboBox.filteredItems = [
+          {
+            area_id: ADD_NEW_SUGGESTION_ID,
+            floor_id: null,
+            name: this.hass.localize(
+              "ui.components.area-picker.add_new_sugestion",
+              { name: this._suggestion }
+            ),
+            icon: "mdi:plus",
+            picture: null,
+            labels: [],
+            aliases: [],
+          },
+        ] as AreaRegistryEntry[];
+      }
     } else {
       this.comboBox.filteredItems = filteredItems;
     }
@@ -405,37 +413,28 @@ export class HaAreaPicker extends LitElement {
     ev.stopPropagation();
     let newValue = ev.detail.value;
 
-    if (newValue === "no_areas") {
+    if (newValue === NO_ITEMS_ID) {
       newValue = "";
+      this.comboBox.setInputValue("");
+      return;
     }
 
-    if (!["add_new_suggestion", "add_new"].includes(newValue)) {
+    if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
       if (newValue !== this._value) {
         this._setValue(newValue);
       }
       return;
     }
 
     (ev.target as any).value = this._value;
-    showPromptDialog(this, {
-      title: this.hass.localize("ui.components.area-picker.add_dialog.title"),
-      text: this.hass.localize("ui.components.area-picker.add_dialog.text"),
-      confirmText: this.hass.localize(
-        "ui.components.area-picker.add_dialog.add"
-      ),
-      inputLabel: this.hass.localize(
-        "ui.components.area-picker.add_dialog.name"
-      ),
-      defaultValue:
-        newValue === "add_new_suggestion" ? this._suggestion : undefined,
-      confirm: async (name) => {
-        if (!name) {
-          return;
-        }
+
+    this.hass.loadFragmentTranslation("config");
+
+    showAreaRegistryDetailDialog(this, {
+      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
+      createEntry: async (values) => {
         try {
-          const area = await createAreaRegistryEntry(this.hass, {
-            name,
-          });
+          const area = await createAreaRegistryEntry(this.hass, values);
           const areas = [...Object.values(this.hass.areas), area];
           this.comboBox.filteredItems = this._getAreas(
             areas,
@@ -455,18 +454,16 @@ export class HaAreaPicker extends LitElement {
         } catch (err: any) {
           showAlertDialog(this, {
             title: this.hass.localize(
-              "ui.components.area-picker.add_dialog.failed_create_area"
+              "ui.components.area-picker.failed_create_area"
             ),
             text: err.message,
           });
         }
       },
-      cancel: () => {
-        this._setValue(undefined);
-        this._suggestion = undefined;
-        this.comboBox.setInputValue("");
-      },
     });
+
+    this._suggestion = undefined;
+    this.comboBox.setInputValue("");
   }
 
   private _setValue(value?: string) {

diff --git a/src/components/ha-floor-picker.ts b/src/components/ha-floor-picker.ts
@@ -23,11 +23,9 @@ import {
   getFloorAreaLookup,
   subscribeFloorRegistry,
 } from "../data/floor_registry";
-import {
-  showAlertDialog,
-  showPromptDialog,
-} from "../dialogs/generic/show-dialog-box";
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { showFloorRegistryDetailDialog } from "../panels/config/areas/show-dialog-floor-registry-detail";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
@@ -386,7 +384,7 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
         this.comboBox.filteredItems = [
           {
             floor_id: NO_FLOORS_ID,
-            name: this.hass.localize("ui.components.floor-picker.no_floors"),
+            name: this.hass.localize("ui.components.floor-picker.no_match"),
             icon: null,
             level: null,
             aliases: [],
@@ -438,25 +436,14 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
     }
 
     (ev.target as any).value = this._value;
-    showPromptDialog(this, {
-      title: this.hass.localize("ui.components.floor-picker.add_dialog.title"),
-      text: this.hass.localize("ui.components.floor-picker.add_dialog.text"),
-      confirmText: this.hass.localize(
-        "ui.components.floor-picker.add_dialog.add"
-      ),
-      inputLabel: this.hass.localize(
-        "ui.components.floor-picker.add_dialog.name"
-      ),
-      defaultValue:
-        newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : undefined,
-      confirm: async (name) => {
-        if (!name) {
-          return;
-        }
+
+    this.hass.loadFragmentTranslation("config");
+
+    showFloorRegistryDetailDialog(this, {
+      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
+      createEntry: async (values) => {
         try {
-          const floor = await createFloorRegistryEntry(this.hass, {
-            name,
-          });
+          const floor = await createFloorRegistryEntry(this.hass, values);
           const floors = [...this._floors!, floor];
           this.comboBox.filteredItems = this._getFloors(
             floors,
@@ -477,18 +464,16 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
         } catch (err: any) {
           showAlertDialog(this, {
             title: this.hass.localize(
-              "ui.components.floor-picker.add_dialog.failed_create_floor"
+              "ui.components.floor-picker.failed_create_floor"
             ),
             text: err.message,
           });
         }
       },
-      cancel: () => {
-        this._setValue(undefined);
-        this._suggestion = undefined;
-        this.comboBox.setInputValue("");
-      },
     });
+
+    this._suggestion = undefined;
+    this.comboBox.setInputValue("");
   }
 
   private _setValue(value?: string) {

diff --git a/src/components/ha-label-picker.ts b/src/components/ha-label-picker.ts
@@ -445,6 +445,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
 
     (ev.target as any).value = this._value;
 
+    this.hass.loadFragmentTranslation("config");
+
     showLabelDetailDialog(this, {
       entry: undefined,
       suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",

diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts
@@ -43,6 +43,7 @@ class HaLabel extends LitElement {
           border-radius: 18px;
           color: var(--ha-label-text-color);
           --mdc-icon-size: 12px;
+          text-wrap: nowrap;
         }
         .content > * {
           position: relative;