diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index a2662ab7bd..65c045f8ab 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -21,6 +21,7 @@ import { DOMAINS_TOGGLE } from "../../../common/const"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { computeActiveState } from "../../../common/entity/compute_active_state"; import { computeDomain } from "../../../common/entity/compute_domain"; +import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { stateIcon } from "../../../common/entity/state_icon"; @@ -36,7 +37,6 @@ import { hasAction } from "../common/has-action"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { ButtonCardConfig } from "./types"; -import { computeStateDisplay } from "../../../common/entity/compute_state_display"; @customElement("hui-button-card") export class HuiButtonCard extends LitElement implements LovelaceCard { @@ -63,11 +63,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { return { type: "button", - tap_action: { action: "toggle" }, - hold_action: { action: "more-info" }, - show_icon: true, - show_name: true, - show_state: false, entity: foundEntities[0] || "", }; } @@ -92,29 +87,18 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { } this._config = { + tap_action: { + action: + config.entity && DOMAINS_TOGGLE.has(computeDomain(config.entity)) + ? "toggle" + : "more-info", + }, hold_action: { action: "more-info" }, - double_tap_action: { action: "none" }, show_icon: true, show_name: true, state_color: true, ...config, }; - - if (config.entity && DOMAINS_TOGGLE.has(computeDomain(config.entity))) { - this._config = { - tap_action: { - action: "toggle", - }, - ...this._config, - }; - } else { - this._config = { - tap_action: { - action: "more-info", - }, - ...this._config, - }; - } } protected shouldUpdate(changedProps: PropertyValues): boolean { diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index 46b5be3735..0da08a86a1 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -20,18 +20,22 @@ import "../../../components/entity/state-badge"; import "../../../components/ha-card"; import "../../../components/ha-icon"; import { UNAVAILABLE_STATES } from "../../../data/entity"; -import { ActionHandlerEvent } from "../../../data/lovelace"; +import { + ActionHandlerEvent, + CallServiceActionConfig, + MoreInfoActionConfig, +} from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; import { findEntities } from "../common/find-entites"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; import { processConfigEntities } from "../common/process-config-entities"; +import "../components/hui-timestamp-display"; +import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; import { LovelaceCard, LovelaceCardEditor } from "../types"; -import "../components/hui-timestamp-display"; import { GlanceCardConfig, GlanceConfigEntity } from "./types"; -import { createEntityNotFoundWarning } from "../components/hui-warning"; @customElement("hui-glance-card") export class HuiGlanceCard extends LitElement implements LovelaceCard { @@ -86,7 +90,14 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { state_color: true, ...config, }; - const entities = processConfigEntities(config.entities); + const entities = processConfigEntities( + config.entities + ).map((entityConf) => { + return { + hold_action: { action: "more-info" } as MoreInfoActionConfig, + ...entityConf, + }; + }); for (const entity of entities) { if ( @@ -95,7 +106,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { !entity.tap_action.service) || (entity.hold_action && entity.hold_action.action === "call-service" && - !entity.hold_action.service) + !(entity.hold_action as CallServiceActionConfig).service) ) { throw new Error( 'Missing required property "service" when tap_action or hold_action is call-service' diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index f05a1c4c1c..0a9bc908b2 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -1,13 +1,13 @@ -import "../../../components/ha-icon-button"; +import { mdiDotsVertical } from "@mdi/js"; import "@thomasloven/round-slider"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -20,7 +20,8 @@ import { computeStateName } from "../../../common/entity/compute_state_name"; import { stateIcon } from "../../../common/entity/state_icon"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-card"; -import { UNAVAILABLE_STATES, UNAVAILABLE } from "../../../data/entity"; +import "../../../components/ha-icon-button"; +import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity"; import { SUPPORT_BRIGHTNESS } from "../../../data/light"; import { ActionHandlerEvent } from "../../../data/lovelace"; import { HomeAssistant, LightEntity } from "../../../types"; @@ -32,7 +33,6 @@ import { hasConfigOrEntityChanged } from "../common/has-changed"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { LightCardConfig } from "./types"; -import { mdiDotsVertical } from "@mdi/js"; @customElement("hui-light-card") export class HuiLightCard extends LitElement implements LovelaceCard { @@ -77,8 +77,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard { } this._config = { - ...config, tap_action: { action: "toggle" }, + hold_action: { action: "more-info" }, + ...config, }; } diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 45c0ea1516..0c04eeccf3 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -28,10 +28,10 @@ import { hasAction } from "../common/has-action"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { processConfigEntities } from "../common/process-config-entities"; import "../components/hui-image"; +import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { PictureGlanceCardConfig, PictureGlanceEntityConfig } from "./types"; -import { createEntityNotFoundWarning } from "../components/hui-warning"; const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]); @@ -104,7 +104,10 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { } }); - this._config = config; + this._config = { + hold_action: { action: "more-info" }, + ...config, + }; } protected shouldUpdate(changedProps: PropertyValues): boolean { @@ -225,6 +228,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { entityConf = { tap_action: { action: dialog ? "more-info" : "toggle" }, + hold_action: { action: "more-info" }, ...entityConf, }; diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index e8a7f71b48..8470bd4c34 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -1,4 +1,4 @@ -import "../../../components/ha-icon-button"; +import { mdiDotsVertical } from "@mdi/js"; import "@thomasloven/round-slider"; import { HassEntity } from "home-assistant-js-websocket"; import { @@ -6,13 +6,13 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, + query, svg, TemplateResult, - query, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import { UNIT_F } from "../../../common/const"; @@ -20,6 +20,8 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/ha-card"; +import type { HaCard } from "../../../components/ha-card"; +import "../../../components/ha-icon-button"; import { ClimateEntity, CLIMATE_PRESET_NONE, @@ -28,14 +30,11 @@ import { } from "../../../data/climate"; import { UNAVAILABLE } from "../../../data/entity"; import { HomeAssistant } from "../../../types"; -import { actionHandler } from "../common/directives/action-handler-directive"; import { findEntities } from "../common/find-entites"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { ThermostatCardConfig } from "./types"; -import type { HaCard } from "../../../components/ha-card"; -import { mdiDotsVertical } from "@mdi/js"; const modeIcons: { [mode in HvacMode]: string } = { auto: "hass:calendar-sync", @@ -385,8 +384,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { class="${classMap({ "selected-icon": currentMode === mode })}" .mode="${mode}" .icon="${modeIcons[mode]}" - @action=${this._handleAction} - .actionHandler=${actionHandler()} + @click=${this._handleAction} tabindex="0" > `; diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts index 90b63d4276..1d90cd20ad 100644 --- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts @@ -62,11 +62,11 @@ export class HuiLightCardEditor extends LitElement } get _hold_action(): ActionConfig { - return this._config!.hold_action || { action: "none" }; + return this._config!.hold_action || { action: "more-info" }; } - get _double_tap_action(): ActionConfig { - return this._config!.double_tap_action || { action: "none" }; + get _double_tap_action(): ActionConfig | undefined { + return this._config!.double_tap_action; } protected render(): TemplateResult { diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts index 7f8ef8ebd9..0009348efb 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts @@ -90,12 +90,12 @@ export class HuiPictureGlanceCardEditor extends LitElement return this._config!.aspect_ratio || ""; } - get _tap_action(): ActionConfig | undefined { - return this._config!.tap_action; + get _tap_action(): ActionConfig { + return this._config!.tap_action || { action: "toggle" }; } - get _hold_action(): ActionConfig | undefined { - return this._config!.hold_action; + get _hold_action(): ActionConfig { + return this._config!.hold_action || { action: "more-info" }; } get _theme(): string { diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts index 82e7a7fc39..4811f219ac 100644 --- a/src/panels/lovelace/elements/hui-icon-element.ts +++ b/src/panels/lovelace/elements/hui-icon-element.ts @@ -3,8 +3,8 @@ import { CSSResult, customElement, html, - LitElement, internalProperty, + LitElement, TemplateResult, } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; @@ -28,7 +28,7 @@ export class HuiIconElement extends LitElement implements LovelaceElement { throw Error("Invalid Configuration: 'icon' required"); } - this._config = config; + this._config = { hold_action: { action: "more-info" }, ...config }; } protected render(): TemplateResult { diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts index a42c7bab8f..50e45c153a 100644 --- a/src/panels/lovelace/elements/hui-image-element.ts +++ b/src/panels/lovelace/elements/hui-image-element.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; @@ -29,12 +29,13 @@ export class HuiImageElement extends LitElement implements LovelaceElement { throw Error("Error in element configuration"); } + this._config = { hold_action: { action: "more-info" }, ...config }; + // eslint-disable-next-line wc/no-self-class this.classList.toggle( "clickable", - config.tap_action && config.tap_action.action !== "none" + this._config.tap_action && this._config.tap_action.action !== "none" ); - this._config = config; } protected render(): TemplateResult { diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts index 2a008921fa..1baa6b0d8d 100644 --- a/src/panels/lovelace/elements/hui-state-badge-element.ts +++ b/src/panels/lovelace/elements/hui-state-badge-element.ts @@ -1,9 +1,9 @@ import { customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -16,9 +16,9 @@ import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; import { hasConfigOrEntityChanged } from "../common/has-changed"; +import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; import { LovelaceElement, StateBadgeElementConfig } from "./types"; -import { createEntityNotFoundWarning } from "../components/hui-warning"; @customElement("hui-state-badge-element") export class HuiStateBadgeElement extends LitElement @@ -32,7 +32,7 @@ export class HuiStateBadgeElement extends LitElement throw Error("Invalid Configuration: 'entity' required"); } - this._config = config; + this._config = { hold_action: { action: "more-info" }, ...config }; } protected shouldUpdate(changedProps: PropertyValues): boolean { diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index d4a1a2eba1..84c8593ad0 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -18,9 +18,9 @@ import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; import { hasConfigOrEntityChanged } from "../common/has-changed"; +import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; import { LovelaceElement, StateIconElementConfig } from "./types"; -import { createEntityNotFoundWarning } from "../components/hui-warning"; @customElement("hui-state-icon-element") export class HuiStateIconElement extends LitElement implements LovelaceElement { @@ -33,7 +33,11 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { throw Error("Invalid Configuration: 'entity' required"); } - this._config = { state_color: true, ...config }; + this._config = { + state_color: true, + hold_action: { action: "more-info" }, + ...config, + }; } protected shouldUpdate(changedProps: PropertyValues): boolean { diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index 08de7d4516..7296f0dc64 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -18,9 +18,9 @@ import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; import { hasConfigOrEntityChanged } from "../common/has-changed"; +import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; import { LovelaceElement, StateLabelElementConfig } from "./types"; -import { createEntityNotFoundWarning } from "../components/hui-warning"; @customElement("hui-state-label-element") class HuiStateLabelElement extends LitElement implements LovelaceElement { @@ -33,7 +33,7 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { throw Error("Invalid Configuration: 'entity' required"); } - this._config = config; + this._config = { hold_action: { action: "more-info" }, ...config }; } protected shouldUpdate(changedProps: PropertyValues): boolean {