diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 5c0ec2b390..e26ccf6736 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -1,6 +1,6 @@ import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { customElement, state } from "lit/decorators"; import { DOMAINS_TOGGLE } from "../../../common/const"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { computeDomain } from "../../../common/entity/compute_domain"; @@ -20,11 +20,9 @@ import type { import type { LovelaceCard, LovelaceCardEditor, - LovelaceGridOptions, LovelaceHeaderFooter, } from "../types"; import type { EntitiesCardConfig } from "./types"; -import { haStyleScrollbar } from "../../../resources/styles"; export const computeShowHeaderToggle = < T extends EntityConfig | LovelaceRowConfig, @@ -77,8 +75,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { private _hass?: HomeAssistant; - @property({ attribute: false }) public layout?: string; - private _configEntities?: LovelaceRowConfig[]; private _showHeaderToggle?: boolean; @@ -143,14 +139,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { return size; } - public getGridOptions(): LovelaceGridOptions { - return { - columns: 12, - min_columns: 6, - min_rows: this._config?.title || this._showHeaderToggle ? 3 : 2, - }; - } - public setConfig(config: EntitiesCardConfig): void { if (!config.entities || !Array.isArray(config.entities)) { throw new Error("Entities must be specified"); @@ -245,7 +233,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { `} `} -
+
${this._configEntities!.map((entityConf) => this._renderEntity(entityConf) )} @@ -258,73 +246,69 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { `; } - static styles = [ - haStyleScrollbar, - css` - ha-card { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - } - .card-header { - display: flex; - justify-content: space-between; - } + static styles = css` + ha-card { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + } + .card-header { + display: flex; + justify-content: space-between; + } - .card-header .name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .card-header .name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - #states { - flex: 1; - display: flex; - flex-direction: column; - gap: var(--entities-card-row-gap, var(--card-row-gap, 8px)); - overflow-y: auto; - } + #states { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--entities-card-row-gap, var(--card-row-gap, 8px)); + } - #states > div > * { - overflow: clip visible; - } + #states > div > * { + overflow: clip visible; + } - #states > div { - position: relative; - } + #states > div { + position: relative; + } - .icon { - padding: 0px 18px 0px 8px; - } + .icon { + padding: 0px 18px 0px 8px; + } - .header { - border-top-left-radius: var( - --ha-card-border-radius, - var(--ha-border-radius-lg) - ); - border-top-right-radius: var( - --ha-card-border-radius, - var(--ha-border-radius-lg) - ); - margin-bottom: 16px; - overflow: hidden; - } + .header { + border-top-left-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); + border-top-right-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); + margin-bottom: 16px; + overflow: hidden; + } - .footer { - border-bottom-left-radius: var( - --ha-card-border-radius, - var(--ha-border-radius-lg) - ); - border-bottom-right-radius: var( - --ha-card-border-radius, - var(--ha-border-radius-lg) - ); - margin-top: -16px; - overflow: hidden; - } - `, - ]; + .footer { + border-bottom-left-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); + border-bottom-right-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); + margin-top: -16px; + overflow: hidden; + } + `; private _renderEntity(entityConf: LovelaceRowConfig): TemplateResult { const element = createRowElement(