Merge pull request #12045 from home-assistant/hot-fix-03142022

gallery/src/components/demo-cards.ts

@@ -78,6 +78,9 @@ class DemoCards extends LitElement {
     ha-formfield {
       margin-right: 16px;
     }
+    #container {
+      background-color: var(--primary-background-color);
+    }
   `;
 }
 

hassio/src/hassio-main.ts

@@ -121,7 +121,8 @@ export class HassioMain extends SupervisorBaseElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      themeSettings
+      themeSettings,
+      true
     );
   }
 }

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220301.1
+version      = 20220301.2
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/auth/ha-authorize.ts

@@ -101,13 +101,19 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._fetchAuthProviders();
 
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(document.documentElement, {
-        default_theme: "default",
-        default_dark_theme: null,
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      });
+      applyThemesOnElement(
+        document.documentElement,
+        {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: true,
+          theme: "default",
+        },
+        undefined,
+        undefined,
+        true
+      );
     }
 
     if (!this.redirectUri) {

src/common/dom/apply_themes_on_element.ts

@@ -31,11 +31,12 @@ export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeSettings?: Partial<HomeAssistant["selectedTheme"]>
+  themeSettings?: Partial<HomeAssistant["selectedTheme"]>,
+  main?: boolean
 ) => {
-  // If there is no explicitly desired theme provided, we automatically
+  // If there is no explicitly desired theme provided, and the element is the main element we automatically
   // use the active one from `themes`.
-  const themeToApply = selectedTheme || themes.theme;
+  const themeToApply = selectedTheme || (main ? themes.theme : undefined);
 
   // If there is no explicitly desired dark mode provided, we automatically
   // use the active one from `themes`.
@@ -47,7 +48,7 @@ export const applyThemesOnElement = (
   let cacheKey = themeToApply;
   let themeRules: Partial<ThemeVars> = {};
 
-  if (darkMode) {
+  if (themeToApply && darkMode) {
     cacheKey = `${cacheKey}__dark`;
     themeRules = { ...darkStyles };
   }

src/fake_data/provide_hass.ts

@@ -300,7 +300,9 @@ export const provideHass = (
       applyThemesOnElement(
         document.documentElement,
         themes,
-        selectedTheme!.theme
+        selectedTheme!.theme,
+        undefined,
+        true
       );
     },
 

src/layouts/supervisor-error-screen.ts

@@ -101,7 +101,8 @@ class SupervisorErrorScreen extends LitElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      themeSettings
+      themeSettings,
+      true
     );
   }
 

src/onboarding/ha-onboarding.ts

@@ -133,13 +133,19 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       import("./particles");
     }
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(document.documentElement, {
-        default_theme: "default",
-        default_dark_theme: null,
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      });
+      applyThemesOnElement(
+        document.documentElement,
+        {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: true,
+          theme: "default",
+        },
+        undefined,
+        undefined,
+        true
+      );
     }
   }
 

src/panels/config/automation/blueprint-automation-editor.ts

@@ -278,7 +278,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
     if (!name) {
       return;
     }
-    const newVal = ev.detail.value;
+    const newVal = target.value;
     if ((this.config![name] || "") === newVal) {
       return;
     }

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -240,7 +240,7 @@ export class DialogEnergyGridFlowSettings
     this._costStat = null;
     this._source = {
       ...this._source!,
-      number_energy_price: Number(ev.detail.value),
+      number_energy_price: Number((ev.target as any).value),
       entity_energy_price: null,
     };
   }

src/panels/config/entities/entity-registry-settings.ts

@@ -11,6 +11,7 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
 import "../../../components/ha-alert";
@@ -166,7 +167,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                 "ui.dialogs.entity_registry.editor.device_class"
               )}
               .value=${this._deviceClass}
+              naturalMenuWidth
+              fixedMenuPosition
               @selected=${this._deviceClassChanged}
+              @closed=${stopPropagation}
             >
               ${OVERRIDE_DEVICE_CLASSES[domain].map(
                 (deviceClass: string) => html`
