Add ui-color selector (#14348)

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

@@ -0,0 +1,42 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { ActionConfig } from "../../data/lovelace";
+import { UiColorSelector } from "../../data/selector";
+import "../../panels/lovelace/components/hui-color-picker";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-selector-ui-color")
+export class HaSelectorUiColor extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: UiColorSelector;
+
+  @property() public value?: ActionConfig;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  protected render() {
+    return html`
+      <hui-color-picker
+        .label=${this.label}
+        .hass=${this.hass}
+        .value=${this.value}
+        .helper=${this.helper}
+        @value-changed=${this._valueChanged}
+      ></hui-color-picker>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", { value: ev.detail.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-ui-color": HaSelectorUiColor;
+  }
+}

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

@@ -34,6 +34,7 @@ const LOAD_ELEMENTS = {
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
   "ui-action": () => import("./ha-selector-ui-action"),
+  "ui-color": () => import("./ha-selector-ui-color"),
 };
 
 @customElement("ha-selector")

src/data/selector.ts

@@ -33,7 +33,8 @@ export type Selector =
   | TemplateSelector
   | ThemeSelector
   | TimeSelector
-  | UiActionSelector;
+  | UiActionSelector
+  | UiColorSelector;
 
 export interface ActionSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
@@ -273,6 +274,11 @@ export interface UiActionSelector {
   } | null;
 }
 
+export interface UiColorSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  "ui-color": {} | null;
+}
+
 export const filterSelectorDevices = (
   filterDevice: SelectorDevice,
   device: DeviceRegistryEntry,

src/panels/lovelace/components/hui-color-picker.ts

@@ -0,0 +1,105 @@
+import "@material/mwc-list/mwc-list-item";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import {
+  computeRgbColor,
+  THEME_COLORS,
+} from "../../../common/color/compute-color";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
+import "../../../components/ha-select";
+import { HomeAssistant } from "../../../types";
+
+@customElement("hui-color-picker")
+export class HuiColorPicker extends LitElement {
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property() public hass!: HomeAssistant;
+
+  @property() public value?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  _valueSelected(ev) {
+    const value = ev.target.value;
+    if (value) {
+      fireEvent(this, "value-changed", {
+        value: value !== "default" ? value : undefined,
+      });
+    }
+  }
+
+  render() {
+    return html`
+      <ha-select
+        .icon=${Boolean(this.value)}
+        .label=${this.label}
+        .value=${this.value || "default"}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        @closed=${stopPropagation}
+        @selected=${this._valueSelected}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${this.value
+          ? html`
+              <span slot="icon">
+                ${this.renderColorCircle(this.value || "grey")}
+              </span>
+            `
+          : null}
+        <mwc-list-item value="default">
+          ${this.hass.localize(
+            `ui.panel.lovelace.editor.color-picker.default_color`
+          )}
+        </mwc-list-item>
+        ${Array.from(THEME_COLORS).map(
+          (color) => html`
+            <mwc-list-item .value=${color} graphic="icon">
+              ${this.hass.localize(
+                `ui.panel.lovelace.editor.color-picker.colors.${color}`
+              ) || color}
+              <span slot="graphic">${this.renderColorCircle(color)}</span>
+            </mwc-list-item>
+          `
+        )}
+      </ha-select>
+    `;
+  }
+
+  private renderColorCircle(color: string) {
+    return html`
+      <span
+        class="circle-color"
+        style=${styleMap({
+          "--circle-color": computeRgbColor(color),
+        })}
+      ></span>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .circle-color {
+        display: block;
+        background-color: rgb(var(--circle-color));
+        border-radius: 10px;
+        width: 20px;
+        height: 20px;
+      }
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-color-picker": HuiColorPicker;
+  }
+}

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

@@ -13,11 +13,9 @@ import {
   optional,
   string,
 } from "superstruct";
-import { THEME_COLORS } from "../../../../common/color/compute-color";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
-import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
@@ -93,20 +91,7 @@ export class HuiTileCardEditor
                 {
                   name: "color",
                   selector: {
-                    select: {
+                    "ui-color": {},
-                      options: [
-                        {
-                          label: this.hass!.localize(
-                            `ui.panel.lovelace.editor.card.tile.default_color`
-                          ),
-                          value: "default",
-                        },
-                        ...Array.from(THEME_COLORS).map((color) => ({
-                          label: capitalizeFirstLetter(color),
-                          value: color,
-                        })),
-                      ],
-                    },
                   },
                 },
                 {
@@ -159,11 +144,6 @@ export class HuiTileCardEditor
       stateObj
     );
 
-    const data = {
-      color: "default",
-      ...this._config,
-    };
-
     if (this._subElementEditorConfig) {
       return html`
         <hui-sub-element-editor
@@ -179,7 +159,7 @@ export class HuiTileCardEditor
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${data}
+        .data=${this._config}
         .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -204,9 +184,6 @@ export class HuiTileCardEditor
       extras: this._config.extras,
       ...ev.detail.value,
     };
-    if (ev.detail.value.color === "default") {
-      config.color = undefined;
-    }
     fireEvent(this, "config-changed", { config });
   }
 

src/translations/en.json

@@ -4255,6 +4255,36 @@
               "warning_multiple_cards": "This view contains more than one card, but a panel view can only show 1 card."
             }
           },
+          "color-picker": {
+            "default_color": "Default color (state)",
+            "colors": {
+              "primary": "Primary",
+              "accent": "Accent",
+              "disabled": "Disabled",
+              "red": "Red",
+              "pink": "Pink",
+              "purple": "Purple",
+              "deep-purple": "Deep purple",
+              "indigo": "Indigo",
+              "blue": "Blue",
+              "light-blue": "Light blue",
+              "cyan": "Cyan",
+              "teal": "Teal",
+              "green": "Green",
+              "light-green": "Light Green",
+              "lime": "Lime",
+              "yellow": "Yellow",
+              "amber": "Amber",
+              "orange": "Orange",
+              "deep-orange": "Deep orange",
+              "brown": "Brown",
+              "grey": "Grey",
+              "blue-grey": "Blue grey",
+              "black": "Black",
+              "white": "White"
+            }
+          },
+
           "cardpicker": {
             "no_description": "No description available.",
             "custom_card": "Custom",