Support white color mode (#9386)

src/data/light.ts

@@ -8,6 +8,7 @@ export enum LightColorModes {
   ONOFF = "onoff",
   BRIGHTNESS = "brightness",
   COLOR_TEMP = "color_temp",
+  WHITE = "white",
   HS = "hs",
   XY = "xy",
   RGB = "rgb",

src/dialogs/more-info/controls/more-info-light.ts

@@ -9,6 +9,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-button-toggle-group";
@@ -28,11 +29,6 @@ import {
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
 
-const toggleButtons = [
-  { label: "Color", value: "color" },
-  { label: "Temperature", value: LightColorModes.COLOR_TEMP },
-];
-
 @customElement("more-info-light")
 class MoreInfoLight extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -59,7 +55,7 @@ class MoreInfoLight extends LitElement {
 
   @state() private _colorPickerColor?: [number, number, number];
 
-  @state() private _mode?: "color" | LightColorModes.COLOR_TEMP;
+  @state() private _mode?: "color" | LightColorModes;
 
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
@@ -71,6 +67,11 @@ class MoreInfoLight extends LitElement {
       LightColorModes.COLOR_TEMP
     );
 
+    const supportsWhite = lightSupportsColorMode(
+      this.stateObj,
+      LightColorModes.WHITE
+    );
+
     const supportsRgbww = lightSupportsColorMode(
       this.stateObj,
       LightColorModes.RGBWW
@@ -101,16 +102,17 @@ class MoreInfoLight extends LitElement {
         ${this.stateObj.state === "on"
           ? html`
               ${supportsTemp || supportsColor ? html`<hr />` : ""}
-              ${supportsTemp && supportsColor
+              ${supportsColor && (supportsTemp || supportsWhite)
                 ? html`<ha-button-toggle-group
                     fullWidth
-                    .buttons=${toggleButtons}
+                    .buttons=${this._toggleButtons(supportsTemp, supportsWhite)}
                     .active=${this._mode}
                     @value-changed=${this._modeChanged}
                   ></ha-button-toggle-group>`
                 : ""}
               ${supportsTemp &&
-              (!supportsColor || this._mode === LightColorModes.COLOR_TEMP)
+              ((!supportsColor && !supportsWhite) ||
+                this._mode === LightColorModes.COLOR_TEMP)
                 ? html`
                     <ha-labeled-slider
                       class="color_temp"
@@ -126,7 +128,8 @@ class MoreInfoLight extends LitElement {
                     ></ha-labeled-slider>
                   `
                 : ""}
-              ${supportsColor && (!supportsTemp || this._mode === "color")
+              ${supportsColor &&
+              ((!supportsTemp && !supportsWhite) || this._mode === "color")
                 ? html`
                     <div class="segmentationContainer">
                       <ha-color-picker
@@ -251,7 +254,7 @@ class MoreInfoLight extends LitElement {
       ) {
         this._mode = lightIsInColorMode(this.stateObj!)
           ? "color"
-          : LightColorModes.COLOR_TEMP;
+          : this.stateObj!.attributes.color_mode;
       }
 
       let brightnessAdjust = 100;
@@ -300,6 +303,19 @@ class MoreInfoLight extends LitElement {
     }
   }
 
+  private _toggleButtons = memoizeOne(
+    (supportsTemp: boolean, supportsWhite: boolean) => {
+      const modes = [{ label: "Color", value: "color" }];
+      if (supportsTemp) {
+        modes.push({ label: "Temperature", value: LightColorModes.COLOR_TEMP });
+      }
+      if (supportsWhite) {
+        modes.push({ label: "White", value: LightColorModes.WHITE });
+      }
+      return modes;
+    }
+  );
+
   private _modeChanged(ev: CustomEvent) {
     this._mode = ev.detail.value;
   }
@@ -326,6 +342,14 @@ class MoreInfoLight extends LitElement {
 
     this._brightnessSliderValue = bri;
 
+    if (this._mode === LightColorModes.WHITE) {
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        white: Math.min(255, Math.round((bri * 255) / 100)),
+      });
+      return;
+    }
+
     if (this._brightnessAdjusted) {
       const rgb =
         this.stateObj!.attributes.rgb_color ||