@@ -422,6 +426,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         }
         ha-select {
           width: 100%;
+          margin: 8px 0;
         }
         ha-switch {
           margin-right: 16px;

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -85,7 +85,7 @@ class HaInputSelectForm extends LitElement {
         ${this._options.length
           ? this._options.map(
               (option, index) => html`
-                <mwc-list-item class="option" hasMeta noninteractive>
+                <mwc-list-item class="option" hasMeta>
                   ${option}
                   <ha-icon-button
                     slot="meta"

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -237,8 +237,10 @@ class ZWaveJSConfigDashboard extends LitElement {
                     <mwc-button
                       @click=${this._removeNodeClicked}
                       .disabled=${this._status !== "connected" ||
-                      this._network?.controller.inclusion_state !==
-                        InclusionState.Idle}
+                      (this._network?.controller.inclusion_state !==
+                        InclusionState.Idle &&
+                        this._network?.controller.inclusion_state !==
+                          InclusionState.SmartStart)}
                     >
                       ${this.hass.localize(
                         "ui.panel.config.zwave_js.common.remove_node"
@@ -304,7 +306,9 @@ class ZWaveJSConfigDashboard extends LitElement {
           ?rtl=${computeRTL(this.hass)}
           @click=${this._addNodeClicked}
           .disabled=${this._status !== "connected" ||
-          this._network?.controller.inclusion_state !== InclusionState.Idle}
+          (this._network?.controller.inclusion_state !== InclusionState.Idle &&
+            this._network?.controller.inclusion_state !==
+              InclusionState.SmartStart)}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -289,7 +289,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
         <div class="flex">
           <ha-select
             .disabled=${!item.metadata.writeable}
-            .value=${item.value}
+            .value=${item.value?.toString()}
             .key=${id}
             .property=${item.property}
             .propertyKey=${item.property_key}
@@ -345,7 +345,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
     if (ev.target === undefined || this._config![ev.target.key] === undefined) {
       return;
     }
-    if (this._config![ev.target.key].value === ev.target.value) {
+    if (this._config![ev.target.key].value?.toString() === ev.target.value) {
       return;
     }
     this.setResult(ev.target.key, undefined);

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -11,6 +11,7 @@ import { CoreFrontendUserData } from "../../../../data/frontend";
 import {
   LovelaceDashboard,
   LovelaceDashboardCreateParams,
+  LovelaceDashboardMutableParams,
 } from "../../../../data/lovelace";
 import { DEFAULT_PANEL, setDefaultPanel } from "../../../../data/panel";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -40,7 +41,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     } else {
       this._data = {
         show_in_sidebar: true,
-        icon: "",
+        icon: undefined,
         title: "",
         require_admin: false,
         mode: "storage",
@@ -264,7 +265,13 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     this._submitting = true;
     try {
       if (this._params!.dashboard) {
-        await this._params!.updateDashboard(this._data as LovelaceDashboard);
+        const values: Partial<LovelaceDashboardMutableParams> = {
+          require_admin: this._data!.require_admin,
+          show_in_sidebar: this._data!.show_in_sidebar,
+          icon: this._data!.icon || undefined,
+          title: this._data!.title,
+        };
+        await this._params!.updateDashboard(values);
       } else {
         await this._params!.createDashboard(
           this._data as LovelaceDashboardCreateParams

src/panels/config/script/ha-script-editor.ts

@@ -569,9 +569,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private _aliasChanged(alias: string) {
-    if (this.scriptEntityId || this._entityId) {
+    if (
+      this.scriptEntityId ||
+      (this._entityId && this._entityId !== slugify(this._config!.alias))
+    ) {
       return;
     }
+
     const aliasSlugify = slugify(alias);
     let id = aliasSlugify;
     let i = 2;
@@ -595,6 +599,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const values = ev.detail.value as any;
+    const currentId = this._entityId;
 
     for (const key of Object.keys(values)) {
       if (key === "sequence") {
@@ -603,7 +608,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
       const value = values[key];
 
-      if (value === this._config![key]) {
+      if (
+        value === this._config![key] ||
+        (key === "id" && currentId === value)
+      ) {
         continue;
       }
 

src/panels/config/users/dialog-user-detail.ts

@@ -22,7 +22,6 @@ import {
   showAlertDialog,
   showPromptDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { UserDetailDialogParams } from "./show-dialog-user-detail";
@@ -212,9 +211,9 @@ class DialogUserDetail extends LitElement {
     `;
   }
 
-  private _nameChanged(ev: PolymerChangedEvent<string>) {
+  private _nameChanged(ev) {
     this._error = undefined;
-    this._name = ev.detail.value;
+    this._name = ev.target.value;
   }
 
   private _adminChanged(ev): void {

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -113,9 +113,9 @@ export class HuiPictureCardEditor
       return;
     }
     const target = ev.target! as EditorTarget;
-    const value = ev.detail.value;
+    const value = ev.detail?.value ?? target.value;
 
-    if (this[`_${target.configValue}`] === target.value) {
+    if (this[`_${target.configValue}`] === value) {
       return;
     }
     if (target.configValue) {

src/state/themes-mixin.ts

@@ -38,13 +38,19 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       });
       mql.addListener((ev) => this._applyTheme(ev.matches));
       if (!this._themeApplied && mql.matches) {
-        applyThemesOnElement(document.documentElement, {
-          default_theme: "default",
-          default_dark_theme: null,
-          themes: {},
-          darkMode: true,
-          theme: "default",
-        });
+        applyThemesOnElement(
+          document.documentElement,
+          {
+            default_theme: "default",
+            default_dark_theme: null,
+            themes: {},
+            darkMode: true,
+            theme: "default",
+          },
+          undefined,
+          undefined,
+          true
+        );
       }
     }
 
@@ -93,7 +99,8 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         document.documentElement,
         this.hass.themes,
         themeName,
-        themeSettings
+        themeSettings,
+        true
       );
 
       if (darkMode !== this.hass.themes.darkMode) {