Add user selector with multiple and system option

hassio/src/components/hassio-filter-addons.ts

@@ -1,9 +1,8 @@
 import Fuse from "fuse.js";
-import type { IFuseOptions } from "fuse.js";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 
 export function filterAndSort(addons: StoreAddon[], filter: string) {
-  const options: IFuseOptions<StoreAddon> = {
+  const options: Fuse.IFuseOptions<StoreAddon> = {
     keys: ["name", "description", "slug"],
     isCaseSensitive: false,
     minMatchCharLength: 2,

package.json

@@ -111,7 +111,7 @@
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
-    "fuse.js": "7.0.0",
+    "fuse.js": "6.6.2",
     "google-timezones-json": "1.2.0",
     "hls.js": "1.4.12",
     "home-assistant-js-websocket": "9.1.0",
@@ -138,7 +138,7 @@
     "tinykeys": "2.1.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "1.0.37",
+    "ua-parser-js": "1.0.36",
     "unfetch": "5.0.0",
     "vis-data": "7.1.7",
     "vis-network": "9.1.8",
@@ -241,7 +241,7 @@
     "systemjs": "6.14.2",
     "tar": "6.2.0",
     "terser-webpack-plugin": "5.3.9",
-    "ts-lit-plugin": "2.0.1",
+    "ts-lit-plugin": "2.0.0",
     "typescript": "5.2.2",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",

pyproject.toml

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

src/common/util/compute_rtl.ts

@@ -23,7 +23,6 @@ export function computeDirectionStyles(isRTL: boolean, element: LitElement) {
 }
 
 export function setDirectionStyles(direction: string, element: LitElement) {
-  document.dir = direction;
   element.style.direction = direction;
   element.style.setProperty("--direction", direction);
   element.style.setProperty(

src/components/chart/chart-date-adapter.ts

@@ -134,7 +134,7 @@ _adapters._date.override({
           this.options.config
         );
       case "week":
-        return formatDateVeryShort(
+        return formatDate(
           new Date(time),
           this.options.locale,
           this.options.config

src/components/chart/statistics-chart.ts

@@ -73,8 +73,6 @@ export class StatisticsChart extends LitElement {
 
   @property({ type: Boolean }) public isLoadingData = false;
 
-  @property() public period?: string;
-
   @state() private _chartData: ChartData = { datasets: [] };
 
   @state() private _statisticIds: string[] = [];
@@ -94,12 +92,7 @@ export class StatisticsChart extends LitElement {
   }
 
   public willUpdate(changedProps: PropertyValues) {
-    if (
-      !this.hasUpdated ||
-      changedProps.has("unit") ||
-      changedProps.has("period") ||
-      changedProps.has("chartType")
-    ) {
+    if (!this.hasUpdated || changedProps.has("unit")) {
       this._createOptions();
     }
     if (
@@ -167,7 +160,6 @@ export class StatisticsChart extends LitElement {
             },
           },
           ticks: {
-            source: this.chartType === "bar" ? "data" : undefined,
             maxRotation: 0,
             sampleSize: 5,
             autoSkipPadding: 20,
@@ -181,12 +173,6 @@ export class StatisticsChart extends LitElement {
           },
           time: {
             tooltipFormat: "datetime",
-            unit:
-              this.chartType === "bar" &&
-              this.period &&
-              ["hour", "day", "week", "month"].includes(this.period)
-                ? this.period
-                : undefined,
           },
         },
         y: {

src/components/entity/ha-entities-picker.ts

@@ -71,7 +71,8 @@ class HaEntitiesPickerLight extends LitElement {
   @property({ attribute: "picked-entity-label" })
   public pickedEntityLabel?: string;
 
-  @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
+  @property({ attribute: "pick-entity-label" })
+  public pickEntityLabel?: string;
 
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 

src/components/ha-button.ts

@@ -21,7 +21,8 @@ export class HaButton extends Button {
         display: flex;
       }
       .slot-container {
-        overflow: var(--button-slot-container-overflow, visible);
+        width: 100%;
+        overflow: hidden;
       }
     `,
   ];

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

@@ -0,0 +1,65 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { UserSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../user/ha-user-picker";
+import "../user/ha-users-picker";
+
+@customElement("ha-selector-user")
+export class HaUserSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: UserSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    if (this.selector.user?.multiple) {
+      return html`
+        <ha-users-picker
+          .hass=${this.hass}
+          .value=${this.value}
+          .label=${this.label}
+          .helper=${this.helper}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .includeSystem=${this.selector.user.include_system}
+        ></ha-users-picker>
+      `;
+    }
+
+    return html`
+      <ha-user-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .includeSystem=${this.selector.user?.include_system}
+      ></ha-user-picker>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-user-picker {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-user": HaUserSelector;
+  }
+}

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

@@ -50,6 +50,7 @@ const LOAD_ELEMENTS = {
   color_temp: () => import("./ha-selector-color-temp"),
   ui_action: () => import("./ha-selector-ui-action"),
   ui_color: () => import("./ha-selector-ui-color"),
+  user: () => import("./ha-selector-user"),
 };
 
 const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);

src/components/user/ha-user-picker.ts

@@ -1,68 +1,84 @@
-import "@material/mwc-list/mwc-list-item";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property } from "lit/decorators";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
+import {
+  fuzzyFilterSort,
+  ScorableTextItem,
+} from "../../common/string/filter/sequence-matching";
 import { fetchUsers, User } from "../../data/user";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant, ValueChangedEvent } from "../../types";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
+import "../ha-list-item";
 import "../ha-select";
 import "./ha-user-badge";
-import "../ha-list-item";
+
+type ScorableUser = ScorableTextItem & User;
 
 class HaUserPicker extends LitElement {
-  public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 
-  @property() public noUserLabel?: string;
+  @property() public value?: string;
 
-  @property() public value = "";
+  @property() public helper?: string;
 
-  @property() public users?: User[];
+  @property({ attribute: false }) public users?: User[];
 
-  @property({ type: Boolean }) public disabled = false;
+  @property({ type: Boolean }) public disabled?: boolean;
 
-  private _sortedUsers = memoizeOne((users?: User[]) => {
-    if (!users) {
-      return [];
+  @property({ type: Boolean }) public required?: boolean;
+
+  @state() private _opened?: boolean;
+
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+
+  @property({ type: Boolean, attribute: "include-system" })
+  public includeSystem?: boolean;
+
+  private _init = false;
+
+  private _getUserItems = memoizeOne(
+    (users: User[] | undefined): ScorableUser[] => {
+      if (!users) {
+        return [];
+      }
+
+      return users
+        .sort((a, b) =>
+          stringCompare(a.name, b.name, this.hass!.locale.language)
+        )
+        .map((user) => ({
+          ...user,
+          strings: [user.name, ...(user.username ? [user.username] : [])],
+        }));
     }
+  );
 
-    return users
-      .filter((user) => !user.system_generated)
-      .sort((a, b) =>
-        stringCompare(a.name, b.name, this.hass!.locale.language)
-      );
-  });
+  private _filteredUsers = memoizeOne(
+    (users: User[], includeSystem?: boolean) =>
+      users.filter((user) => includeSystem || !user.system_generated)
+  );
 
-  protected render(): TemplateResult {
-    return html`
-      <ha-select
-        .label=${this.label}
-        .disabled=${this.disabled}
-        .value=${this.value}
-        @selected=${this._userChanged}
-      >
-        ${this.users?.length === 0
-          ? html`<mwc-list-item value="">
-              ${this.noUserLabel ||
-              this.hass?.localize("ui.components.user-picker.no_user")}
-            </mwc-list-item>`
-          : ""}
-        ${this._sortedUsers(this.users).map(
-          (user) => html`
-            <ha-list-item graphic="avatar" .value=${user.id}>
-              <ha-user-badge
-                .hass=${this.hass}
-                .user=${user}
-                slot="graphic"
-              ></ha-user-badge>
-              ${user.name}
-            </ha-list-item>
-          `
-        )}
-      </ha-select>
-    `;
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
+  }
+
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
   }
 
   protected firstUpdated(changedProps) {
@@ -74,25 +90,104 @@ class HaUserPicker extends LitElement {
     }
   }
 
-  private _userChanged(ev) {
-    const newValue = ev.target.value;
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (
+      (!this._init && this.users) ||
+      (this._init && changedProps.has("_opened") && this._opened)
+    ) {
+      this._init = true;
+      const filteredUsers = this._filteredUsers(
+        this.users ?? [],
+        this.includeSystem
+      );
+      const items = this._getUserItems(filteredUsers);
 
-    if (newValue !== this.value) {
-      this.value = newValue;
-      setTimeout(() => {
-        fireEvent(this, "value-changed", { value: newValue });
-        fireEvent(this, "change");
-      }, 0);
+      this.comboBox.items = items;
+      this.comboBox.filteredItems = items;
     }
   }
 
+  private _rowRenderer: ComboBoxLitRenderer<User> = (item) => html`
+    <ha-list-item
+      graphic="avatar"
+      .value=${item.id}
+      .twoline=${!!item.username}
+    >
+      <ha-user-badge
+        .hass=${this.hass}
+        .user=${item}
+        slot="graphic"
+      ></ha-user-badge>
+      ${item.name}
+      <span slot="secondary">${item.username}</span>
+    </ha-list-item>
+  `;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.user-picker.user")
+          : this.label}
+        .value=${this._value}
+        .helper=${this.helper}
+        .renderer=${this._rowRenderer}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        item-id-path="id"
+        item-value-path="id"
+        item-label-path="name"
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+        @filter-changed=${this._filterChanged}
+      >
+      </ha-combo-box>
+    `;
+  }
+
+  private _filterChanged(ev: CustomEvent): void {
+    const target = ev.target as HaComboBox;
+    const filterString = ev.detail.value.toLowerCase();
+    target.filteredItems = filterString.length
+      ? fuzzyFilterSort<ScorableUser>(filterString, target.items || [])
+      : target.items;
+  }
+
+  private _valueChanged(ev: ValueChangedEvent<string>) {
+    ev.stopPropagation();
+    let newValue = ev.detail.value;
+
+    if (newValue === "no_users") {
+      newValue = "";
+    }
+
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        display: inline-block;
-      }
-      mwc-list {
-        display: block;
+      ha-select {
+        width: 100%;
       }
     `;
   }

src/components/user/ha-users-picker.ts

@@ -1,5 +1,4 @@
-import { mdiClose } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { guard } from "lit/directives/guard";
 import memoizeOne from "memoize-one";
@@ -15,6 +14,10 @@ class HaUsersPickerLight extends LitElement {
 
   @property() public value?: string[];
 
+  @property({ type: Boolean }) public disabled?: boolean;
+
+  @property({ type: Boolean }) public required?: boolean;
+
   @property({ attribute: "picked-user-label" })
   public pickedUserLabel?: string;
 
@@ -24,6 +27,9 @@ class HaUsersPickerLight extends LitElement {
   @property({ attribute: false })
   public users?: User[];
 
+  @property({ type: Boolean, attribute: "include-system" })
+  public includeSystem?: boolean;
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (this.users === undefined) {
@@ -38,69 +44,80 @@ class HaUsersPickerLight extends LitElement {
       return nothing;
     }
 
-    const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
+    const filteredUsers = this._filteredUsers(this.users, this.includeSystem);
+    const selectedUsers = this._selectedUsers(filteredUsers, this.value);
+    const notSelectedUsers = this._notSelectedUsers(filteredUsers, this.value);
+
     return html`
-      ${guard(
-        [notSelectedUsers],
-        () =>
-          this.value?.map(
-            (user_id, idx) => html`
-              <div>
-                <ha-user-picker
-                  .label=${this.pickedUserLabel}
-                  .noUserLabel=${this.hass!.localize(
-                    "ui.components.user-picker.remove_user"
-                  )}
-                  .index=${idx}
-                  .hass=${this.hass}
-                  .value=${user_id}
-                  .users=${this._notSelectedUsersAndSelected(
-                    user_id,
-                    this.users,
-                    notSelectedUsers
-                  )}
-                  @value-changed=${this._userChanged}
-                ></ha-user-picker>
-                <ha-icon-button
-                  .userId=${user_id}
-                  .label=${this.hass!.localize(
-                    "ui.components.user-picker.remove_user"
-                  )}
-                  .path=${mdiClose}
-                  @click=${this._removeUser}
-                >
-                  ></ha-icon-button
-                >
-              </div>
-            `
-          )
+      ${guard([notSelectedUsers], () =>
+        selectedUsers.map(
+          (user, idx) => html`
+            <div>
+              <ha-user-picker
+                .label=${this.pickedUserLabel}
+                .index=${idx}
+                .hass=${this.hass}
+                .value=${user.id}
+                .users=${this._notSelectedUsersAndCurrent(
+                  user,
+                  filteredUsers,
+                  notSelectedUsers
+                )}
+                @value-changed=${this._userChanged}
+                .disabled=${this.disabled}
+                .includeSystem=${this.includeSystem}
+              ></ha-user-picker>
+            </div>
+          `
+        )
       )}
+      <div>${this._renderPicker(notSelectedUsers)}</div>
+    `;
+  }
+
+  private _renderPicker(users?: User[]) {
+    return html`
       <ha-user-picker
-        .label=${this.pickUserLabel ||
-        this.hass!.localize("ui.components.user-picker.add_user")}
+        .label=${this.pickUserLabel}
         .hass=${this.hass}
-        .users=${notSelectedUsers}
-        .disabled=${!notSelectedUsers?.length}
+        .users=${users}
         @value-changed=${this._addUser}
+        .disabled=${this.disabled || users?.length === 0}
+        .required=${this.required}
+        .includeSystem=${this.includeSystem}
       ></ha-user-picker>
     `;
   }
 
-  private _notSelectedUsers = memoizeOne(
-    (users?: User[], currentUsers?: string[]) =>
-      currentUsers
-        ? users?.filter(
-            (user) => !user.system_generated && !currentUsers.includes(user.id)
-          )
-        : users?.filter((user) => !user.system_generated)
+  private _filteredUsers = memoizeOne(
+    (users: User[], includeSystem?: boolean) =>
+      users.filter((user) => includeSystem || !user.system_generated)
   );
 
-  private _notSelectedUsersAndSelected = (
-    userId: string,
+  private _selectedUsers = memoizeOne(
+    (users: User[], selectedUserIds?: string[]) => {
+      if (!selectedUserIds) {
+        return [];
+      }
+      return users.filter((user) => selectedUserIds.includes(user.id));
+    }
+  );
+
+  private _notSelectedUsers = memoizeOne(
+    (users: User[], selectedUserIds?: string[]) => {
+      if (!selectedUserIds) {
+        return users;
+      }
+      return users.filter((user) => !selectedUserIds.includes(user.id));
+    }
+  );
+
+  private _notSelectedUsersAndCurrent = (
+    currentUser: User,
     users?: User[],
     notSelected?: User[]
   ) => {
-    const selectedUser = users?.find((user) => user.id === userId);
+    const selectedUser = users?.find((user) => user.id === currentUser.id);
     if (selectedUser) {
       return notSelected ? [...notSelected, selectedUser] : [selectedUser];
     }
@@ -123,7 +140,7 @@ class HaUsersPickerLight extends LitElement {
     const index = (event.currentTarget as any).index;
     const newValue = event.detail.value;
     const newUsers = [...this._currentUsers];
-    if (newValue === "") {
+    if (newValue === undefined) {
       newUsers.splice(index, 1);
     } else {
       newUsers.splice(index, 1, newValue);
@@ -146,22 +163,11 @@ class HaUsersPickerLight extends LitElement {
     this._updateUsers([...currentUsers, toAdd]);
   }
 
-  private _removeUser(event) {
-    const userId = (event.currentTarget as any).userId;
-    this._updateUsers(this._currentUsers.filter((user) => user !== userId));
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-      }
-      div {
-        display: flex;
-        align-items: center;
-      }
-    `;
-  }
+  static override styles = css`
+    div {
+      margin-top: 8px;
+    }
+  `;
 }
 
 declare global {

src/data/automation_i18n.ts

@@ -642,7 +642,10 @@ const tryDescribeTrigger = (
   }
 
   // Device Trigger
-  if (trigger.platform === "device" && trigger.device_id) {
+  if (trigger.platform === "device") {
+    if (!trigger.device_id) {
+      return "Device trigger";
+    }
     const config = trigger as DeviceTrigger;
     const localized = localizeDeviceAutomationTrigger(
       hass,
@@ -658,12 +661,9 @@ const tryDescribeTrigger = (
     }`;
   }
 
-  return (
-    hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.${trigger.platform}.label`
-    ) ||
-    hass.localize(`ui.panel.config.automation.editor.triggers.unknown_trigger`)
-  );
+  return `${
+    trigger.platform ? trigger.platform.replace(/_/g, " ") : "Unknown"
+  } trigger`;
 };
 
 export const describeCondition = (
@@ -1074,7 +1074,10 @@ const tryDescribeCondition = (
     );
   }
 
-  if (condition.condition === "device" && condition.device_id) {
+  if (condition.condition === "device") {
+    if (!condition.device_id) {
+      return "Device condition";
+    }
     const config = condition as DeviceCondition;
     const localized = localizeDeviceAutomationCondition(
       hass,
@@ -1090,16 +1093,14 @@ const tryDescribeCondition = (
     }`;
   }
 
-  if (condition.condition === "trigger" && condition.id) {
+  if (condition.condition === "trigger") {
+    if (!condition.id) {
+      return "Trigger condition";
+    }
     return `When triggered by ${condition.id}`;
   }
 
-  return (
-    hass.localize(
-      `ui.panel.config.automation.editor.conditions.type.${condition.condition}.label`
-    ) ||
-    hass.localize(
-      `ui.panel.config.automation.editor.conditions.unknown_condition`
-    )
-  );
+  return `${
+    condition.condition ? condition.condition.replace(/_/g, " ") : "Unknown"
+  } condition`;
 };

src/data/calendar.ts

@@ -139,8 +139,7 @@ export const getCalendars = (hass: HomeAssistant): Calendar[] =>
     .filter(
       (eid) =>
         computeDomain(eid) === "calendar" &&
-        !isUnavailableState(hass.states[eid].state) &&
-        hass.entities[eid]?.hidden !== true
+        !isUnavailableState(hass.states[eid].state)
     )
     .sort()
     .map((eid, idx) => ({

src/data/selector.ts

@@ -52,7 +52,8 @@ export type Selector =
   | TTSSelector
   | TTSVoiceSelector
   | UiActionSelector
-  | UiColorSelector;
+  | UiColorSelector
+  | UserSelector;
 
 export interface ActionSelector {
   action: {
@@ -392,6 +393,13 @@ export interface UiColorSelector {
   ui_color: {} | null;
 }
 
+export interface UserSelector {
+  user: {
+    multiple?: boolean;
+    include_system?: boolean;
+  } | null;
+}
+
 export const expandAreaTarget = (
   hass: HomeAssistant,
   areaId: string,

src/data/todo.ts

@@ -61,12 +61,7 @@ export const updateItem = (
   entity_id: string,
   item: TodoItem
 ): Promise<ServiceCallResponse> =>
-  hass.callService(
-    "todo",
-    "update_item",
-    { item: item.uid, rename: item.summary, status: item.status },
-    { entity_id }
-  );
+  hass.callService("todo", "update_item", item, { entity_id });
 
 export const createItem = (
   hass: HomeAssistant,
@@ -75,9 +70,9 @@ export const createItem = (
 ): Promise<ServiceCallResponse> =>
   hass.callService(
     "todo",
-    "add_item",
+    "create_item",
     {
-      item: summary,
+      summary,
     },
     { entity_id }
   );
@@ -89,9 +84,9 @@ export const deleteItem = (
 ): Promise<ServiceCallResponse> =>
   hass.callService(
     "todo",
-    "remove_item",
+    "delete_item",
     {
-      item: uid,
+      uid,
     },
     { entity_id }
   );

src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts

@@ -415,7 +415,6 @@ export class HaMoreInfoClimateTemperature extends LitElement {
           line-height: 64px;
           letter-spacing: -0.25px;
           margin: 0;
-          direction: ltr;
         }
         .temperature span {
           display: inline-flex;

src/dialogs/more-info/controls/more-info-climate.ts

@@ -434,7 +434,6 @@ class MoreInfoClimate extends LitElement {
           font-size: 22px;
           font-weight: 500;
           line-height: 28px;
-          direction: ltr;
         }
         ha-select {
           width: 100%;

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -250,7 +250,6 @@ class MoreInfoHumidifier extends LitElement {
           font-size: 22px;
           font-weight: 500;
           line-height: 28px;
-          direction: ltr;
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-water_heater.ts

@@ -243,7 +243,6 @@ class MoreInfoWaterHeater extends LitElement {
           font-size: 22px;
           font-weight: 500;
           line-height: 28px;
-          direction: ltr;
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-weather.ts

@@ -356,7 +356,6 @@ class MoreInfoWeather extends LitElement {
       .templow {
         min-width: 48px;
         text-align: right;
-        direction: ltr;
       }
 
       .templow {

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -342,7 +342,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   private _duplicateOption(ev) {
     const index = (ev.target as any).idx;
-    this._createOption(deepClone(ensureArray(this.action.choose)[index]));
+    this._addOption(deepClone(ensureArray(this.action.choose)[index]));
   }
 
   protected firstUpdated() {
@@ -399,15 +399,11 @@ export class HaChooseAction extends LitElement implements ActionElement {
     });
   }
 
-  private _addOption() {
-    this._createOption({ conditions: [], sequence: [] });
-  }
-
-  private _createOption(opt: ChooseActionChoice) {
+  private _addOption(opt?: ChooseActionChoice) {
     const choose = this.action.choose
       ? [...ensureArray(this.action.choose)]
       : [];
-    choose.push(opt);
+    choose.push(opt ?? { conditions: [], sequence: [] });
     fireEvent(this, "value-changed", {
       value: { ...this.action, choose },
     });

src/panels/config/integrations/dialog-add-integration.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list";
-import Fuse, { IFuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
 import { HassConfig } from "home-assistant-js-websocket";
 import {
   css,
@@ -239,7 +239,7 @@ class AddIntegrationDialog extends LitElement {
       });
 
       if (filter) {
-        const options: IFuseOptions<IntegrationListItem> = {
+        const options: Fuse.IFuseOptions<IntegrationListItem> = {
           keys: [
             { name: "name", weight: 5 },
             { name: "domain", weight: 5 },

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -1,7 +1,6 @@
 import { ActionDetail } from "@material/mwc-list";
 import { mdiFilterVariant, mdiPlus } from "@mdi/js";
 import Fuse from "fuse.js";
-import type { IFuseOptions } from "fuse.js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -158,7 +157,7 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
       const disabled: ConfigEntryExtended[] = [];
       const integrations: ConfigEntryExtended[] = [];
       if (filter) {
-        const options: IFuseOptions<ConfigEntryExtended> = {
+        const options: Fuse.IFuseOptions<ConfigEntryExtended> = {
           keys: ["domain", "localized_domain_name", "title"],
           isCaseSensitive: false,
           minMatchCharLength: 2,
@@ -202,7 +201,7 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
     ): DataEntryFlowProgressExtended[] => {
       let filteredEntries: DataEntryFlowProgressExtended[];
       if (filter) {
-        const options: IFuseOptions<DataEntryFlowProgressExtended> = {
+        const options: Fuse.IFuseOptions<DataEntryFlowProgressExtended> = {
           keys: ["handler", "localized_title"],
           isCaseSensitive: false,
           minMatchCharLength: 2,

src/panels/developer-tools/state/developer-tools-state.ts

@@ -1,39 +1,38 @@
+import { addHours } from "date-fns/esm";
+import "@material/mwc-button";
 import {
   mdiClipboardTextMultipleOutline,
   mdiInformationOutline,
   mdiRefresh,
 } from "@mdi/js";
-import { addHours } from "date-fns/esm";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   HassEntities,
   HassEntity,
   HassEntityAttributeBase,
 } from "home-assistant-js-websocket";
-import { dump } from "js-yaml";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { dump } from "js-yaml";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
-import { storage } from "../../../common/decorators/storage";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { toggleAttribute } from "../../../common/dom/toggle_attribute";
-import { escapeRegExp } from "../../../common/string/escape_regexp";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import { escapeRegExp } from "../../../common/string/escape_regexp";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/entity/ha-entity-picker";
-import "../../../components/ha-alert";
-import "../../../components/ha-button";
-import "../../../components/ha-checkbox";
-import "../../../components/ha-expansion-panel";
+import "../../../components/ha-yaml-editor";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-checkbox";
 import "../../../components/ha-tip";
-import "../../../components/ha-yaml-editor";
-import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
+import "../../../components/ha-alert";
 import "../../../components/search-input";
+import "../../../components/ha-expansion-panel";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { toggleAttribute } from "../../../common/dom/toggle_attribute";
+import { storage } from "../../../common/decorators/storage";
 
 @customElement("developer-tools-state")
 class HaPanelDevState extends LitElement {
@@ -71,8 +70,6 @@ class HaPanelDevState extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
-  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
-
   private _filteredEntities = memoizeOne(
     (
       entityFilter: string,
@@ -154,22 +151,23 @@ class HaPanelDevState extends LitElement {
               )}
             </p>
             <ha-yaml-editor
+              autoUpdate
               .value=${this._stateAttributes}
               .error=${!this._validJSON}
               @value-changed=${this._yamlChanged}
               dir="ltr"
             ></ha-yaml-editor>
             <div class="button-row">
-              <ha-button
+              <mwc-button
                 @click=${this._handleSetState}
                 .disabled=${!this._validJSON}
                 raised
                 >${this.hass.localize(
                   "ui.panel.developer-tools.tabs.states.set_state"
-                )}</ha-button
+                )}</mwc-button
               >
               <ha-icon-button
-                @click=${this._updateEntity}
+                @click=${this._entityIdChanged}
                 .label=${this.hass.localize("ui.common.refresh")}
                 .path=${mdiRefresh}
               ></ha-icon-button>
@@ -345,26 +343,16 @@ class HaPanelDevState extends LitElement {
     this._entity = entityState;
     this._state = entityState.state;
     this._stateAttributes = entityState.attributes;
-    this._updateEditor();
     this._expanded = true;
     ev.preventDefault();
   }
 
-  private _updateEditor() {
-    this._yamlEditor?.setValue(this._stateAttributes);
-  }
-
   private _entityIdChanged(ev: CustomEvent) {
     this._entityId = ev.detail.value;
-    this._updateEntity();
-  }
-
-  private _updateEntity() {
     if (!this._entityId) {
       this._entity = undefined;
       this._state = "";
       this._stateAttributes = {};
-      this._updateEditor();
       return;
     }
     const entityState = this.hass.states[this._entityId];
@@ -374,7 +362,6 @@ class HaPanelDevState extends LitElement {
     this._entity = entityState;
     this._state = entityState.state;
     this._stateAttributes = entityState.attributes;
-    this._updateEditor();
     this._expanded = true;
   }
 
@@ -428,7 +415,6 @@ class HaPanelDevState extends LitElement {
       });
       return;
     }
-    this._updateEditor();
     try {
       await this.hass.callApi("POST", "states/" + this._entityId, {
         state: this._state,

src/panels/lovelace/cards/hui-statistics-graph-card.ts

@@ -193,7 +193,6 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
             .isLoadingData=${!this._statistics}
             .statisticsData=${this._statistics}
             .metadata=${this._metadata}
-            .period=${this._config.period}
             .chartType=${this._config.chart_type || "line"}
             .statTypes=${this._statTypes!}
             .names=${this._names}

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -1,10 +1,4 @@
-import {
-  mdiDelete,
-  mdiDrag,
-  mdiNotificationClearAll,
-  mdiPlus,
-  mdiSort,
-} from "@mdi/js";
+import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
@@ -299,23 +293,6 @@ export class HuiTodoListCard
                       .itemId=${item.uid}
                       @change=${this._saveEdit}
                     ></ha-textfield>
-                    ${this.todoListSupportsFeature(
-                      TodoListEntityFeature.DELETE_TODO_ITEM
-                    ) &&
-                    !this.todoListSupportsFeature(
-                      TodoListEntityFeature.UPDATE_TODO_ITEM
-                    )
-                      ? html`<ha-icon-button
-                          .title=${this.hass!.localize(
-                            "ui.panel.lovelace.cards.todo-list.delete_item"
-                          )}
-                          class="deleteItemButton"
-                          .path=${mdiDelete}
-                          .itemId=${item.uid}
-                          @click=${this._deleteItem}
-                        >
-                        </ha-icon-button>`
-                      : nothing}
                   </div>
                 `
               )}
@@ -364,23 +341,7 @@ export class HuiTodoListCard
                   >
                   </ha-svg-icon>
                 `
-              : this.todoListSupportsFeature(
-                  TodoListEntityFeature.DELETE_TODO_ITEM
-                ) &&
-                !this.todoListSupportsFeature(
-                  TodoListEntityFeature.UPDATE_TODO_ITEM
-                )
-              ? html`<ha-icon-button
-                  .title=${this.hass!.localize(
-                    "ui.panel.lovelace.cards.todo-list.delete_item"
-                  )}
-                  class="deleteItemButton"
-                  .path=${mdiDelete}
-                  .itemId=${item.uid}
-                  @click=${this._deleteItem}
-                >
-                </ha-icon-button>`
-              : nothing}
+              : ""}
           </div>
         `
       )}
@@ -470,16 +431,6 @@ export class HuiTodoListCard
     }
   }
 
-  private _deleteItem(ev): void {
-    const item = this._getItem(ev.target.itemId);
-    if (!item) {
-      return;
-    }
-    deleteItem(this.hass!, this._entityId!, item.uid).finally(() =>
-      this._fetchData()
-    );
-  }
-
   private _addKeyPress(ev): void {
     if (ev.key === "Enter") {
       this._addItem(null);
@@ -590,12 +541,6 @@ export class HuiTodoListCard
         direction: var(--direction);
       }
 
-      .deleteItemButton {
-        margin-right: -12px;
-        margin-inline-end: -12px;
-        direction: var(--direction);
-      }
-
       .reorderButton {
         margin-right: -12px;
         margin-inline-end: -12px;

src/panels/lovelace/common/validate-condition.ts

@@ -71,7 +71,7 @@ function checkStateNumericCondition(
 
   return (
     (condition.above == null || condition.above < numericState) &&
-    (condition.below == null || condition.below > numericState)
+    (condition.below == null || condition.below >= numericState)
   );
 }
 

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -1,4 +1,4 @@
-import Fuse, { IFuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
 import {
   css,
   CSSResultGroup,
@@ -80,7 +80,7 @@ export class HuiCardPicker extends LitElement {
       let cards = cardElements.map(
         (cardElement: CardElement) => cardElement.card
       );
-      const options: IFuseOptions<Card> = {
+      const options: Fuse.IFuseOptions<Card> = {
         keys: ["type", "name", "description"],
         isCaseSensitive: false,
         minMatchCharLength: 2,

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

@@ -349,7 +349,6 @@ class PanelTodo extends LitElement {
           max-width: 100%;
         }
         ha-button-menu ha-button {
-          --button-slot-container-overflow: hidden;
           max-width: 100%;
           --mdc-theme-primary: currentColor;
           --mdc-typography-button-text-transform: none;

src/state/translations-mixin.ts

@@ -268,6 +268,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
 
     private _applyDirection(hass: HomeAssistant) {
       const direction = computeRTLDirection(hass);
+      document.dir = direction;
       setDirectionStyles(direction, this);
     }
 

src/translations/en.json

@@ -444,9 +444,7 @@
         "none": "None"
       },
       "user-picker": {
-        "no_user": "No user",
-        "add_user": "Add user",
-        "remove_user": "Remove user"
+        "user": "User"
       },
       "blueprint-picker": {
         "select_blueprint": "Select a blueprint"
@@ -2401,7 +2399,6 @@
               "delete_confirm_text": "It will be permanently deleted.",
               "unsupported_platform": "No visual editor support for platform: {platform}",
               "type_select": "Trigger type",
-              "unknown_trigger": "[%key:ui::panel::config::devices::automation::triggers::unknown_trigger%]",
               "type": {
                 "calendar": {
                   "label": "Calendar",
@@ -2597,7 +2594,6 @@
               "delete_confirm_text": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm_text%]",
               "unsupported_condition": "No visual editor support for condition: {condition}",
               "type_select": "Condition type",
-              "unknown_condition": "[%key:ui::panel::config::devices::automation::conditions::unknown_condition%]",
               "type": {
                 "and": {
                   "label": "And",
@@ -4528,8 +4524,7 @@
             "clear_items": "Clear checked items",
             "add_item": "Add item",
             "reorder_items": "Reorder items",
-            "drag_and_drop": "Drag and drop",
-            "delete_item": "Delete item"
+            "drag_and_drop": "Drag and drop"
           },
           "picture-elements": {
             "hold": "Hold:",
@@ -5662,7 +5657,7 @@
               "hdmi_input": "HDMI input",
               "hdmi_switcher": "HDMI switcher",
               "volume": "Volume",
-              "total_tv_time": "Total TV Time",
+              "total_tv_time": "Total TV Ttme",
               "turn_tv_off": "Turn television off",
               "air": "Air"
             },

yarn.lock

@@ -9025,10 +9025,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fuse.js@npm:7.0.0":
-  version: 7.0.0
-  resolution: "fuse.js@npm:7.0.0"
-  checksum: d15750efec1808370c0cae92ec9473aa7261c59bca1f15f1cf60039ba6f804b8f95340b5cabd83a4ef55839c1034764856e0128e443921f072aa0d8a20e4cacf
+"fuse.js@npm:6.6.2":
+  version: 6.6.2
+  resolution: "fuse.js@npm:6.6.2"
+  checksum: 17ae758ce205276ebd88bd9c9f088a100be0b4896abac9f6b09847151269d1690f41d7f98ff5813d4a58973162dbd99d0072ce807020fee6f9de60170f6b08eb
   languageName: node
   linkType: hard
 
@@ -9772,7 +9772,7 @@ __metadata:
     esprima: 4.0.1
     fancy-log: 2.0.0
     fs-extra: 11.1.1
-    fuse.js: 7.0.0
+    fuse.js: 6.6.2
     glob: 10.3.10
     google-timezones-json: 1.2.0
     gulp: 4.0.2
@@ -9828,11 +9828,11 @@ __metadata:
     tar: 6.2.0
     terser-webpack-plugin: 5.3.9
     tinykeys: 2.1.0
-    ts-lit-plugin: 2.0.1
+    ts-lit-plugin: 2.0.0
     tsparticles-engine: 2.12.0
     tsparticles-preset-links: 2.12.0
     typescript: 5.2.2
-    ua-parser-js: 1.0.37
+    ua-parser-js: 1.0.36
     unfetch: 5.0.0
     vinyl-buffer: 1.0.1
     vinyl-source-stream: 2.0.0
@@ -11424,7 +11424,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lit-analyzer@npm:2.0.1, lit-analyzer@npm:^2.0.1":
+"lit-analyzer@npm:2.0.1, lit-analyzer@npm:^2.0.0":
   version: 2.0.1
   resolution: "lit-analyzer@npm:2.0.1"
   dependencies:
@@ -15385,13 +15385,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-lit-plugin@npm:2.0.1":
-  version: 2.0.1
-  resolution: "ts-lit-plugin@npm:2.0.1"
+"ts-lit-plugin@npm:2.0.0":
+  version: 2.0.0
+  resolution: "ts-lit-plugin@npm:2.0.0"
   dependencies:
-    lit-analyzer: ^2.0.1
+    lit-analyzer: ^2.0.0
     web-component-analyzer: ^2.0.0
-  checksum: 027d632664933958667965c21b34fffb01533a2004266750a52d15b3acfe3ee39fcb7e206086ea046bdb6e437f4d91daf40c66ba6c9fe23a04769340bc895278
+  checksum: 1dd6ceffb98d03c81de5a7874c81058cfda6be7a4b4cd760acab1776b9bb32143117aca9ff4c922118e83d919e0a09fc4fa21160ff7133a2133ef9d9e7eea2fc
   languageName: node
   linkType: hard
 
@@ -15673,10 +15673,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:1.0.37":
-  version: 1.0.37
-  resolution: "ua-parser-js@npm:1.0.37"
-  checksum: 4d481c720d523366d7762dc8a46a1b58967d979aacf786f9ceceb1cd767de069f64a4bdffb63956294f1c0696eb465ddb950f28ba90571709e33521b4bd75e07
+"ua-parser-js@npm:1.0.36":
+  version: 1.0.36
+  resolution: "ua-parser-js@npm:1.0.36"
+  checksum: 5b2c8a5e3443dfbba7624421805de946457c26ae167cb2275781a2729d1518f7067c9d5c74c3b0acac4b9ff3278cae4eace08ca6eecb63848bc3b2f6a63cc975
   languageName: node
   linkType: hard