20231228.0 (#19170)

2025-07-24 09:46:36 +00:00 · 2023-12-28 15:34:42 +01:00 · 2023-12-28 15:34:42 +01:00 · 7b4ecfd30a
commit 7b4ecfd30a
parent 9d9e789f4b e5707b423f
21 changed files with 202 additions and 169 deletions
--- a/pyproject.toml
+++ b/pyproject.toml
@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20231227.0"
+version      = "20231228.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
--- a/src/components/ha-list-item.ts
+++ b/src/components/ha-list-item.ts
@ -46,6 +46,7 @@ export class HaListItem extends ListItemBase {
        .mdc-deprecated-list-item__meta {
          display: var(--mdc-list-item-meta-display);
          align-items: center;
+          flex-shrink: 0;
        }
        :host([graphic="icon"]:not([twoline]))
          .mdc-deprecated-list-item__graphic {
--- a/src/data/action.ts
+++ b/src/data/action.ts
@ -67,6 +67,7 @@ export const ACTION_GROUPS: AutomationElementGroup = {
    icon: mdiDotsHorizontal,
    members: {
      event: {},
+      service: {},
    },
  },
 } as const;
--- a/src/dialogs/area-filter/area-filter-dialog.ts
+++ b/src/dialogs/area-filter/area-filter-dialog.ts
@ -207,7 +207,8 @@ export class DialogAreaFilter
          color: var(--disabled-text-color);
        }
        .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
        }
        .actions {
          display: flex;
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@ -319,7 +319,8 @@ export default class HaAutomationAction extends LitElement {
          overflow: hidden;
        }
        .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
          padding: 12px;
        }
        .handle ha-svg-icon {
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@ -543,7 +543,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
          padding: 0 16px 16px 16px;
        }
        .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
          padding: 12px;
        }
        .handle ha-svg-icon {
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@ -452,8 +452,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
          itemRoles="option"
          rootTabbable
          style=${styleMap({
-            width: `${this._width}px`,
-            height: `${this._height}px`,
+            width: this._width ? `${this._width}px` : "auto",
+            height: this._height ? `${Math.min(468, this._height)}px` : "auto",
          })}
        >
          ${this._params.clipboardItem &&
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@ -358,7 +358,8 @@ export default class HaAutomationCondition extends LitElement {
          overflow: hidden;
        }
        .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
          padding: 12px;
        }
        .handle ha-svg-icon {
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@ -328,7 +328,7 @@ class HaAutomationPicker extends LitElement {
        >
        </ha-button-related-filter-menu>
        ${!this.automations.length
-          ? html` <div class="empty" slot="empty">
+          ? html`<div class="empty" slot="empty">
              <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
              <h1>
                ${this.hass.localize(
@ -338,7 +338,9 @@ class HaAutomationPicker extends LitElement {
              <p>
                ${this.hass.localize(
                  "ui.panel.config.automation.picker.empty_text_1"
-                )}<br />
+                )}
+              </p>
+              <p>
                ${this.hass.localize(
                  "ui.panel.config.automation.picker.empty_text_2"
                )}
@ -349,9 +351,7 @@ class HaAutomationPicker extends LitElement {
                rel="noreferrer"
              >
                <ha-button>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.learn_more"
-                  )}
+                  ${this.hass.localize("ui.panel.config.common.learn_more")}
                </ha-button>
              </a>
            </div>`
@ -513,7 +513,9 @@ class HaAutomationPicker extends LitElement {
            target="_blank"
            rel="noreferrer"
          >
-            ${this.hass.localize("ui.panel.config.common.learn_more")}
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.learn_more"
+            )}
          </a>
        </p>
      `,
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@ -85,8 +85,7 @@ export class HaManualAutomationEditor extends LitElement {
          ></ha-icon-button>
        </a>
      </div>
-      ${!this.hass.userData?.showAdvanced &&
-      !ensureArray(this.config.trigger)?.length
+      ${!ensureArray(this.config.trigger)?.length
        ? html`<p>
            ${this.hass.localize(
              "ui.panel.config.automation.editor.triggers.description"
@ -125,8 +124,7 @@ export class HaManualAutomationEditor extends LitElement {
          ></ha-icon-button>
        </a>
      </div>
-      ${!this.hass.userData?.showAdvanced &&
-      !ensureArray(this.config.condition)?.length
+      ${!ensureArray(this.config.condition)?.length
        ? html`<p>
            ${this.hass.localize(
              "ui.panel.config.automation.editor.conditions.description",
@ -165,8 +163,7 @@ export class HaManualAutomationEditor extends LitElement {
          </a>
        </div>
      </div>
-      ${!this.hass.userData?.showAdvanced &&
-      !ensureArray(this.config.action)?.length
+      ${!ensureArray(this.config.action)?.length
        ? html`<p>
            ${this.hass.localize(
              "ui.panel.config.automation.editor.actions.description"
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@ -298,7 +298,8 @@ export default class HaAutomationTrigger extends LitElement {
          overflow: hidden;
        }
        .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
          padding: 12px;
        }
        .handle ha-svg-icon {
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@ -285,7 +285,8 @@ class HaInputSelectForm extends LitElement {
          margin-bottom: 8px;
        }
        .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
          padding-right: 12px;
        }
        .handle ha-svg-icon {
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@ -265,9 +265,7 @@ class HaSceneDashboard extends LitElement {
                rel="noreferrer"
              >
                <ha-button>
-                  ${this.hass.localize(
-                    "ui.panel.config.scene.picker.learn_more"
-                  )}
+                  ${this.hass.localize("ui.panel.config.common.learn_more")}
                </ha-button>
              </a>
            </div>`
@ -370,7 +368,7 @@ class HaSceneDashboard extends LitElement {
            target="_blank"
            rel="noreferrer"
          >
-            ${this.hass.localize("ui.panel.config.common.learn_more")}
+            ${this.hass.localize("ui.panel.config.scene.picker.learn_more")}
          </a>
        </p>
      `,
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@ -294,9 +294,7 @@ class HaScriptPicker extends LitElement {
                rel="noreferrer"
              >
                <ha-button>
-                  ${this.hass.localize(
-                    "ui.panel.config.script.picker.learn_more"
-                  )}
+                  ${this.hass.localize("ui.panel.config.common.learn_more")}
                </ha-button>
              </a>
            </div>`
@ -420,7 +418,7 @@ class HaScriptPicker extends LitElement {
            target="_blank"
            rel="noreferrer"
          >
-            ${this.hass.localize("ui.panel.config.common.learn_more")}
+            ${this.hass.localize("ui.panel.config.script.picker.learn_more")}
          </a>
        </p>
      `,
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@ -1,4 +1,5 @@
 import "@material/mwc-list/mwc-list";
+import type { List } from "@material/mwc-list/mwc-list";
 import {
  mdiClock,
  mdiDelete,
@ -56,6 +57,7 @@ import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { TodoListCardConfig } from "./types";
+import { sortableStyles } from "../../../resources/ha-sortable-style";

@customElement("hui-todo-list-card")
 export class HuiTodoListCard extends LitElement implements LovelaceCard {
@ -229,7 +231,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
            : nothing}
        </div>
        ${uncheckedItems.length
-          ? html` <div class="header">
+          ? html`<div class="header">
                <span>
                  ${this.hass!.localize(
                    "ui.panel.lovelace.cards.todo-list.unchecked_items"
@ -248,7 +250,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                        graphic="icon"
                      >
                        ${this.hass!.localize(
-                          "ui.panel.lovelace.cards.todo-list.reorder_items"
+                          this._reordering
+                            ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
+                            : "ui.panel.lovelace.cards.todo-list.reorder_items"
                        )}
                        <ha-svg-icon
                          slot="graphic"
@ -466,18 +470,29 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
    });
  }

-  private _completeItem(ev): void {
+  private async _completeItem(ev): Promise<void> {
    const item = this._getItem(ev.currentTarget.itemId);
    if (!item) {
      return;
    }
-    updateItem(this.hass!, this._entityId!, {
+    await updateItem(this.hass!, this._entityId!, {
      ...item,
      status:
        item.status === TodoItemStatus.NeedsAction
          ? TodoItemStatus.Completed
          : TodoItemStatus.NeedsAction,
    });
+    await this.updateComplete;
+    const newList: List = this.shadowRoot!.querySelector(
+      item.status === TodoItemStatus.NeedsAction ? "#checked" : "#unchecked"
+    )!;
+    await newList.updateComplete;
+    const items =
+      item.status === TodoItemStatus.NeedsAction
+        ? this._getCheckedItems(this._items)
+        : this._getUncheckedItems(this._items);
+    const index = items.findIndex((itm) => itm.uid === item.uid);
+    newList.focusItemAtIndex(index);
  }

  private async _clearCompletedItems(): Promise<void> {
@ -605,161 +620,165 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
  }

  static get styles(): CSSResultGroup {
-    return css`
-      ha-card {
-        height: 100%;
-        box-sizing: border-box;
-      }
+    return [
+      sortableStyles,
+      css`
+        ha-card {
+          height: 100%;
+          box-sizing: border-box;
+        }

-      .has-header {
-        padding-top: 0;
-      }
+        .has-header {
+          padding-top: 0;
+        }

-      .addRow {
-        padding: 16px;
-        padding-bottom: 0;
-        position: relative;
-      }
+        .addRow {
+          padding: 16px;
+          padding-bottom: 0;
+          position: relative;
+        }

-      .addRow ha-icon-button {
-        position: absolute;
-        right: 16px;
-        inset-inline-start: initial;
-        inset-inline-end: 16px;
-      }
+        .addRow ha-icon-button {
+          position: absolute;
+          right: 16px;
+          inset-inline-start: initial;
+          inset-inline-end: 16px;
+        }

-      .addRow,
-      .header {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
+        .addRow,
+        .header {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }

-      .header {
-        padding-left: 30px;
-        padding-right: 16px;
-        padding-inline-start: 30px;
-        padding-inline-end: 16px;
-        margin-top: 8px;
-        justify-content: space-between;
-        direction: var(--direction);
-      }
+        .header {
+          padding-left: 30px;
+          padding-right: 16px;
+          padding-inline-start: 30px;
+          padding-inline-end: 16px;
+          margin-top: 8px;
+          justify-content: space-between;
+          direction: var(--direction);
+        }

-      .header span {
-        color: var(--primary-text-color);
-        font-weight: 500;
-      }
+        .header span {
+          color: var(--primary-text-color);
+          font-weight: 500;
+        }

-      .empty {
-        padding: 16px 32px;
-      }
+        .empty {
+          padding: 16px 32px;
+        }

-      .item {
-        margin-top: 8px;
-      }
+        .item {
+          margin-top: 8px;
+        }

-      ha-check-list-item {
-        --mdc-list-item-meta-size: 56px;
-        min-height: 56px;
-        height: auto;
-      }
+        ha-check-list-item {
+          --mdc-list-item-meta-size: 56px;
+          min-height: 56px;
+          height: auto;
+        }

-      ha-check-list-item.multiline {
-        align-items: flex-start;
-        --check-list-item-graphic-margin-top: 8px;
-      }
+        ha-check-list-item.multiline {
+          align-items: flex-start;
+          --check-list-item-graphic-margin-top: 8px;
+        }

-      .row {
-        display: flex;
-        justify-content: space-between;
-      }
+        .row {
+          display: flex;
+          justify-content: space-between;
+        }

-      .multiline .column {
-        display: flex;
-        flex-direction: column;
-        margin-top: 18px;
-        margin-bottom: 12px;
-      }
+        .multiline .column {
+          display: flex;
+          flex-direction: column;
+          margin-top: 18px;
+          margin-bottom: 12px;
+        }

-      .completed .summary {
-        text-decoration: line-through;
-      }
+        .completed .summary {
+          text-decoration: line-through;
+        }

-      .description,
-      .due {
-        font-size: 12px;
-        color: var(--secondary-text-color);
-      }
+        .description,
+        .due {
+          font-size: 12px;
+          color: var(--secondary-text-color);
+        }

-      .description {
-        white-space: initial;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        line-clamp: 3;
-        -webkit-box-orient: vertical;
-      }
+        .description {
+          white-space: initial;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }

-      .description p {
-        margin: 0;
-      }
+        .description p {
+          margin: 0;
+        }

-      .description a {
-        color: var(--primary-color);
-      }
+        .description a {
+          color: var(--primary-color);
+        }

-      .due {
-        display: flex;
-        align-items: center;
-      }
+        .due {
+          display: flex;
+          align-items: center;
+        }

-      .due ha-svg-icon {
-        margin-right: 4px;
-        --mdc-icon-size: 14px;
-      }
+        .due ha-svg-icon {
+          margin-right: 4px;
+          --mdc-icon-size: 14px;
+        }

-      .due.overdue {
-        color: var(--warning-color);
-      }
+        .due.overdue {
+          color: var(--warning-color);
+        }

-      .completed .due.overdue {
-        color: var(--secondary-text-color);
-      }
+        .completed .due.overdue {
+          color: var(--secondary-text-color);
+        }

-      .handle {
-        cursor: move;
-        height: 24px;
-        padding: 16px 4px;
-      }
+        .handle {
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
+          height: 24px;
+          padding: 16px 4px;
+        }

-      .deleteItemButton {
-        position: relative;
-        left: 8px;
-      }
+        .deleteItemButton {
+          position: relative;
+          left: 8px;
+        }

-      ha-textfield {
-        flex-grow: 1;
-      }
+        ha-textfield {
+          flex-grow: 1;
+        }

-      .divider {
-        height: 1px;
-        background-color: var(--divider-color);
-        margin: 10px 0;
-      }
+        .divider {
+          height: 1px;
+          background-color: var(--divider-color);
+          margin: 10px 0;
+        }

-      .clearall {
-        cursor: pointer;
-      }
+        .clearall {
+          cursor: pointer;
+        }

-      .todoList {
-        display: block;
-        padding: 8px;
-      }
+        .todoList {
+          display: block;
+          padding: 8px;
+        }

-      .warning {
-        color: var(--error-color);
-      }
-    `;
+        .warning {
+          color: var(--error-color);
+        }
+      `,
+    ];
  }
 }

--- a/src/panels/lovelace/components/hui-entity-editor.ts
+++ b/src/panels/lovelace/components/hui-entity-editor.ts
@ -181,7 +181,8 @@ export class HuiEntityEditor extends LitElement {
        }
        .entity .handle {
          padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
          padding-inline-end: 8px;
          padding-inline-start: initial;
          direction: var(--direction);
--- a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
@ -460,7 +460,8 @@ export class HuiCardFeaturesEditor extends LitElement {
        }
        .feature .handle {
          padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
          padding-inline-end: 8px;
          padding-inline-start: initial;
          direction: var(--direction);
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@ -243,7 +243,8 @@ export class HuiEntitiesCardRowEditor extends LitElement {

        .entity .handle {
          padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
          padding-inline-end: 8px;
          padding-inline-start: initial;
          direction: var(--direction);
--- a/src/panels/todo/dialog-todo-item-editor.ts
+++ b/src/panels/todo/dialog-todo-item-editor.ts
@ -99,7 +99,6 @@ class DialogTodoItemEditor extends LitElement {
        open
        @closed=${this.closeDialog}
        scrimClickAction
-        escapeKeyAction
        .heading=${createCloseHeading(
          this.hass,
          isCreate
--- a/src/resources/ha-sortable-style.ts
+++ b/src/resources/ha-sortable-style.ts
@ -34,14 +34,22 @@ export const sortableStyles = css`

  .sortable-fallback {
    display: none;
+    opacity: 0;
  }

  .sortable-ghost {
+    border: 2px solid var(--primary-color);
+    background: rgba(var(--rgb-primary-color), 0.25);
+    border-radius: 4px;
    opacity: 0.4;
  }

-  .sortable-fallback {
-    opacity: 0;
+  .sortable-drag {
+    border-radius: 4px;
+    opacity: 1;
+    background: var(--card-background-color);
+    box-shadow: 0px 4px 8px 3px #00000026;
+    cursor: grabbing;
  }

  @keyframes keyframes1 {
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -1119,8 +1119,8 @@
        },
        "valve": {
          "switch_mode": {
-            "button": "[%key:ui::dialogs::more_info_control::valve::switch_mode::button%]",
-            "position": "[%key:ui::dialogs::more_info_control::valve::switch_mode::position%]"
+            "button": "[%key:ui::dialogs::more_info_control::cover::switch_mode::button%]",
+            "position": "[%key:ui::dialogs::more_info_control::cover::switch_mode::position%]"
          }
        }
      },
@ -2759,7 +2759,7 @@
                    "preset_mode": "Preset mode"
                  },
                  "description": {
-                    "picker": "If something happens to a device. Great way to start."
+                    "picker": "If a device is in a certain state. Great way to start."
                  }
                },
                "not": {
@ -4768,6 +4768,7 @@
            "add_item": "Add item",
            "today": "Today",
            "reorder_items": "Reorder items",
+            "exit_reorder_items": "Exit reorder mode",
            "drag_and_drop": "Drag and drop",
            "delete_item": "Delete item",
            "delete_confirm_title": "Remove completed items?",