ZWaveJS: Color Switch support fot the expert UI (#22722)

* ZWaveJS: Color Switch support fot the expert UI

* remove debug code

* fix stopTransition options

* fix options format

src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts

@@ -0,0 +1,84 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import type { HomeAssistant } from "../../../../../../types";
+import { invokeZWaveCCApi } from "../../../../../../data/zwave_js";
+import "../../../../../../components/ha-alert";
+import "../../../../../../components/ha-circular-progress";
+import { extractApiErrorMessage } from "../../../../../../data/hassio/common";
+import "./zwave_js-capability-control-multilevel-switch";
+
+@customElement("zwave_js-capability-control-color_switch")
+class ZWaveJSCapabilityColorSwitch extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public device!: DeviceRegistryEntry;
+
+  @property({ type: Number }) public endpoint!: number;
+
+  @property({ type: Number }) public command_class!: number;
+
+  @property({ type: Number }) public version!: number;
+
+  @state() private _color_components?: number[];
+
+  @state() private _error?: string;
+
+  protected render() {
+    if (this._error) {
+      return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
+    }
+    if (!this._color_components) {
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+    }
+    return this._color_components.map(
+      (color) =>
+        html` <h5>
+            ${this.hass.localize(
+              "ui.panel.config.zwave_js.node_installer.capability_controls.color_switch.color_component"
+            )}:
+            ${color}
+          </h5>
+          <zwave_js-capability-control-multilevel_switch
+            .hass=${this.hass}
+            .device=${this.device}
+            .endpoint=${this.endpoint}
+            .command_class=${this.command_class}
+            .version=${this.version}
+            .transform_options=${this._transformOptions(color)}
+          ></zwave_js-capability-control-multilevel_switch>`
+    );
+  }
+
+  protected async firstUpdated() {
+    try {
+      this._color_components = (await invokeZWaveCCApi(
+        this.hass,
+        this.device.id,
+        this.command_class,
+        this.endpoint,
+        "getSupported",
+        [],
+        true
+      )) as number[];
+    } catch (error) {
+      this._error = extractApiErrorMessage(error);
+    }
+  }
+
+  private _transformOptions(color: number) {
+    return (opts: Record<string, any>, control: string) =>
+      control === "startLevelChange"
+        ? {
+            ...opts,
+            colorComponent: color,
+          }
+        : color;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "zwave_js-capability-control-color_switch": ZWaveJSCapabilityColorSwitch;
+  }
+}

src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-multilevel-switch.ts

@@ -28,6 +28,11 @@ class ZWaveJSCapabilityMultiLevelSwitch extends LitElement {
 
   @property({ type: Number }) public version!: number;
 
+  @property({ attribute: false }) public transform_options?: (
+    opts: Record<string, any>,
+    control: string
+  ) => unknown;
+
   @state() private _error?: string;
 
   protected render() {
@@ -109,6 +114,12 @@ class ZWaveJSCapabilityMultiLevelSwitch extends LitElement {
       (this.shadowRoot!.getElementById("start_level") as HaTextField).value
     );
 
+    const options = {
+      direction,
+      ignoreStartLevel,
+      startLevel,
+    };
+
     try {
       button.actionSuccess();
       await invokeZWaveCCApi(
@@ -117,7 +128,11 @@ class ZWaveJSCapabilityMultiLevelSwitch extends LitElement {
         this.command_class,
         this.endpoint,
         control,
-        [{ direction, ignoreStartLevel, startLevel }],
+        [
+          this.transform_options
+            ? this.transform_options(options, control)
+            : options,
+        ],
         true
       );
     } catch (err) {

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts

@@ -22,10 +22,12 @@ import type { HomeAssistant, Route } from "../../../../../types";
 import "../../../ha-config-section";
 import "./capability-controls/zwave_js-capability-control-multilevel-switch";
 import "./capability-controls/zwave_js-capability-control-thermostat-setback";
+import "./capability-controls/zwave_js-capability-control-color-switch";
 
 const CAPABILITY_CONTROLS = {
   38: "multilevel_switch",
   71: "thermostat_setback",
+  51: "color_switch",
 };
 
 @customElement("zwave_js-node-installer")

src/translations/en.json

@@ -5263,6 +5263,9 @@
                 "start_transition": "Start transition",
                 "stop_transition": "Stop transition",
                 "control_failed": "Failed to control transition. {error}"
+              },
+              "color_switch": {
+                "color_component": "Color component"
               }
             }
           }