Add Color RGB Selector

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

@@ -173,10 +173,11 @@ const SCHEMAS: {
         name: "Location with radius",
         selector: { location: { radius: true, icon: "mdi:home" } },
       },
-      "color-temp": {
+      color_temp: {
         name: "Color Temperature",
         selector: { color_temp: {} },
       },
+      color_rgb: { name: "Color", selector: { color_rgb: {} } },
     },
   },
   {

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

@@ -0,0 +1,89 @@
+import { mdiPalette } from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { HomeAssistant } from "../../types";
+import { ColorRGBSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-color-picker";
+import "../ha-icon-button";
+
+@customElement("ha-selector-color_rgb")
+export class HaColorRGBSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: ColorRGBSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @state() private _saturationSegments = 8;
+
+  @state() private _hueSegments = 24;
+
+  protected render() {
+    return html`
+      <ha-color-picker
+        throttle="500"
+        .label=${this.label}
+        .desiredRgbColor=${this.value}
+        .hueSegments=${this._hueSegments}
+        .saturationSegments=${this._saturationSegments}
+        @colorselected=${this._valueChanged}
+      >
+      </ha-color-picker>
+      <ha-icon-button
+        .path=${mdiPalette}
+        @click=${this._segmentClick}
+      ></ha-icon-button>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", {
+      value: [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b],
+    });
+  }
+
+  private _segmentClick() {
+    if (this._hueSegments === 24 && this._saturationSegments === 8) {
+      this._hueSegments = 0;
+      this._saturationSegments = 0;
+    } else {
+      this._hueSegments = 24;
+      this._saturationSegments = 8;
+    }
+  }
+
+  static styles = css`
+    :host {
+      position: relative;
+      max-height: 500px;
+      display: flex;
+      justify-content: center;
+    }
+
+    ha-color-picker {
+      --ha-color-picker-wheel-borderwidth: 5;
+      --ha-color-picker-wheel-bordercolor: white;
+      --ha-color-picker-wheel-shadow: none;
+      --ha-color-picker-marker-borderwidth: 2;
+      --ha-color-picker-marker-bordercolor: white;
+    }
+
+    ha-icon-button {
+      position: absolute;
+      top: 5%;
+      left: 0;
+      color: var(--secondary-text-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-color_rgb": HaColorRGBSelector;
+  }
+}

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

@@ -8,6 +8,7 @@ import "./ha-selector-addon";
 import "./ha-selector-area";
 import "./ha-selector-attribute";
 import "./ha-selector-boolean";
+import "./ha-selector-color-rgb";
 import "./ha-selector-device";
 import "./ha-selector-duration";
 import "./ha-selector-entity";

src/data/selector.ts

@@ -17,7 +17,8 @@ export type Selector =
   | MediaSelector
   | ThemeSelector
   | LocationSelector
-  | ColorTempSelector;
+  | ColorTempSelector
+  | ColorRGBSelector;
 
 export interface EntitySelector {
   entity: {
@@ -34,6 +35,11 @@ export interface AttributeSelector {
   };
 }
 
+export interface ColorRGBSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  color_rgb: {};
+}
+
 export interface DeviceSelector {
   device: {
     integration?: string;