Added support for color temperature tile feature (#16515)

* Added support for color temperature tile feature

* Update src/panels/lovelace/tile-features/hui-light-color-temp-tile-feature.ts

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

gallery/src/pages/lovelace/tile-card.ts

@@ -14,7 +14,7 @@ const ENTITIES = [
   }),
   getEntity("light", "bed_light", "on", {
     friendly_name: "Bed Light",
-    supported_color_modes: [LightColorMode.HS],
+    supported_color_modes: [LightColorMode.HS, LightColorMode.COLOR_TEMP],
   }),
   getEntity("light", "unavailable", "unavailable", {
     friendly_name: "Unavailable entity",
@@ -116,6 +116,15 @@ const CONFIGS = [
     - type: "light-brightness"
     `,
   },
+  {
+    heading: "Light color temperature feature",
+    config: `
+- type: tile
+  entity: light.bed_light
+  features:
+    - type: "color-temp"
+    `,
+  },
   {
     heading: "Vacuum commands feature",
     config: `

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

@@ -4,6 +4,7 @@ import "../tile-features/hui-cover-open-close-tile-feature";
 import "../tile-features/hui-cover-tilt-tile-feature";
 import "../tile-features/hui-fan-speed-tile-feature";
 import "../tile-features/hui-light-brightness-tile-feature";
+import "../tile-features/hui-light-color-temp-tile-feature";
 import "../tile-features/hui-vacuum-commands-tile-feature";
 import "../tile-features/hui-water-heater-operation-modes-tile-feature";
 import { LovelaceTileFeatureConfig } from "../tile-features/types";
@@ -16,6 +17,7 @@ const TYPES: Set<LovelaceTileFeatureConfig["type"]> = new Set([
   "cover-open-close",
   "cover-tilt",
   "light-brightness",
+  "light-color-temp",
   "vacuum-commands",
   "fan-speed",
   "alarm-modes",

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

@@ -31,6 +31,7 @@ import { supportsCoverOpenCloseTileFeature } from "../../tile-features/hui-cover
 import { supportsCoverTiltTileFeature } from "../../tile-features/hui-cover-tilt-tile-feature";
 import { supportsFanSpeedTileFeature } from "../../tile-features/hui-fan-speed-tile-feature";
 import { supportsLightBrightnessTileFeature } from "../../tile-features/hui-light-brightness-tile-feature";
+import { supportsLightColorTempTileFeature } from "../../tile-features/hui-light-color-temp-tile-feature";
 import { supportsVacuumCommandTileFeature } from "../../tile-features/hui-vacuum-commands-tile-feature";
 import { supportsWaterHeaterOperationModesTileFeature } from "../../tile-features/hui-water-heater-operation-modes-tile-feature";
 import { LovelaceTileFeatureConfig } from "../../tile-features/types";
@@ -42,6 +43,7 @@ const FEATURE_TYPES: FeatureType[] = [
   "cover-open-close",
   "cover-tilt",
   "light-brightness",
+  "light-color-temp",
   "vacuum-commands",
   "fan-speed",
   "alarm-modes",
@@ -61,6 +63,7 @@ const SUPPORTS_FEATURE_TYPES: Record<FeatureType, SupportsFeature | undefined> =
     "cover-open-close": supportsCoverOpenCloseTileFeature,
     "cover-tilt": supportsCoverTiltTileFeature,
     "light-brightness": supportsLightBrightnessTileFeature,
+    "light-color-temp": supportsLightColorTempTileFeature,
     "vacuum-commands": supportsVacuumCommandTileFeature,
     "fan-speed": supportsFanSpeedTileFeature,
     "alarm-modes": supportsAlarmModesTileFeature,

src/panels/lovelace/tile-features/hui-light-color-temp-tile-feature.ts

@@ -0,0 +1,111 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { stateActive } from "../../../common/entity/state_active";
+import "../../../components/ha-control-slider";
+import { UNAVAILABLE } from "../../../data/entity";
+import { LightColorMode, lightSupportsColorMode } from "../../../data/light";
+import { HomeAssistant } from "../../../types";
+import { LovelaceTileFeature } from "../types";
+import { LightColorTempTileFeatureConfig } from "./types";
+
+export const supportsLightColorTempTileFeature = (stateObj: HassEntity) => {
+  const domain = computeDomain(stateObj.entity_id);
+  return (
+    domain === "light" &&
+    lightSupportsColorMode(stateObj, LightColorMode.COLOR_TEMP)
+  );
+};
+
+@customElement("hui-light-color-temp-tile-feature")
+class HuiLightColorTempTileFeature
+  extends LitElement
+  implements LovelaceTileFeature
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @state() private _config?: LightColorTempTileFeatureConfig;
+
+  static getStubConfig(): LightColorTempTileFeatureConfig {
+    return {
+      type: "light-color-temp",
+    };
+  }
+
+  public setConfig(config: LightColorTempTileFeatureConfig): void {
+    if (!config) {
+      throw new Error("Invalid configuration");
+    }
+    this._config = config;
+  }
+
+  protected render() {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.stateObj ||
+      !supportsLightColorTempTileFeature(this.stateObj)
+    ) {
+      return nothing;
+    }
+
+    const position =
+      this.stateObj.attributes.color_temp_kelvin != null
+        ? this.stateObj.attributes.color_temp_kelvin
+        : undefined;
+
+    return html`
+      <div class="container">
+        <ha-control-slider
+          .value=${position}
+          mode="cursor"
+          .showHandle=${stateActive(this.stateObj)}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
+          @value-changed=${this._valueChanged}
+          .label=${this.hass.localize("ui.card.light.color_temperature")}
+          .min=${this.stateObj.attributes.min_color_temp_kelvin!}
+          .max=${this.stateObj.attributes.max_color_temp_kelvin!}
+        ></ha-control-slider>
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+
+    this.hass!.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      color_temp_kelvin: value,
+    });
+  }
+
+  static get styles() {
+    return css`
+      ha-control-slider {
+        --control-slider-background: -webkit-linear-gradient(
+          left,
+          rgb(255, 160, 0) 0%,
+          white 50%,
+          rgb(166, 209, 255) 100%
+        );
+        --control-slider-background-opacity: 1;
+        --control-slider-thickness: 40px;
+        --control-slider-border-radius: 10px;
+      }
+      .container {
+        padding: 0 12px 12px 12px;
+        width: auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-light-color-temp-tile-feature": HuiLightColorTempTileFeature;
+  }
+}

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

@@ -14,6 +14,10 @@ export interface LightBrightnessTileFeatureConfig {
   type: "light-brightness";
 }
 
+export interface LightColorTempTileFeatureConfig {
+  type: "light-color-temp";
+}
+
 export interface FanSpeedTileFeatureConfig {
   type: "fan-speed";
 }
@@ -52,6 +56,7 @@ export type LovelaceTileFeatureConfig =
   | CoverOpenCloseTileFeatureConfig
   | CoverTiltTileFeatureConfig
   | LightBrightnessTileFeatureConfig
+  | LightColorTempTileFeatureConfig
   | VacuumCommandsTileFeatureConfig
   | FanSpeedTileFeatureConfig
   | AlarmModesTileFeatureConfig

src/translations/en.json

@@ -4988,6 +4988,9 @@
                   "light-brightness": {
                     "label": "Light brightness"
                   },
+                  "light-color-temp": {
+                    "label": "Light color temperature"
+                  },
                   "vacuum-commands": {
                     "label": "Vacuum commands",
                     "commands": "Commands",