Rename switch-toggle feature to toggle and improve (#24333)

* Rename `switch-toggle` feature to `toggle` and improve

* Format

src/panels/lovelace/card-features/hui-toggle-card-feature.ts

@@ -12,32 +12,29 @@ import { UNAVAILABLE } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCardFeature } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
-import type { SwitchToggleCardFeatureConfig } from "./types";
+import type { ToggleCardFeatureConfig } from "./types";
 import { showToast } from "../../../util/toast";
 
-export const supportsSwitchToggleCardFeature = (stateObj: HassEntity) => {
+export const supportsToggleCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
-  return domain === "switch";
+  return ["switch", "input_boolean"].includes(domain);
 };
 
-@customElement("hui-switch-toggle-card-feature")
+@customElement("hui-toggle-card-feature")
-class HuiSwitchToggleCardFeature
+class HuiToggleCardFeature extends LitElement implements LovelaceCardFeature {
-  extends LitElement
-  implements LovelaceCardFeature
-{
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: SwitchToggleCardFeatureConfig;
+  @state() private _config?: ToggleCardFeatureConfig;
 
-  static getStubConfig(): SwitchToggleCardFeatureConfig {
+  static getStubConfig(): ToggleCardFeatureConfig {
     return {
-      type: "switch-toggle",
+      type: "toggle",
     };
   }
 
-  public setConfig(config: SwitchToggleCardFeatureConfig): void {
+  public setConfig(config: ToggleCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -49,7 +46,7 @@ class HuiSwitchToggleCardFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsSwitchToggleCardFeature(this.stateObj)
+      !supportsToggleCardFeature(this.stateObj)
     ) {
       return null;
     }
@@ -81,17 +78,22 @@ class HuiSwitchToggleCardFeature
   private async _valueChanged(ev: CustomEvent) {
     const newState = (ev.detail as any).value;
 
-    if (newState === this.stateObj!.state) return;
+    if (
+      newState === this.stateObj!.state &&
+      !this.stateObj!.attributes.assumed_state
+    )
+      return;
     const service = newState === "on" ? "turn_on" : "turn_off";
+    const domain = computeDomain(this.stateObj!.entity_id);
 
     try {
-      await this.hass!.callService("switch", service, {
+      await this.hass!.callService(domain, service, {
         entity_id: this.stateObj!.entity_id,
       });
     } catch (_err) {
       showToast(this, {
         message: this.hass!.localize("ui.notification_toast.action_failed", {
-          service: "switch." + service,
+          service: domain + "." + service,
         }),
         duration: 5000,
         dismissable: true,
@@ -104,6 +106,6 @@ class HuiSwitchToggleCardFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-switch-toggle-card-feature": HuiSwitchToggleCardFeature;
+    "hui-toggle-card-feature": HuiToggleCardFeature;
   }
 }

src/panels/lovelace/card-features/types.ts

@@ -88,10 +88,6 @@ export interface SelectOptionsCardFeatureConfig {
   options?: string[];
 }
 
-export interface SwitchToggleCardFeatureConfig {
-  type: "switch-toggle";
-}
-
 export interface NumericInputCardFeatureConfig {
   type: "numeric-input";
   style?: "buttons" | "slider";
@@ -105,6 +101,10 @@ export interface TargetTemperatureCardFeatureConfig {
   type: "target-temperature";
 }
 
+export interface ToggleCardFeatureConfig {
+  type: "toggle";
+}
+
 export interface WaterHeaterOperationModesCardFeatureConfig {
   type: "water-heater-operation-modes";
   operation_modes?: OperationMode[];
@@ -172,9 +172,9 @@ export type LovelaceCardFeatureConfig =
   | MediaPlayerVolumeSliderCardFeatureConfig
   | NumericInputCardFeatureConfig
   | SelectOptionsCardFeatureConfig
-  | SwitchToggleCardFeatureConfig
   | TargetHumidityCardFeatureConfig
   | TargetTemperatureCardFeatureConfig
+  | ToggleCardFeatureConfig
   | UpdateActionsCardFeatureConfig
   | VacuumCommandsCardFeatureConfig
   | WaterHeaterOperationModesCardFeatureConfig;

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -20,9 +20,9 @@ import "../card-features/hui-lock-open-door-card-feature";
 import "../card-features/hui-media-player-volume-slider-card-feature";
 import "../card-features/hui-numeric-input-card-feature";
 import "../card-features/hui-select-options-card-feature";
-import "../card-features/hui-switch-toggle-card-feature";
 import "../card-features/hui-target-temperature-card-feature";
 import "../card-features/hui-target-humidity-card-feature";
+import "../card-features/hui-toggle-card-feature";
 import "../card-features/hui-update-actions-card-feature";
 import "../card-features/hui-vacuum-commands-card-feature";
 import "../card-features/hui-water-heater-operation-modes-card-feature";
@@ -56,9 +56,9 @@ const TYPES = new Set<LovelaceCardFeatureConfig["type"]>([
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "switch-toggle",
   "target-humidity",
   "target-temperature",
+  "toggle",
   "update-actions",
   "vacuum-commands",
   "water-heater-operation-modes",

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -40,9 +40,9 @@ import { supportsLockOpenDoorCardFeature } from "../../card-features/hui-lock-op
 import { supportsMediaPlayerVolumeSliderCardFeature } from "../../card-features/hui-media-player-volume-slider-card-feature";
 import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature";
 import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
-import { supportsSwitchToggleCardFeature } from "../../card-features/hui-switch-toggle-card-feature";
 import { supportsTargetHumidityCardFeature } from "../../card-features/hui-target-humidity-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
+import { supportsToggleCardFeature } from "../../card-features/hui-toggle-card-feature";
 import { supportsUpdateActionsCardFeature } from "../../card-features/hui-update-actions-card-feature";
 import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
 import { supportsWaterHeaterOperationModesCardFeature } from "../../card-features/hui-water-heater-operation-modes-card-feature";
@@ -75,9 +75,9 @@ const UI_FEATURE_TYPES = [
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "switch-toggle",
   "target-humidity",
   "target-temperature",
+  "toggle",
   "update-actions",
   "vacuum-commands",
   "water-heater-operation-modes",
@@ -131,10 +131,10 @@ const SUPPORTS_FEATURE_TYPES: Record<
   "select-options": supportsSelectOptionsCardFeature,
   "target-humidity": supportsTargetHumidityCardFeature,
   "target-temperature": supportsTargetTemperatureCardFeature,
+  toggle: supportsToggleCardFeature,
   "update-actions": supportsUpdateActionsCardFeature,
   "vacuum-commands": supportsVacuumCommandsCardFeature,
   "water-heater-operation-modes": supportsWaterHeaterOperationModesCardFeature,
-  "switch-toggle": supportsSwitchToggleCardFeature,
 };
 
 const customCardFeatures = getCustomCardFeatures();

src/translations/en.json

@@ -7348,8 +7348,8 @@
                 "options": "Options",
                 "customize_options": "Customize options"
               },
-              "switch-toggle": {
+              "toggle": {
-                "label": "Switch toggle"
+                "label": "Toggle"
               },
               "numeric-input": {
                 "label": "Numeric input",