20231206.0 (#18925)

package.json

@@ -195,7 +195,7 @@
     "eslint": "8.55.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
-    "eslint-config-prettier": "9.0.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-disable": "2.0.3",
     "eslint-plugin-import": "2.29.0",

pyproject.toml

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

src/auth/ha-authorize.ts

@@ -63,6 +63,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           ha-authorize ha-alert {
             display: block;
             margin: 16px 0;
+            background-color: var(--primary-background-color, #fafafa);
           }
         </style>
         <ha-alert alert-type="error"
@@ -93,6 +94,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         ha-alert {
           display: block;
           margin: 16px 0;
+          background-color: var(--primary-background-color, #fafafa);
         }
         p {
           font-size: 14px;

src/components/ha-control-circular-slider.ts

@@ -2,6 +2,7 @@ import {
   DIRECTION_ALL,
   Manager,
   Pan,
+  Press,
   Tap,
   TouchMouseInput,
 } from "@egjs/hammerjs";
@@ -108,6 +109,9 @@ export class HaControlCircularSlider extends LitElement {
   @property({ type: Number })
   public max = 100;
 
+  @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
+  public preventInteractionOnScroll?: boolean;
+
   @state()
   public _localValue?: number = this.value;
 
@@ -246,16 +250,62 @@ export class HaControlCircularSlider extends LitElement {
       this._mc = new Manager(this._interaction, {
         inputClass: TouchMouseInput,
       });
+
+      const pressToActivate =
+        this.preventInteractionOnScroll && "ontouchstart" in window;
+
+      // If press to activate is true, a 60ms press is required to activate the slider
       this._mc.add(
-        new Pan({
+        new Press({
-          direction: DIRECTION_ALL,
+          enable: pressToActivate,
-          enable: true,
+          pointers: 1,
-          threshold: 0,
+          time: 60,
         })
       );
 
+      const panRecognizer = new Pan({
+        direction: DIRECTION_ALL,
+        enable: !pressToActivate,
+        threshold: 0,
+      });
+
+      this._mc.add(panRecognizer);
+
       this._mc.add(new Tap({ event: "singletap" }));
 
+      this._mc.on("press", (e) => {
+        e.srcEvent.stopPropagation();
+        e.srcEvent.preventDefault();
+        if (this.disabled || this.readonly) return;
+        const percentage = this._getPercentageFromEvent(e);
+        const raw = this._percentageToValue(percentage);
+        this._activeSlider = this._findActiveSlider(raw);
+        const bounded = this._boundedValue(raw);
+        this._setActiveValue(bounded);
+        const stepped = this._steppedValue(bounded);
+        if (this._activeSlider) {
+          fireEvent(this, `${this._activeSlider}-changing`, { value: stepped });
+        }
+        panRecognizer.set({ enable: true });
+      });
+
+      this._mc.on("pressup", (e) => {
+        e.srcEvent.stopPropagation();
+        e.srcEvent.preventDefault();
+        const percentage = this._getPercentageFromEvent(e);
+        const raw = this._percentageToValue(percentage);
+        const bounded = this._boundedValue(raw);
+        const stepped = this._steppedValue(bounded);
+        this._setActiveValue(stepped);
+        if (this._activeSlider) {
+          fireEvent(this, `${this._activeSlider}-changing`, {
+            value: undefined,
+          });
+          fireEvent(this, `${this._activeSlider}-changed`, { value: stepped });
+        }
+        this._activeSlider = undefined;
+      });
+
       this._mc.on("pan", (e) => {
         e.srcEvent.stopPropagation();
         e.srcEvent.preventDefault();
@@ -271,6 +321,9 @@ export class HaControlCircularSlider extends LitElement {
       this._mc.on("pancancel", () => {
         if (this.disabled || this.readonly) return;
         this._activeSlider = undefined;
+        if (pressToActivate) {
+          panRecognizer.set({ enable: false });
+        }
       });
       this._mc.on("panmove", (e) => {
         if (this.disabled || this.readonly) return;
@@ -297,6 +350,9 @@ export class HaControlCircularSlider extends LitElement {
           fireEvent(this, `${this._activeSlider}-changed`, { value: stepped });
         }
         this._activeSlider = undefined;
+        if (pressToActivate) {
+          panRecognizer.set({ enable: false });
+        }
       });
       this._mc.on("singletap", (e) => {
         if (this.disabled || this.readonly) return;
@@ -315,6 +371,9 @@ export class HaControlCircularSlider extends LitElement {
         this._lastSlider = this._activeSlider;
         this.shadowRoot?.getElementById("#slider")?.focus();
         this._activeSlider = undefined;
+        if (pressToActivate) {
+          panRecognizer.set({ enable: false });
+        }
       });
     }
   }

src/components/media-player/dialog-media-player-browse.ts

@@ -58,6 +58,7 @@ class DialogMediaPlayerBrowse extends LitElement {
     this._navigateIds = undefined;
     this._currentItem = undefined;
     this._preferredLayout = "auto";
+    this.classList.remove("opened");
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -79,6 +80,7 @@ class DialogMediaPlayerBrowse extends LitElement {
             )
           : this._currentItem.title}
         @closed=${this.closeDialog}
+        @opened=${this._dialogOpened}
       >
         <ha-dialog-header show-border slot="heading">
           ${this._navigateIds.length > 1
@@ -167,6 +169,10 @@ class DialogMediaPlayerBrowse extends LitElement {
     `;
   }
 
+  private _dialogOpened() {
+    this.classList.add("opened");
+  }
+
   private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
@@ -217,10 +223,13 @@ class DialogMediaPlayerBrowse extends LitElement {
 
         ha-media-player-browse {
           --media-browser-max-height: calc(100vh - 65px);
-          height: calc(100vh - 65px);
           direction: ltr;
         }
 
+        :host(.opened) ha-media-player-browse {
+          height: calc(100vh - 65px);
+        }
+
         @media (min-width: 800px) {
           ha-dialog {
             --mdc-dialog-max-width: 800px;
@@ -231,7 +240,6 @@ class DialogMediaPlayerBrowse extends LitElement {
           ha-media-player-browse {
             position: initial;
             --media-browser-max-height: 100vh - 137px;
-            height: 100vh - 137px;
             width: 700px;
           }
         }

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

@@ -103,8 +103,10 @@ class MoreInfoUpdate extends LitElement {
         : ""}
       ${supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES) &&
       !this._error
-        ? this._releaseNotes === undefined
+        ? !this._releaseNotes
-          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
+          ? html`<div class="flex center">
+              <ha-circular-progress indeterminate></ha-circular-progress>
+            </div>`
           : html`<hr />
               <ha-faded>
                 <ha-markdown .content=${this._releaseNotes}></ha-markdown>
@@ -254,9 +256,10 @@ class MoreInfoUpdate extends LitElement {
       a {
         color: var(--primary-color);
       }
-      ha-circular-progress {
+      .flex.center {
-        width: 100%;
+        display: flex;
         justify-content: center;
+        align-items: center;
       }
       mwc-linear-progress {
         margin-bottom: -8px;

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

@@ -449,7 +449,9 @@ class AddIntegrationDialog extends LitElement {
             >
             </lit-virtualizer>
           </mwc-list>`
-        : html`<ha-circular-progress indeterminate></ha-circular-progress>`} `;
+        : html`<div class="flex center">
+            <ha-circular-progress indeterminate></ha-circular-progress>
+          </div>`} `;
   }
 
   private _keyFunction = (integration: IntegrationListItem) =>
@@ -682,10 +684,12 @@ class AddIntegrationDialog extends LitElement {
       p > a {
         color: var(--primary-color);
       }
-      ha-circular-progress {
+      .flex.center {
-        width: 100%;
         display: flex;
         justify-content: center;
+        align-items: center;
+      }
+      ha-circular-progress {
         margin: 24px 0;
       }
       mwc-list {

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -236,7 +236,7 @@ class ZHAAddDevicesPage extends LitElement {
           color: var(--error-color);
         }
         ha-circular-progress {
-          padding: 20px;
+          margin: 20px;
         }
         .searching {
           margin-top: 20px;

src/panels/lovelace/cards/hui-humidifier-card.ts

@@ -127,6 +127,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
       <ha-card>
         <p class="title">${name}</p>
         <ha-state-control-humidifier-humidity
+          prevent-interaction-on-scroll
           show-current
           .hass=${this.hass}
           .stateObj=${stateObj}
@@ -168,11 +169,14 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
       .title {
         width: 100%;
         font-size: 18px;
-        line-height: 24px;
+        line-height: 36px;
-        padding: 12px 36px 16px 36px;
+        padding: 8px 30px 8px 30px;
         margin: 0;
         text-align: center;
         box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       ha-state-control-humidifier-humidity {
@@ -180,7 +184,6 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         max-width: 344px; /* 12px + 12px + 320px */
         padding: 0 12px 12px 12px;
         box-sizing: border-box;
-        --interaction-margin: 0px;
       }
 
       .more-info {

src/panels/lovelace/cards/hui-starting-card.ts

@@ -59,7 +59,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
         height: calc(100vh - var(--header-height));
       }
       ha-circular-progress {
-        padding-bottom: 20px;
+        margin-bottom: 20px;
       }
       .content {
         height: 100%;

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -119,6 +119,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       <ha-card>
         <p class="title">${name}</p>
         <ha-state-control-climate-temperature
+          prevent-interaction-on-scroll
           show-current
           .hass=${this.hass}
           .stateObj=${stateObj}
@@ -160,11 +161,14 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       .title {
         width: 100%;
         font-size: 18px;
-        line-height: 24px;
+        line-height: 36px;
-        padding: 12px 36px 16px 36px;
+        padding: 8px 30px 8px 30px;
         margin: 0;
         text-align: center;
         box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       ha-state-control-climate-temperature {
@@ -172,7 +176,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         max-width: 344px; /* 12px + 12px + 320px */
         padding: 0 12px 12px 12px;
         box-sizing: border-box;
-        --interaction-margin: 0px;
       }
 
       .more-info {

src/state-control/climate/ha-state-control-climate-humidity.ts

@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { stateActive } from "../../common/entity/state_active";
 import { domainStateColorProperties } from "../../common/entity/state_color";
@@ -30,6 +29,9 @@ export class HaStateControlClimateHumidity extends LitElement {
   @property({ attribute: "show-current", type: Boolean })
   public showCurrent?: boolean;
 
+  @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
+  public preventInteractionOnScroll?: boolean;
+
   @state() private _targetHumidity?: number;
 
   private _sizeController = createStateControlCircularSliderController(this);
@@ -176,8 +178,8 @@ export class HaStateControlClimateHumidity extends LitElement {
     const currentHumidity = this.stateObj.attributes.current_humidity;
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
+      ? ` ${this._sizeController.value}`
-      : {};
+      : "";
 
     if (
       supportsTargetHumidity &&
@@ -186,12 +188,13 @@ export class HaStateControlClimateHumidity extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
           })}
         >
           <ha-control-circular-slider
+            .preventInteractionOnScroll=${this.preventInteractionOnScroll}
             .inactive=${!active}
             .value=${this._targetHumidity}
             .min=${this._min}
@@ -214,8 +217,9 @@ export class HaStateControlClimateHumidity extends LitElement {
     }
 
     return html`
-      <div class="container${classMap(containerSizeClass)}">
+      <div class="container${containerSizeClass}">
         <ha-control-circular-slider
+          .preventInteractionOnScroll=${this.preventInteractionOnScroll}
           .current=${this.stateObj.attributes.current_humidity}
           .min=${this._min}
           .max=${this._max}

src/state-control/climate/ha-state-control-climate-temperature.ts

@@ -48,6 +48,9 @@ export class HaStateControlClimateTemperature extends LitElement {
   @property({ attribute: "show-current", type: Boolean })
   public showCurrent?: boolean;
 
+  @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
+  public preventInteractionOnScroll?: boolean;
+
   @state() private _targetTemperature: Partial<Record<Target, number>> = {};
 
   @state() private _selectTargetTemperature: Target = "low";
@@ -291,8 +294,8 @@ export class HaStateControlClimateTemperature extends LitElement {
     }
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
+      ? ` ${this._sizeController.value}`
-      : {};
+      : "";
 
     if (
       supportsTargetTemperature &&
@@ -311,13 +314,14 @@ export class HaStateControlClimateTemperature extends LitElement {
 
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
             "--action-color": actionColor,
           })}
         >
           <ha-control-circular-slider
+            .preventInteractionOnScroll=${this.preventInteractionOnScroll}
             .inactive=${!active}
             .mode=${sliderMode}
             .value=${this._targetTemperature.value}
@@ -349,7 +353,7 @@ export class HaStateControlClimateTemperature extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--low-color": lowColor,
             "--high-color": highColor,
@@ -357,6 +361,7 @@ export class HaStateControlClimateTemperature extends LitElement {
           })}
         >
           <ha-control-circular-slider
+            .preventInteractionOnScroll=${this.preventInteractionOnScroll}
             .inactive=${!active}
             dual
             .low=${this._targetTemperature.low}
@@ -412,6 +417,7 @@ export class HaStateControlClimateTemperature extends LitElement {
         })}
       >
         <ha-control-circular-slider
+          .preventInteractionOnScroll=${this.preventInteractionOnScroll}
           mode="full"
           .current=${this.stateObj.attributes.current_temperature}
           .min=${this._min}

src/state-control/humidifier/ha-state-control-humidifier-humidity.ts

@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { stateActive } from "../../common/entity/state_active";
 import { stateColorCss } from "../../common/entity/state_color";
@@ -32,6 +31,9 @@ export class HaStateControlHumidifierHumidity extends LitElement {
   @property({ attribute: "show-current", type: Boolean })
   public showCurrent?: boolean = false;
 
+  @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
+  public preventInteractionOnScroll?: boolean;
+
   @state() private _targetHumidity?: number;
 
   private _sizeController = createStateControlCircularSliderController(this);
@@ -185,8 +187,8 @@ export class HaStateControlHumidifierHumidity extends LitElement {
     const currentHumidity = this.stateObj.attributes.current_humidity;
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
+      ? ` ${this._sizeController.value}`
-      : {};
+      : "";
 
     if (targetHumidity != null && this.stateObj.state !== UNAVAILABLE) {
       const inverted =
@@ -195,13 +197,14 @@ export class HaStateControlHumidifierHumidity extends LitElement {
 
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
             "--action-color": actionColor,
           })}
         >
           <ha-control-circular-slider
+            .preventInteractionOnScroll=${this.preventInteractionOnScroll}
             .inactive=${!active}
             .mode=${inverted ? "end" : "start"}
             .value=${targetHumidity}
@@ -226,12 +229,13 @@ export class HaStateControlHumidifierHumidity extends LitElement {
 
     return html`
       <div
-        class="container${classMap(containerSizeClass)}"
+        class="container${containerSizeClass}"
         style=${styleMap({
           "--action-color": actionColor,
         })}
       >
         <ha-control-circular-slider
+          .preventInteractionOnScroll=${this.preventInteractionOnScroll}
           .current=${currentHumidity}
           .min=${this._min}
           .max=${this._max}

src/state-control/state-control-circular-slider-style.ts

@@ -121,10 +121,6 @@ export const stateControlCircularSliderStyle = css`
   ha-control-circular-slider {
     width: 100%;
     --control-circular-slider-color: var(--state-color, var(--disabled-color));
-    --control-circular-slider-interaction-margin: var(
-      --interaction-margin,
-      12px
-    );
   }
   ha-control-circular-slider::after {
     display: block;

src/state-control/water_heater/ha-state-control-water_heater-temperature.ts

@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../common/const";
 import { stateActive } from "../../common/entity/state_active";
@@ -33,6 +32,9 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
   @property({ attribute: "show-current", type: Boolean })
   public showCurrent?: boolean;
 
+  @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
+  public preventInteractionOnScroll?: boolean;
+
   @state() private _targetTemperature?: number;
 
   private _sizeController = createStateControlCircularSliderController(this);
@@ -181,8 +183,8 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
     const active = stateActive(this.stateObj);
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
+      ? ` ${this._sizeController.value}`
-      : {};
+      : "";
 
     if (
       supportsTargetTemperature &&
@@ -191,12 +193,13 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
           })}
         >
           <ha-control-circular-slider
+            .preventInteractionOnScroll=${this.preventInteractionOnScroll}
             .inactive=${!active}
             .value=${this._targetTemperature}
             .min=${this._min}
@@ -221,12 +224,13 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
 
     return html`
       <div
-        class="container${classMap(containerSizeClass)}"
+        class="container${containerSizeClass}"
         style=${styleMap({
           "--state-color": stateColor,
         })}
       >
         <ha-control-circular-slider
+          .preventInteractionOnScroll=${this.preventInteractionOnScroll}
           mode="full"
           .current=${this.stateObj.attributes.current_temperature}
           .min=${this._min}

yarn.lock

@@ -7927,14 +7927,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-prettier@npm:9.0.0":
+"eslint-config-prettier@npm:9.1.0":
-  version: 9.0.0
+  version: 9.1.0
-  resolution: "eslint-config-prettier@npm:9.0.0"
+  resolution: "eslint-config-prettier@npm:9.1.0"
   peerDependencies:
     eslint: ">=7.0.0"
   bin:
     eslint-config-prettier: bin/cli.js
-  checksum: 276b0b5b5b19066962a9ff3a16a553bdad28e1c0a2ea33a1d75d65c0428bb7b37f6e85ac111ebefcc9bdefb544385856dbe6eaeda5279c639e5549c113d27dda
+  checksum: 411e3b3b1c7aa04e3e0f20d561271b3b909014956c4dba51c878bf1a23dbb8c800a3be235c46c4732c70827276e540b6eed4636d9b09b444fd0a8e07f0fcd830
   languageName: node
   linkType: hard
 
@@ -9712,7 +9712,7 @@ __metadata:
     eslint: "npm:8.55.0"
     eslint-config-airbnb-base: "npm:15.0.0"
     eslint-config-airbnb-typescript: "npm:17.1.0"
-    eslint-config-prettier: "npm:9.0.0"
+    eslint-config-prettier: "npm:9.1.0"
     eslint-import-resolver-webpack: "npm:0.13.8"
     eslint-plugin-disable: "npm:2.0.3"
     eslint-plugin-import: "npm:2.29.0"