diff --git a/src/panels/lovelace/badges/hui-badge.ts b/src/panels/lovelace/badges/hui-badge.ts index bbcd083c55..7637d2c464 100644 --- a/src/panels/lovelace/badges/hui-badge.ts +++ b/src/panels/lovelace/badges/hui-badge.ts @@ -57,9 +57,6 @@ export class HuiBadge extends ReactiveElement { } private _updateElement(config: LovelaceBadgeConfig) { - if (config.type === "state-label") { - config = { display_type: "complete", ...config, type: "entity" }; - } if (!this._element) { return; } @@ -69,9 +66,6 @@ export class HuiBadge extends ReactiveElement { } private _loadElement(config: LovelaceBadgeConfig) { - if (config.type === "state-label") { - config = { display_type: "complete", ...config, type: "entity" }; - } this._element = createBadgeElement(config); this._elementConfig = config; if (this.hass) { diff --git a/src/panels/lovelace/badges/hui-state-label-badge.ts b/src/panels/lovelace/badges/hui-state-label-badge.ts index 89751a720c..c3c273cc62 100644 --- a/src/panels/lovelace/badges/hui-state-label-badge.ts +++ b/src/panels/lovelace/badges/hui-state-label-badge.ts @@ -1,71 +1,25 @@ -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; -import { customElement, property, state } from "lit/decorators"; -import { ifDefined } from "lit/directives/if-defined"; +import { customElement } from "lit/decorators"; import "../../../components/entity/ha-state-label-badge"; -import { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; -import { HomeAssistant } from "../../../types"; -import { actionHandler } from "../common/directives/action-handler-directive"; -import { handleAction } from "../common/handle-action"; -import { hasAction } from "../common/has-action"; -import { LovelaceBadge } from "../types"; -import { StateLabelBadgeConfig } from "./types"; +import { HuiStateLabelBadgeEditor } from "../editor/config-elements/hui-state-label-badge-editor"; +import { HuiEntityBadge } from "./hui-entity-badge"; +import { EntityBadgeConfig, StateLabelBadgeConfig } from "./types"; @customElement("hui-state-label-badge") -export class HuiStateLabelBadge extends LitElement implements LovelaceBadge { - @property({ attribute: false }) public hass?: HomeAssistant; - - @state() protected _config?: StateLabelBadgeConfig; - - public setConfig(config: StateLabelBadgeConfig): void { - this._config = config; +export class HuiStateLabelBadge extends HuiEntityBadge { + public static async getConfigElement(): Promise { + await import("../editor/config-elements/hui-state-label-badge-editor"); + return document.createElement("hui-state-label-badge-editor"); } - protected render() { - if (!this._config || !this.hass) { - return nothing; - } + // @ts-ignore + public override setConfig(config: StateLabelBadgeConfig): void { + const entityBadgeConfig: EntityBadgeConfig = { + type: "entity", + entity: config.entity, + display_type: config.show_name === false ? "standard" : "complete", + }; - const stateObj = this.hass.states[this._config.entity!]; - - return html` - - `; - } - - private _handleAction(ev: ActionHandlerEvent) { - handleAction(this, this.hass!, this._config!, ev.detail.action!); - } - - static get styles(): CSSResultGroup { - return css` - ha-state-label-badge:focus { - outline: none; - background: var(--divider-color); - border-radius: 4px; - } - ha-state-label-badge { - display: inline-block; - padding: 4px 2px 4px 2px; - margin: -4px -2px -4px -2px; - } - `; + this._config = entityBadgeConfig; } } diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts index efd61b5309..b469ae9d18 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts @@ -109,10 +109,6 @@ export class HuiDialogEditBadge this._badgeConfig = badge != null ? ensureBadgeConfig(badge) : badge; } - if (this._badgeConfig?.type === "state-label") { - this._badgeConfig = { ...this._badgeConfig, type: "entity" }; - } - this.large = false; if (this._badgeConfig && !Object.isFrozen(this._badgeConfig)) { this._badgeConfig = deepFreeze(this._badgeConfig); diff --git a/src/panels/lovelace/editor/config-elements/hui-state-label-badge-editor.ts b/src/panels/lovelace/editor/config-elements/hui-state-label-badge-editor.ts new file mode 100644 index 0000000000..230618ef47 --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-state-label-badge-editor.ts @@ -0,0 +1,45 @@ +import { customElement } from "lit/decorators"; +import { assert, assign, boolean, object, optional, string } from "superstruct"; +import "../../../../components/ha-form/ha-form"; +import { EntityBadgeConfig } from "../../badges/types"; +import "../hui-sub-element-editor"; +import { actionConfigStruct } from "../structs/action-struct"; +import { baseLovelaceBadgeConfig } from "../structs/base-badge-struct"; +import "./hui-card-features-editor"; +import { HuiEntityBadgeEditor } from "./hui-entity-badge-editor"; + +const badgeConfigStruct = assign( + baseLovelaceBadgeConfig, + object({ + entity: optional(string()), + name: optional(string()), + icon: optional(string()), + show_entity_picture: optional(boolean()), + tap_action: optional(actionConfigStruct), + show_name: optional(boolean()), + image: optional(string()), + }) +); + +@customElement("hui-state-label-badge-editor") +export class HuiStateLabelBadgeEditor extends HuiEntityBadgeEditor { + // @ts-ignore + public override setConfig(config: StateLabelBadgeConfig): void { + assert(config, badgeConfigStruct); + + const entityBadgeConfig: EntityBadgeConfig = { + type: "entity", + entity: config.entity, + display_type: config.show_name === false ? "standard" : "complete", + }; + + // @ts-ignore + this._config = entityBadgeConfig; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-state-label-badge-editor": HuiStateLabelBadgeEditor; + } +}