diff --git a/gallery/src/components/demo-cards.ts b/gallery/src/components/demo-cards.ts index fa91ca2097..d2c485e76e 100644 --- a/gallery/src/components/demo-cards.ts +++ b/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); + } `; } diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts index b64e505d37..53df932748 100644 --- a/hassio/src/hassio-main.ts +++ b/hassio/src/hassio-main.ts @@ -121,7 +121,8 @@ export class HassioMain extends SupervisorBaseElement { this.parentElement, this.hass.themes, themeName, - themeSettings + themeSettings, + true ); } } diff --git a/setup.cfg b/setup.cfg index 3b273584c0..a73c6937e0 100644 --- a/setup.cfg +++ b/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 diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index 8f91bfe8bf..add29139bc 100644 --- a/src/auth/ha-authorize.ts +++ b/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) { diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts index dd5aebc423..ab80caf54b 100644 --- a/src/common/dom/apply_themes_on_element.ts +++ b/src/common/dom/apply_themes_on_element.ts @@ -31,11 +31,12 @@ export const applyThemesOnElement = ( element, themes: HomeAssistant["themes"], selectedTheme?: string, - themeSettings?: Partial + themeSettings?: Partial, + 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 = {}; - if (darkMode) { + if (themeToApply && darkMode) { cacheKey = `${cacheKey}__dark`; themeRules = { ...darkStyles }; } diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts index dc9e875b32..3fd29bcdbf 100644 --- a/src/fake_data/provide_hass.ts +++ b/src/fake_data/provide_hass.ts @@ -300,7 +300,9 @@ export const provideHass = ( applyThemesOnElement( document.documentElement, themes, - selectedTheme!.theme + selectedTheme!.theme, + undefined, + true ); }, diff --git a/src/layouts/supervisor-error-screen.ts b/src/layouts/supervisor-error-screen.ts index cc9a9be2ad..eabb00e439 100644 --- a/src/layouts/supervisor-error-screen.ts +++ b/src/layouts/supervisor-error-screen.ts @@ -101,7 +101,8 @@ class SupervisorErrorScreen extends LitElement { this.parentElement, this.hass.themes, themeName, - themeSettings + themeSettings, + true ); } diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index eb01f05877..3c05e5b680 100644 --- a/src/onboarding/ha-onboarding.ts +++ b/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 + ); } } diff --git a/src/panels/config/automation/blueprint-automation-editor.ts b/src/panels/config/automation/blueprint-automation-editor.ts index e134f3dacd..907ee3bb03 100644 --- a/src/panels/config/automation/blueprint-automation-editor.ts +++ b/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; } diff --git a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts index 2599f61ee3..c018640263 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts +++ b/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, }; } diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 4c59b0d99e..72854d8389 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/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; diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts index cec1eb952e..c7abc8e176 100644 --- a/src/panels/config/helpers/forms/ha-input_select-form.ts +++ b/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` - + ${option} ${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)} > diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts index 5426b494a3..70e9d26390 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts @@ -289,7 +289,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
= { + 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 diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 2aeb262d47..611e52abec 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/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; } diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts index 9729262167..490839b3cd 100644 --- a/src/panels/config/users/dialog-user-detail.ts +++ b/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) { + private _nameChanged(ev) { this._error = undefined; - this._name = ev.detail.value; + this._name = ev.target.value; } private _adminChanged(ev): void { diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts index 9b1f46f96b..0df731ba97 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts +++ b/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) { diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts index 3595a54a59..d56443be0f 100644 --- a/src/state/themes-mixin.ts +++ b/src/state/themes-mixin.ts @@ -38,13 +38,19 @@ export default >(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 >(superClass: T) => document.documentElement, this.hass.themes, themeName, - themeSettings + themeSettings, + true ); if (darkMode !== this.hass.themes.darkMode) {