diff --git a/src/panels/lovelace/badges/hui-badge.ts b/src/panels/lovelace/badges/hui-badge.ts index 9b362fd173a5..7637d2c464c1 100644 --- a/src/panels/lovelace/badges/hui-badge.ts +++ b/src/panels/lovelace/badges/hui-badge.ts @@ -15,6 +15,7 @@ import type { LovelaceBadge } from "../types"; declare global { interface HASSDomEvents { + "badge-visibility-changed": { value: boolean }; "badge-updated": undefined; } } @@ -183,6 +184,7 @@ export class HuiBadge extends ReactiveElement { if (this.hidden !== !visible) { this.style.setProperty("display", visible ? "" : "none"); this.toggleAttribute("hidden", !visible); + fireEvent(this, "badge-visibility-changed", { value: visible }); } if (!visible && this._element.parentElement) { diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts index 64bfa106b82e..b1736b97ddf3 100644 --- a/src/panels/lovelace/badges/hui-view-badges.ts +++ b/src/panels/lovelace/badges/hui-view-badges.ts @@ -1,5 +1,12 @@ import { mdiPlus } from "@mdi/js"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -33,6 +40,38 @@ export class HuiViewBadges extends LitElement { private _badgeConfigKeys = new WeakMap<HuiBadge, string>(); + private _checkAllHidden() { + const allHidden = + !this.lovelace.editMode && this.badges.every((section) => section.hidden); + this.toggleAttribute("hidden", allHidden); + } + + private _badgeVisibilityChanged = () => { + this._checkAllHidden(); + }; + + connectedCallback(): void { + super.connectedCallback(); + this.addEventListener( + "badge-visibility-changed", + this._badgeVisibilityChanged + ); + } + + disconnectedCallback(): void { + super.disconnectedCallback(); + this.removeEventListener( + "badge-visibility-changed", + this._badgeVisibilityChanged + ); + } + + willUpdate(changedProperties: PropertyValues<typeof this>): void { + if (changedProperties.has("badges") || changedProperties.has("lovelace")) { + this._checkAllHidden(); + } + } + private _getBadgeKey(badge: HuiBadge) { if (!this._badgeConfigKeys.has(badge)) { this._badgeConfigKeys.set(badge, Math.random().toString()); @@ -130,6 +169,10 @@ export class HuiViewBadges extends LitElement { static get styles(): CSSResultGroup { return css` + :host([hidden]) { + display: none !important; + } + .badges { display: flex; align-items: flex-start; diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index 7199cd2b7a28..722210f48d4c 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -65,11 +65,24 @@ export class SectionsView extends LitElement implements LovelaceViewElement { ).length; } + private _sectionVisibilityChanged = () => { + this._computeSectionsCount(); + }; + connectedCallback(): void { super.connectedCallback(); - this.addEventListener("section-visibility-changed", () => { - this._computeSectionsCount(); - }); + this.addEventListener( + "section-visibility-changed", + this._sectionVisibilityChanged + ); + } + + disconnectedCallback(): void { + super.disconnectedCallback(); + this.removeEventListener( + "section-visibility-changed", + this._sectionVisibilityChanged + ); } willUpdate(changedProperties: PropertyValues<typeof this>): void {