Introducing Distinct Color Temperature Selectors: Mireds and Kelvin

gallery/src/pages/components/ha-selector.ts

@@ -266,9 +266,13 @@ const SCHEMAS: {
         name: "Location with radius",
         selector: { location: { radius: true, icon: "mdi:home" } },
       },
-      color_temp: {
-        name: "Color Temperature",
-        selector: { color_temp: {} },
+      color_temp_mired: {
+        name: "Color Temperature Mired",
+        selector: { color_temp_mired: {} },
+      },
+      color_temp_kelvin: {
+        name: "Color Temperature Kelvin",
+        selector: { color_temp_kelvin: {} },
       },
       color_rgb: { name: "Color", selector: { color_rgb: {} } },
     },

src/components/ha-selector/ha-selector-color-temp.ts → src/components/ha-selector/ha-selector-color-temp-base.ts

@@ -1,16 +1,12 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { ColorTempSelector } from "../../data/selector";
+import { html, LitElement } from "lit";
+import { property } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
+import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-labeled-slider";
 
-@customElement("ha-selector-color_temp")
-export class HaColorTempSelector extends LitElement {
+export class BaseTemperatureSelector extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @property() public selector!: ColorTempSelector;
-
   @property() public value?: string;
 
   @property() public label?: string;
@@ -21,14 +17,18 @@ export class HaColorTempSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @property() public minValue: number = 0;
+
+  @property() public maxValue: number = 0;
+
   protected render() {
     return html`
       <ha-labeled-slider
         labeled
         icon="hass:thermometer"
         .caption=${this.label || ""}
-        .min=${this.selector.color_temp?.min_mireds ?? 153}
-        .max=${this.selector.color_temp?.max_mireds ?? 500}
+        .min=${this.minValue}
+        .max=${this.maxValue}
         .value=${this.value}
         .disabled=${this.disabled}
         .helper=${this.helper}
@@ -43,21 +43,4 @@ export class HaColorTempSelector extends LitElement {
       value: Number((ev.detail as any).value),
     });
   }
-
-  static styles = css`
-    ha-labeled-slider {
-      --ha-slider-background: linear-gradient(
-        to var(--float-end),
-        rgb(255, 160, 0) 0%,
-        white 50%,
-        rgb(166, 209, 255) 100%
-      );
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-color_temp": HaColorTempSelector;
-  }
 }

src/components/ha-selector/ha-selector-color-temp-kelvin.ts

@@ -0,0 +1,37 @@
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { ColorTempKelvinSelector } from "../../data/selector";
+import { BaseTemperatureSelector } from "./ha-selector-color-temp-base";
+
+@customElement("ha-selector-color_temp_kelvin")
+export class HaColorTempSelectorKelvin extends BaseTemperatureSelector {
+  @property() public selector!: ColorTempKelvinSelector;
+
+  @property() public minValue: number = 2700;
+
+  @property() public maxValue: number = 6000;
+
+  updated(changedProperties) {
+    if (changedProperties.has("selector")) {
+      this.minValue = this.selector.color_temp_kelvin?.min ?? this.minValue;
+      this.maxValue = this.selector.color_temp_kelvin?.max ?? this.maxValue;
+    }
+  }
+
+  static styles = css`
+    ha-labeled-slider {
+      --ha-slider-background: linear-gradient(
+        to var(--float-end),
+        rgb(166, 209, 255) 0%,
+        white 50%,
+        rgb(255, 160, 0) 100%
+      );
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-color_temp_kelvin": HaColorTempSelectorKelvin;
+  }
+}

src/components/ha-selector/ha-selector-color-temp-mired.ts

@@ -0,0 +1,37 @@
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { ColorTempMiredSelector } from "../../data/selector";
+import { BaseTemperatureSelector } from "./ha-selector-color-temp-base";
+
+@customElement("ha-selector-color_temp_mired")
+export class HaColorTempSelectorMired extends BaseTemperatureSelector {
+  @property() public selector!: ColorTempMiredSelector;
+
+  @property() public minValue: number = 153;
+
+  @property() public maxValue: number = 500;
+
+  updated(changedProperties) {
+    if (changedProperties.has("selector")) {
+      this.minValue = this.selector.color_temp_mired?.min ?? this.minValue;
+      this.maxValue = this.selector.color_temp_mired?.max ?? this.maxValue;
+    }
+  }
+
+  static styles = css`
+    ha-labeled-slider {
+      --ha-slider-background: linear-gradient(
+        to var(--float-end),
+        rgb(255, 160, 0) 0%,
+        white 50%,
+        rgb(166, 209, 255) 100%
+      );
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-color_temp_mired": HaColorTempSelectorMired;
+  }
+}

src/components/ha-selector/ha-selector-color-temp-old.ts

@@ -0,0 +1,37 @@
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { OldColorTempSelector } from "../../data/selector";
+import { BaseTemperatureSelector } from "./ha-selector-color-temp-base";
+
+@customElement("ha-selector-color_temp")
+export class HaColorTempSelector extends BaseTemperatureSelector {
+  @property() public selector!: OldColorTempSelector;
+
+  @property() public minValue: number = 153;
+
+  @property() public maxValue: number = 500;
+
+  updated(changedProperties) {
+    if (changedProperties.has("selector")) {
+      this.minValue = this.selector.color_temp?.min_mireds ?? this.minValue;
+      this.maxValue = this.selector.color_temp?.max_mireds ?? this.maxValue;
+    }
+  }
+
+  static styles = css`
+    ha-labeled-slider {
+      --ha-slider-background: linear-gradient(
+        to var(--float-end),
+        rgb(255, 160, 0) 0%,
+        white 50%,
+        rgb(166, 209, 255) 100%
+      );
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-color_temp": HaColorTempSelector;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -47,7 +47,9 @@ const LOAD_ELEMENTS = {
   tts: () => import("./ha-selector-tts"),
   tts_voice: () => import("./ha-selector-tts-voice"),
   location: () => import("./ha-selector-location"),
-  color_temp: () => import("./ha-selector-color-temp"),
+  color_temp: () => import("./ha-selector-color-temp-old"),
+  color_temp_kelvin: () => import("./ha-selector-color-temp-kelvin"),
+  color_temp_mired: () => import("./ha-selector-color-temp-mired"),
   ui_action: () => import("./ha-selector-ui-action"),
   ui_color: () => import("./ha-selector-ui-color"),
 };

src/data/selector.ts

@@ -18,7 +18,9 @@ export type Selector =
   | AttributeSelector
   | BooleanSelector
   | ColorRGBSelector
-  | ColorTempSelector
+  | OldColorTempSelector
+  | ColorTempMiredSelector
+  | ColorTempKelvinSelector
   | ConditionSelector
   | ConversationAgentSelector
   | ConfigEntrySelector
@@ -93,12 +95,25 @@ export interface ColorRGBSelector {
   color_rgb: {} | null;
 }
 
-export interface ColorTempSelector {
+export interface OldColorTempSelector {
   color_temp: {
     min_mireds?: number;
     max_mireds?: number;
   } | null;
 }
+export interface ColorTempMiredSelector {
+  color_temp_mired: {
+    min?: number;
+    max?: number;
+  } | null;
+}
+
+export interface ColorTempKelvinSelector {
+  color_temp_kelvin: {
+    min?: number;
+    max?: number;
+  } | null;
+}
 
 export interface ConditionSelector {
   condition: {