diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index 9f585d051a..2ea007d913 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/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: {} } }, }, }, { diff --git a/src/components/ha-selector/ha-selector-color-rgb.ts b/src/components/ha-selector/ha-selector-color-rgb.ts new file mode 100644 index 0000000000..5357a80db3 --- /dev/null +++ b/src/components/ha-selector/ha-selector-color-rgb.ts @@ -0,0 +1,58 @@ +import { css, html, LitElement } from "lit"; +import { customElement, property } from "lit/decorators"; +import type { HomeAssistant } from "../../types"; +import type { ColorRGBSelector } from "../../data/selector"; +import { fireEvent } from "../../common/dom/fire_event"; +import { hex2rgb, rgb2hex } from "../../common/color/convert-color"; +import "../ha-textfield"; + +@customElement("ha-selector-color_rgb") +export class HaColorRGBSelector extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public selector!: ColorRGBSelector; + + @property() public value?: string; + + @property() public label?: string; + + @property({ type: Boolean, reflect: true }) public disabled = false; + + protected render() { + return html` + + `; + } + + private _valueChanged(ev: CustomEvent) { + const value = (ev.target as any).value; + fireEvent(this, "value-changed", { + value: hex2rgb(value), + }); + } + + static styles = css` + :host { + display: flex; + justify-content: flex-end; + align-items: center; + } + ha-textfield { + --text-field-padding: 8px; + min-width: 75px; + flex-grow: 1; + margin: 0 4px; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-selector-color_rgb": HaColorRGBSelector; + } +} diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts index 25c570a8e9..4aa268ee23 100644 --- a/src/components/ha-selector/ha-selector.ts +++ b/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"; diff --git a/src/data/selector.ts b/src/data/selector.ts index 4e75ad8268..d4d83c6ccb 100644 --- a/src/data/selector.ts +++ b/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;