20240328.0 (#20250)

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240327.0"
+version      = "20240328.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/components/data-table/ha-data-table-labels.ts

@@ -104,13 +104,14 @@ class HaDataTableLabels extends LitElement {
         flex-wrap: nowrap;
       }
       ha-label {
-        --ha-label-background-color: var(--color);
+        --ha-label-background-color: var(--color, var(--grey-color));
         --ha-label-background-opacity: 0.5;
       }
       ha-button-menu {
         border-radius: 10px;
       }
       .plus {
+        --ha-label-background-color: transparent;
         border: 1px solid var(--divider-color);
       }
     `;

src/components/ha-area-filter.ts

@@ -1,12 +1,12 @@
-import { mdiSofa } from "@mdi/js";
+import { mdiTextureBox } from "@mdi/js";
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { showAreaFilterDialog } from "../dialogs/area-filter/show-area-filter-dialog";
 import { HomeAssistant } from "../types";
+import "./ha-icon-next";
 import "./ha-svg-icon";
 import "./ha-textfield";
-import "./ha-icon-next";
 
 export type AreaFilterValue = {
   hidden?: string[];
@@ -51,7 +51,7 @@ export class HaAreaPicker extends LitElement {
         @keydown=${this._edit}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon slot="graphic" .path=${mdiSofa}></ha-svg-icon>
+        <ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>
         <span>${this.label}</span>
         <span slot="secondary">${description}</span>
         <ha-icon-next

src/components/ha-area-floor-picker.ts

@@ -1,10 +1,12 @@
+import { mdiTextureBox } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { LitElement, PropertyValues, TemplateResult, html, nothing } from "lit";
+import { LitElement, PropertyValues, TemplateResult, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
+import { stringCompare } from "../common/string/compare";
 import {
   ScorableTextItem,
   fuzzyFilterSort,
@@ -26,10 +28,10 @@ import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
+import "./ha-floor-icon";
 import "./ha-icon-button";
 import "./ha-list-item";
 import "./ha-svg-icon";
-import { stringCompare } from "../common/string/compare";
 
 type ScorableAreaFloorEntry = ScorableTextItem & FloorAreaEntry;
 
@@ -40,6 +42,7 @@ interface FloorAreaEntry {
   strings: string[];
   type: "floor" | "area";
   hasFloor?: boolean;
+  level: number | null;
 }
 
 const rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) =>
@@ -49,9 +52,14 @@ const rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) =>
       ? "--mdc-list-side-padding-left: 48px;"
       : ""}
   >
-    ${item.icon
-      ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
-      : nothing}
+    ${item.type === "floor"
+      ? html`<ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>`
+      : 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>`;
 
@@ -165,6 +173,7 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
             name: this.hass.localize("ui.components.area-picker.no_areas"),
             icon: null,
             strings: [],
+            level: null,
           },
         ];
       }
@@ -316,6 +325,7 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
             name: this.hass.localize("ui.components.area-picker.no_match"),
             icon: null,
             strings: [],
+            level: null,
           },
         ];
       }
@@ -350,6 +360,7 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
             name: floor.name,
             icon: floor.icon,
             strings: [floor.floor_id, ...floor.aliases, floor.name],
+            level: floor.level,
           });
         }
         output.push(
@@ -360,6 +371,7 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
             icon: area.icon,
             strings: [area.area_id, ...area.aliases, area.name],
             hasFloor: true,
+            level: null,
           }))
         );
       });
@@ -373,6 +385,7 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
           ),
           icon: null,
           strings: [],
+          level: null,
         });
       }
 
@@ -383,6 +396,7 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
           name: area.name,
           icon: area.icon,
           strings: [area.area_id, ...area.aliases, area.name],
+          level: null,
         }))
       );
 

src/components/ha-area-picker.ts

@@ -1,14 +1,15 @@
+import { mdiTextureBox } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
+import { LitElement, PropertyValues, TemplateResult, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import {
-  fuzzyFilterSort,
   ScorableTextItem,
+  fuzzyFilterSort,
 } from "../common/string/filter/sequence-matching";
 import {
   AreaRegistryEntry,
@@ -41,7 +42,7 @@ const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
   >
     ${item.icon
       ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
-      : nothing}
+      : html`<ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>`}
     ${item.name}
   </ha-list-item>`;
 

src/components/ha-filter-categories.ts

@@ -1,13 +1,21 @@
 import { ActionDetail, SelectedDetail } from "@material/mwc-list";
-import { mdiDelete, mdiDotsVertical, mdiPencil, mdiPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDotsVertical,
+  mdiPencil,
+  mdiPlus,
+  mdiTag,
+} from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import {
   CategoryRegistryEntry,
+  createCategoryRegistryEntry,
   deleteCategoryRegistryEntry,
   subscribeCategoryRegistry,
+  updateCategoryRegistryEntry,
 } from "../data/category_registry";
 import { showConfirmationDialog } from "../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
@@ -17,6 +25,7 @@ import type { HomeAssistant } from "../types";
 import "./ha-expansion-panel";
 import "./ha-icon";
 import "./ha-list-item";
+import { stopPropagation } from "../common/dom/stop_propagation";
 
 @customElement("ha-filter-categories")
 export class HaFilterCategories extends SubscribeMixin(LitElement) {
@@ -90,9 +99,13 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
                             slot="graphic"
                             .icon=${category.icon}
                           ></ha-icon>`
-                        : nothing}
+                        : html`<ha-svg-icon
+                            .path=${mdiTag}
+                            slot="graphic"
+                          ></ha-svg-icon>`}
                       ${category.name}
                       <ha-button-menu
