Merge branch 'rc'

home-assistant · Dec 24, 2024 · c05054e · c05054e
2 parents e7d9032 + f416b1b
commit c05054e
Show file tree

Hide file tree

Showing 45 changed files with 374 additions and 248 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
   "type": "module",
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@braintree/sanitize-url": "7.1.0",
+    "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.4",
     "@codemirror/commands": "6.7.1",
     "@codemirror/language": "6.10.7",
@@ -139,7 +139,7 @@
     "tinykeys": "3.0.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "1.0.39",
+    "ua-parser-js": "1.0.40",
     "vis-data": "7.1.9",
     "vis-network": "9.1.9",
     "vue": "2.7.16",

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

diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
@@ -61,6 +61,8 @@ export class HaChartBase extends LitElement {
 
   @state() private _chartHeight?: number;
 
+  @state() private _legendHeight?: number;
+
   @state() private _tooltip?: Tooltip;
 
   @state() private _hiddenDatasets: Set<number> = new Set();
@@ -214,10 +216,22 @@ export class HaChartBase extends LitElement {
     this.chart.update("none");
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("data") || changedProperties.has("options")) {
+      if (this.options?.plugins?.legend?.display) {
+        this._legendHeight =
+          this.renderRoot.querySelector(".chart-legend")?.clientHeight;
+      } else {
+        this._legendHeight = 0;
+      }
+    }
+  }
+
   protected render() {
     return html`
       ${this.options?.plugins?.legend?.display === true
-        ? html`<div class="chartLegend">
+        ? html`<div class="chart-legend">
             <ul>
               ${this._datasetOrder.map((index) => {
                 const dataset = this.data.datasets[index];
@@ -249,7 +263,7 @@ export class HaChartBase extends LitElement {
           </div>`
         : ""}
       <div