+                        @click=${stopPropagation}
                         @action=${this._handleAction}
                         slot="meta"
                         fixed
@@ -163,6 +176,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     showCategoryRegistryDetailDialog(this, {
       scope: this.scope!,
       entry: this._categories.find((cat) => cat.category_id === id),
+      updateEntry: (updates) =>
+        updateCategoryRegistryEntry(this.hass, this.scope!, id, updates),
     });
   }
 
@@ -195,7 +210,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     if (!this.scope) {
       return;
     }
-    showCategoryRegistryDetailDialog(this, { scope: this.scope });
+    showCategoryRegistryDetailDialog(this, {
+      scope: this.scope,
+      createEntry: (values) =>
+        createCategoryRegistryEntry(this.hass, this.scope!, values),
+    });
   }
 
   private _expandedWillChange(ev) {

src/components/ha-filter-entities.ts

@@ -206,6 +206,7 @@ export class HaFilterEntities extends LitElement {
           color: var(--text-accent-color, var(--text-primary-color));
         }
         ha-check-list-item {
+          --mdc-list-item-graphic-margin: 16px;
           width: 100%;
         }
       `,

src/components/ha-filter-floor-areas.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-menu/mwc-menu-surface";
+import { mdiTextureBox } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -15,6 +16,9 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
+import "./ha-floor-icon";
+import "./ha-icon";
+import "./ha-svg-icon";
 
 @customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
@@ -70,12 +74,10 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
                       graphic="icon"
                       @request-selected=${this._handleItemClick}
                     >
-                      ${floor.icon
-                        ? html`<ha-icon
-                            slot="graphic"
-                            .icon=${floor.icon}
-                          ></ha-icon>`
-                        : nothing}
+                      <ha-floor-icon
+                        slot="graphic"
+                        .floor=${floor}
+                      ></ha-floor-icon>
                       ${floor.name}
                     </ha-check-list-item>
                     ${repeat(
@@ -108,7 +110,10 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
     >
       ${area.icon
         ? html`<ha-icon slot="graphic" .icon=${area.icon}></ha-icon>`
-        : nothing}
+        : html`<ha-svg-icon
+            slot="graphic"
+            .path=${mdiTextureBox}
+          ></ha-svg-icon>`}
       ${area.name}
     </ha-check-list-item>`;
   }
@@ -268,6 +273,9 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
           padding: 0px 2px;
           color: var(--text-accent-color, var(--text-primary-color));
         }
+        ha-check-list-item {
+          --mdc-list-item-graphic-margin: 16px;
+        }
         .floor {
           padding-left: 32px;
           padding-inline-start: 32px;

src/components/ha-filter-labels.ts

@@ -168,7 +168,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           color: var(--error-color);
         }
         ha-label {
-          --ha-label-background-color: var(--color);
+          --ha-label-background-color: var(--color, var(--grey-color));
           --ha-label-background-opacity: 0.5;
         }
       `,

src/components/ha-floor-icon.ts

@@ -0,0 +1,56 @@
+import {
+  mdiHome,
+  mdiHomeFloor0,
+  mdiHomeFloor1,
+  mdiHomeFloor2,
+  mdiHomeFloor3,
+  mdiHomeFloorNegative1,
+} from "@mdi/js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { FloorRegistryEntry } from "../data/floor_registry";
+import "./ha-icon";
+import "./ha-svg-icon";
+
+export const floorDefaultIconPath = (
+  floor: Pick<FloorRegistryEntry, "level">
+) => {
+  switch (floor.level) {
+    case 0:
+      return mdiHomeFloor0;
+    case 1:
+      return mdiHomeFloor1;
+    case 2:
+      return mdiHomeFloor2;
+    case 3:
+      return mdiHomeFloor3;
+    case -1:
+      return mdiHomeFloorNegative1;
+  }
+  return mdiHome;
+};
+
+@customElement("ha-floor-icon")
+export class HaFloorIcon extends LitElement {
+  @property({ attribute: false }) public floor!: Pick<
+    FloorRegistryEntry,
+    "icon" | "level"
+  >;
+
+  @property() public icon?: string;
+
+  protected render() {
+    if (this.floor.icon) {
+      return html`<ha-icon .icon=${this.floor.icon}></ha-icon>`;
+    }
+    const defaultPath = floorDefaultIconPath(this.floor);
+
+    return html`<ha-svg-icon .path=${defaultPath}></ha-svg-icon>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-floor-icon": HaFloorIcon;
+  }
+}