-        class="animationContainer"
+        class="animation-container"
         style=${styleMap({
           height: `${this.height || this._chartHeight || 0}px`,
           overflow: this._chartHeight ? "initial" : "hidden",
@@ -288,7 +302,7 @@ export class HaChartBase extends LitElement {
           </div>
           ${this._tooltip
             ? html`<div
-                class="chartTooltip ${classMap({
+                class="chart-tooltip ${classMap({
                   [this._tooltip.yAlign]: true,
                 })}"
                 style=${styleMap({
@@ -298,7 +312,7 @@ export class HaChartBase extends LitElement {
               >
                 <div class="title">${this._tooltip.title}</div>
                 ${this._tooltip.beforeBody
-                  ? html`<div class="beforeBody">
+                  ? html`<div class="before-body">
                       ${this._tooltip.beforeBody}
                     </div>`
                   : ""}
@@ -456,6 +470,7 @@ export class HaChartBase extends LitElement {
 
   private _handleChartScroll(ev: MouseEvent) {
     const modifier = isMac ? "metaKey" : "ctrlKey";
+    this._tooltip = undefined;
     if (!ev[modifier] && !this._showZoomHint) {
       this._showZoomHint = true;
       setTimeout(() => {
@@ -498,15 +513,20 @@ export class HaChartBase extends LitElement {
       this._tooltip = undefined;
       return;
     }
+    const boundingBox = this.getBoundingClientRect();
     this._tooltip = {
       ...context.tooltip,
-      top: this.chart!.canvas.offsetTop + context.tooltip.caretY + 12 + "px",
+      top:
+        boundingBox.y +
+        (this._legendHeight || 0) +
+        context.tooltip.caretY +
+        12 +
+        "px",
       left:
-        this.chart!.canvas.offsetLeft +
         clamp(
-          context.tooltip.caretX,
-          100,
-          this.clientWidth - 100 - this._paddingYAxisInternal
+          boundingBox.x + context.tooltip.caretX,
+          boundingBox.x + 100,
+          boundingBox.x + boundingBox.width - 100
         ) -
         100 +
         "px",
@@ -525,27 +545,24 @@ export class HaChartBase extends LitElement {
     return css`
       :host {
         display: block;
-        position: var(--chart-base-position, relative);
+        position: relative;
       }
-      .animationContainer {
+      .animation-container {
         overflow: hidden;
         height: 0;
         transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
       }
-      .chart-container {
-        position: relative;
-      }
       canvas {
         max-height: var(--chart-max-height, 400px);
       }
       canvas.not-zoomed {
         /* allow scrolling if the chart is not zoomed */
         touch-action: pan-y !important;
       }
-      .chartLegend {
+      .chart-legend {
         text-align: center;
       }
-      .chartLegend li {
+      .chart-legend li {
         cursor: pointer;
         display: inline-grid;
         grid-auto-flow: column;
@@ -554,16 +571,16 @@ export class HaChartBase extends LitElement {
         align-items: center;
         color: var(--secondary-text-color);
       }
-      .chartLegend .hidden {
+      .chart-legend .hidden {
         text-decoration: line-through;
       }
-      .chartLegend .label {
+      .chart-legend .label {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
       }
-      .chartLegend .bullet,
-      .chartTooltip .bullet {
+      .chart-legend .bullet,
+      .chart-tooltip .bullet {
         border-width: 1px;
         border-style: solid;
         border-radius: 50%;
@@ -577,13 +594,13 @@ export class HaChartBase extends LitElement {
         margin-inline-start: initial;
         direction: var(--direction);
       }
-      .chartTooltip .bullet {
+      .chart-tooltip .bullet {
         align-self: baseline;
       }
-      .chartTooltip {
+      .chart-tooltip {
         padding: 8px;
         font-size: 90%;
-        position: absolute;
+        position: fixed;
         background: rgba(80, 80, 80, 0.9);
         color: white;
         border-radius: 4px;
@@ -596,34 +613,34 @@ export class HaChartBase extends LitElement {
         box-sizing: border-box;
         direction: var(--direction);
       }
-      .chartLegend ul,
-      .chartTooltip ul {
+      .chart-legend ul,
+      .chart-tooltip ul {
         display: inline-block;
         padding: 0 0px;
         margin: 8px 0 0 0;
         width: 100%;
       }
-      .chartTooltip ul {
+      .chart-tooltip ul {
         margin: 0 4px;
       }
-      .chartTooltip li {
+      .chart-tooltip li {
         display: flex;
         white-space: pre-line;
         word-break: break-word;
         align-items: center;
         line-height: 16px;
         padding: 4px 0;
       }
-      .chartTooltip .title {
+      .chart-tooltip .title {
         text-align: center;
         font-weight: 500;
         word-break: break-word;
         direction: ltr;
       }
-      .chartTooltip .footer {
+      .chart-tooltip .footer {
         font-weight: 500;
       }
-      .chartTooltip .beforeBody {
+      .chart-tooltip .before-body {
         text-align: center;
         font-weight: 300;
         word-break: break-all;

diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts
@@ -210,11 +210,9 @@ class DialogMediaManage extends LitElement {
                     href="/config/storage"
                     @click=${this.closeDialog}
                   >
-                    ${this.hass
-                      .localize(
-                        "ui.components.media-browser.file_management.tip_storage_panel"
-                      )
-                      .toLowerCase()}
+                    ${this.hass.localize(
+                      "ui.components.media-browser.file_management.tip_storage_panel"
+                    )}
                   </a>`,
                 }
               )}

diff --git a/src/data/backup.ts b/src/data/backup.ts
@@ -1,6 +1,16 @@
+import { setHours, setMinutes } from "date-fns";
+import type { HassConfig } from "home-assistant-js-websocket";
+import memoizeOne from "memoize-one";
+import { formatTime } from "../common/datetime/format_time";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
 import { domainToName } from "./integration";
+import type { FrontendLocaleData } from "./translation";
+import {
+  formatDateTime,
+  formatDateTimeNumeric,
+} from "../common/datetime/format_date_time";
+import { fileDownload } from "../util/file_download";
 
 export const enum BackupScheduleState {
   NEVER = "never",
@@ -282,3 +292,49 @@ export const generateEncryptionKey = () => {
   });
   return result;
 };
+
+export const generateEmergencyKit = (
+  hass: HomeAssistant,
+  encryptionKey: string
+) =>
+  "data:text/plain;charset=utf-8," +
+  encodeURIComponent(`Home Assistant Backup Emergency Kit
+
+This emergency kit contains your backup encryption key. You need this key
+to be able to restore your Home Assistant backups.
+
+Date: ${formatDateTime(new Date(), hass.locale, hass.config)}
+
+Instance:
+${hass.config.location_name}
+
+URL:
+${hass.auth.data.hassUrl}
+
+Encryption key:
+${encryptionKey}
+
+For more information visit: https://www.home-assistant.io/more-info/backup-emergency-kit`);
+
+export const geneateEmergencyKitFileName = (
+  hass: HomeAssistant,
+  append?: string
+) =>
+  `home_assistant_backup_emergency_kit_${append ? `${append}_` : ""}${formatDateTimeNumeric(new Date(), hass.locale, hass.config).replace(",", "").replace(" ", "_")}.txt`;
+
+export const downloadEmergencyKit = (
+  hass: HomeAssistant,
+  key: string,
+  appendFileName?: string
+) =>
+  fileDownload(
+    generateEmergencyKit(hass, key),
+    geneateEmergencyKitFileName(hass, appendFileName)
+  );
+
+export const getFormattedBackupTime = memoizeOne(
+  (locale: FrontendLocaleData, config: HassConfig) => {
+    const date = setMinutes(setHours(new Date(), 4), 45);
+    return formatTime(date, locale, config);
+  }
+);
diff --git a/src/dialogs/config-flow/show-dialog-config-flow.ts b/src/dialogs/config-flow/show-dialog-config-flow.ts
@@ -50,7 +50,7 @@ export const showConfigFlowDialog = (
 
       return description
         ? html`
-            <ha-markdown allowsvg breaks .content=${description}></ha-markdown>
+            <ha-markdown allow-svg breaks .content=${description}></ha-markdown>
           `
         : step.reason;
     },
@@ -71,7 +71,7 @@ export const showConfigFlowDialog = (
       );
       return description
         ? html`
-            <ha-markdown allowsvg breaks .content=${description}></ha-markdown>
+            <ha-markdown allow-svg breaks .content=${description}></ha-markdown>
           `
         : "";
     },
@@ -163,7 +163,7 @@ export const showConfigFlowDialog = (
         ${description
           ? html`
               <ha-markdown
-                allowsvg
+                allow-svg
                 breaks
                 .content=${description}
               ></ha-markdown>
@@ -184,7 +184,7 @@ export const showConfigFlowDialog = (
         ${description
           ? html`
               <ha-markdown
-                allowsvg
+                allow-svg
                 breaks
                 .content=${description}
               ></ha-markdown>
@@ -214,7 +214,7 @@ export const showConfigFlowDialog = (
       );
       return description
         ? html`
-            <ha-markdown allowsvg breaks .content=${description}></ha-markdown>
+            <ha-markdown allow-svg breaks .content=${description}></ha-markdown>
           `
         : "";
     },
@@ -234,7 +234,7 @@ export const showConfigFlowDialog = (
       );
       return description
         ? html`
-            <ha-markdown allowsvg breaks .content=${description}></ha-markdown>
+            <ha-markdown allow-svg breaks .content=${description}></ha-markdown>
           `
         : "";
     },