New more info light (#14453)

package.json

@@ -71,6 +71,7 @@
     "@material/mwc-textfield": "^0.27.0",
     "@material/mwc-top-app-bar-fixed": "^0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
+    "@material/web": "^1.0.0-pre.1",
     "@mdi/js": "7.1.96",
     "@mdi/svg": "7.1.96",
     "@polymer/app-layout": "^3.1.0",

src/components/ha-bar-slider.ts

@@ -44,7 +44,7 @@ const getPercentageFromEvent = (e: HammerInput, vertical: boolean) => {
 
 @customElement("ha-bar-slider")
 export class HaBarSlider extends LitElement {
-  @property({ type: Boolean })
+  @property({ type: Boolean, reflect: true })
   public disabled = false;
 
   @property()
@@ -245,14 +245,16 @@ export class HaBarSlider extends LitElement {
       >
         <div class="slider-track-background"></div>
         ${this.mode === "cursor"
-          ? html`
+          ? this.value != null
-              <div
+            ? html`
-                class=${classMap({
+                <div
-                  "slider-track-cursor": true,
+                  class=${classMap({
-                  vertical: this.vertical,
+                    "slider-track-cursor": true,
-                })}
+                    vertical: this.vertical,
-              ></div>
+                  })}
-            `
+                ></div>
+              `
+            : null
           : html`
               <div
                 class=${classMap({
@@ -318,7 +320,8 @@ export class HaBarSlider extends LitElement {
         height: 100%;
         width: 100%;
         background-color: var(--slider-bar-color);
-        transition: transform 180ms ease-in-out;
+        transition: transform 180ms ease-in-out,
+          background-color 180ms ease-in-out;
       }
       .slider .slider-track-bar.show-handle {
         --slider-size: calc(
@@ -445,6 +448,9 @@ export class HaBarSlider extends LitElement {
       :host([pressed]) .slider-track-cursor {
         transition: none;
       }
+      :host(:disabled) .slider {
+        cursor: not-allowed;
+      }
     `;
   }
 }

src/dialogs/more-info/components/ha-more-info-bar-slider.ts

@@ -0,0 +1,111 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import "../../../components/ha-bar-slider";
+
+@customElement("ha-more-info-bar-slider")
+export class HaTileSlider extends LitElement {
+  @property({ type: Boolean, reflect: true })
+  public disabled = false;
+
+  @property()
+  public mode?: "start" | "end" | "cursor" = "start";
+
+  @property()
+  public valueFormatter?: (value?: number) => string | TemplateResult;
+
+  @property({ type: Number })
+  public value?: number;
+
+  @property({ type: Number })
+  public step = 1;
+
+  @property({ type: Number })
+  public min = 0;
+
+  @property({ type: Number })
+  public max = 100;
+
+  @property({ type: Boolean, attribute: "show-handle" })
+  public showHandle = false;
+
+  @property() public label = "";
+
+  @property({ type: Boolean, attribute: "show-label" })
+  public showLabel = false;
+
+  @property({ type: Boolean, attribute: "show-value" })
+  public showValue = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="container">
+        ${this.showValue
+          ? html`
+              <p>
+                ${this.valueFormatter
+                  ? this.valueFormatter(this.value)
+                  : this.value}
+              </p>
+            `
+          : null}
+        <ha-bar-slider
+          vertical
+          .disabled=${this.disabled}
+          .mode=${this.mode}
+          .value=${this.value}
+          .step=${this.step}
+          .min=${this.min}
+          .max=${this.max}
+          .showHandle=${this.showHandle}
+          aria-labelledby=${ifDefined(this.showLabel ? "label" : undefined)}
+          aria-label=${ifDefined(
+            !this.showLabel && this.label ? this.label : undefined
+          )}
+        >
+        </ha-bar-slider>
+        ${this.showLabel ? html`<p id="label">${this.label}</p>` : null}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+      }
+      ha-bar-slider {
+        height: var(--more-info-slider-bar-height, 330px);
+        --slider-bar-thickness: 100px;
+        --slider-bar-border-radius: 24px;
+        --slider-bar-color: var(
+          --more-info-slider-bar-color,
+          var(--primary-color)
+        );
+        --slider-bar-background: var(
+          --more-info-slider-bar-background,
+          var(--disabled-color)
+        );
+        --slider-bar-background-opacity: var(
+          --more-info-slider-bar-background-opacity,
+          0.2
+        );
+      }
+      p {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+        margin: 16px 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-bar-slider": HaTileSlider;
+  }
+}

src/dialogs/more-info/components/ha-more-info-light-brightness.ts

@@ -0,0 +1,111 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { stateActive } from "../../../common/entity/state_active";
+import { stateColorCss } from "../../../common/entity/state_color";
+import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
+import { LightEntity } from "../../../data/light";
+import { HomeAssistant } from "../../../types";
+import "./ha-more-info-bar-slider";
+
+@customElement("ha-more-info-light-brightness")
+export class HaMoreInfoLightBrightness extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: LightEntity;
+
+  @state() value?: number;
+
+  protected updated(changedProp: Map<string | number | symbol, unknown>): void {
+    if (changedProp.has("stateObj")) {
+      this.value =
+        this.stateObj.attributes.brightness != null
+          ? Math.max(
+              Math.round((this.stateObj.attributes.brightness * 100) / 255),
+              1
+            )
+          : undefined;
+    }
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    const value = (ev.detail as any).value;
+    if (isNaN(value)) return;
+
+    this.hass.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      brightness_pct: value,
+    });
+  }
+
+  private _sliderMoved(ev: CustomEvent) {
+    const value = (ev.detail as any).value;
+    if (isNaN(value)) return;
+
+    this.value = value;
+  }
+
+  private _valueFormatter = (value?: number) => {
+    if (value == null)
+      return computeStateDisplay(
+        this.hass.localize,
+        this.stateObj,
+        this.hass.locale,
+        this.hass.entities
+      );
+    return `${Math.round(value)}${blankBeforePercent(this.hass!.locale)}%`;
+  };
+
+  protected render(): TemplateResult {
+    let color = stateColorCss(this.stateObj);
+
+    if (this.stateObj.attributes.rgb_color) {
+      const hsvColor = rgb2hsv(this.stateObj.attributes.rgb_color);
+
+      // Modify the real rgb color for better contrast
+      if (hsvColor[1] < 0.4) {
+        // Special case for very light color (e.g: white)
+        if (hsvColor[1] < 0.1) {
+          hsvColor[2] = 225;
+        } else {
+          hsvColor[1] = 0.4;
+        }
+      }
+      color = rgb2hex(hsv2rgb(hsvColor));
+    }
+
+    return html`
+      <ha-more-info-bar-slider
+        show-value
+        label=${this.hass.localize("ui.card.light.brightness")}
+        min="1"
+        max="100"
+        .showHandle=${stateActive(this.stateObj)}
+        .value=${this.value}
+        @value-changed=${this._valueChanged}
+        @slider-moved=${this._sliderMoved}
+        .valueFormatter=${this._valueFormatter}
+        style=${styleMap({
+          "--more-info-slider-bar-color": color,
+        })}
+      >
+      </ha-more-info-bar-slider>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-more-info-bar-slider {
+        --more-info-slider-bar-height: 250px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-light-brightness": HaMoreInfoLightBrightness;
+  }
+}

src/dialogs/more-info/components/lights/dialog-light-color-picker.ts

@@ -0,0 +1,618 @@
+import "@material/mwc-button";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
+import { mdiPalette } from "@mdi/js";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-button-toggle-group";
+import "../../../../components/ha-color-picker";
+import "../../../../components/ha-dialog";
+import "../../../../components/ha-header-bar";
+import "../../../../components/ha-icon-button-prev";
+import "../../../../components/ha-labeled-slider";
+import {
+  getLightCurrentModeRgbColor,
+  LightColorMode,
+  LightEntity,
+  lightSupportsColor,
+  lightSupportsColorMode,
+} from "../../../../data/light";
+import { haStyleDialog } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import "../ha-more-info-bar-slider";
+import { LightColorPickerDialogParams } from "./show-dialog-light-color-picker";
+
+type Mode = "color_temp" | "color" | "white";
+
+@customElement("dialog-light-color-picker")
+class DialogLightColorPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: LightColorPickerDialogParams;
+
+  @state() private _ctSliderValue?: number;
+
+  @state() private _cwSliderValue?: number;
+
+  @state() private _wwSliderValue?: number;
+
+  @state() private _wvSliderValue?: number;
+
+  @state() private _colorBrightnessSliderValue?: number;
+
+  @state() private _brightnessAdjusted?: number;
+
+  @state() private _hueSegments = 24;
+
+  @state() private _saturationSegments = 8;
+
+  @state() private _colorPickerColor?: [number, number, number];
+
+  @state() private _mode?: Mode;
+
+  @state() private _modes: Mode[] = [];
+
+  get stateObj() {
+    return this._params
+      ? (this.hass.states[this._params.entityId] as LightEntity)
+      : undefined;
+  }
+
+  public async showDialog(params: LightColorPickerDialogParams): Promise<void> {
+    this._params = params;
+
+    const supportsTemp = lightSupportsColorMode(
+      this.stateObj!,
+      LightColorMode.COLOR_TEMP
+    );
+    const supportsWhite = lightSupportsColorMode(
+      this.stateObj!,
+      LightColorMode.WHITE
+    );
+
+    const modes: Mode[] = [];
+    modes.push("color");
+    if (supportsTemp) {
+      modes.push("color_temp");
+    }
+    if (supportsWhite) {
+      modes.push("white");
+    }
+
+    this._modes = modes;
+    this._mode =
+      this.stateObj!.attributes.color_mode === "color_temp" ||
+      this.stateObj!.attributes.color_mode === "white"
+        ? this.stateObj!.attributes.color_mode
+        : "color";
+
+    this._updateSliderValues();
+    await this.updateComplete;
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params || !this.stateObj) {
+      return html``;
+    }
+
+    const supportsTemp = lightSupportsColorMode(
+      this.stateObj,
+      LightColorMode.COLOR_TEMP
+    );
+
+    const supportsWhite = lightSupportsColorMode(
+      this.stateObj,
+      LightColorMode.WHITE
+    );
+
+    const supportsRgbww = lightSupportsColorMode(
+      this.stateObj,
+      LightColorMode.RGBWW
+    );
+
+    const supportsRgbw =
+      !supportsRgbww &&
+      lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
+
+    const supportsColor =
+      supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj);
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this._close}
+        hideActions
+        .heading=${this.hass.localize(
+          "ui.dialogs.more_info_control.light.color_picker.title"
+        )}
+      >
+        <div slot="heading">
+          <ha-header-bar>
+            <ha-icon-button-prev
+              slot="navigationIcon"
+              dialogAction="cancel"
+              .label=${this.hass.localize(
+                "ui.dialogs.more_info_control.dismiss"
+              )}
+            ></ha-icon-button-prev>
+
+            <span slot="title">Change Color</span>
+          </ha-header-bar>
+        </div>
+        <div>
+          ${supportsColor && (supportsTemp || supportsWhite)
+            ? html`
+                <mwc-tab-bar
+                  .activeIndex=${this._mode
+                    ? this._modes.indexOf(this._mode)
+                    : 0}
+                  @MDCTabBar:activated=${this._handleTabChanged}
+                >
+                  ${this._modes.map(
+                    (value) =>
+                      html`<mwc-tab
+                        .label=${this.hass.localize(
+                          `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
+                        )}
+                      ></mwc-tab>`
+                  )}
+                </mwc-tab-bar>
+              `
+            : ""}
+          <div class="content">
+            ${supportsTemp &&
+            ((!supportsColor && !supportsWhite) ||
+              this._mode === LightColorMode.COLOR_TEMP)
+              ? html`
+                  <ha-more-info-bar-slider
+                    class="color_temp"
+                    label=${this.hass.localize(
+                      "ui.card.light.color_temperature"
+                    )}
+                    min="1"
+                    max="100"
+                    mode="cursor"
+                    .value=${this._ctSliderValue}
+                    @value-changed=${this._ctSliderChanged}
+                    .min=${this.stateObj.attributes.min_color_temp_kelvin!}
+                    .max=${this.stateObj.attributes.max_color_temp_kelvin!}
+                  >
+                  </ha-more-info-bar-slider>
+                `
+              : ""}
+            ${supportsColor &&
+            ((!supportsTemp && !supportsWhite) || this._mode === "color")
+              ? html`
+                  <div class="segmentationContainer">
+                    <ha-color-picker
+                      class="color"
+                      @colorselected=${this._colorPicked}
+                      .desiredRgbColor=${this._colorPickerColor}
+                      throttle="500"
+                      .hueSegments=${this._hueSegments}
+                      .saturationSegments=${this._saturationSegments}
+                    >
+                    </ha-color-picker>
+                    <ha-icon-button
+                      .path=${mdiPalette}
+                      @click=${this._segmentClick}
+                      class="segmentationButton"
+                    ></ha-icon-button>
+                  </div>
+
+                  ${supportsRgbw || supportsRgbww
+                    ? html`<ha-labeled-slider
+                        .caption=${this.hass.localize(
+                          "ui.card.light.color_brightness"
+                        )}
+                        icon="hass:brightness-7"
+                        max="100"
+                        .value=${this._colorBrightnessSliderValue}
+                        @change=${this._colorBrightnessSliderChanged}
+                        pin
+                      ></ha-labeled-slider>`
+                    : ""}
+                  ${supportsRgbw
+                    ? html`
+                        <ha-labeled-slider
+                          .caption=${this.hass.localize(
+                            "ui.card.light.white_value"
+                          )}
+                          icon="hass:file-word-box"
+                          max="100"
+                          .name=${"wv"}
+                          .value=${this._wvSliderValue}
+                          @change=${this._wvSliderChanged}
+                          pin
+                        ></ha-labeled-slider>
+                      `
+                    : ""}
+                  ${supportsRgbww
+                    ? html`
+                        <ha-labeled-slider
+                          .caption=${this.hass.localize(
+                            "ui.card.light.cold_white_value"
+                          )}
+                          icon="hass:file-word-box-outline"
+                          max="100"
+                          .name=${"cw"}
+                          .value=${this._cwSliderValue}
+                          @change=${this._wvSliderChanged}
+                          pin
+                        ></ha-labeled-slider>
+                        <ha-labeled-slider
+                          .caption=${this.hass.localize(
+                            "ui.card.light.warm_white_value"
+                          )}
+                          icon="hass:file-word-box"
+                          max="100"
+                          .name=${"ww"}
+                          .value=${this._wwSliderValue}
+                          @change=${this._wvSliderChanged}
+                          pin
+                        ></ha-labeled-slider>
+                      `
+                    : ""}
+                `
+              : ""}
+          </div>
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  public _updateSliderValues() {
+    const stateObj = this.stateObj;
+
+    if (stateObj?.state === "on") {
+      this._brightnessAdjusted = undefined;
+      if (
+        stateObj.attributes.color_mode === LightColorMode.RGB &&
+        !lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
+        !lightSupportsColorMode(stateObj, LightColorMode.RGBW)
+      ) {
+        const maxVal = Math.max(...stateObj.attributes.rgb_color!);
+
+        if (maxVal < 255) {
+          this._brightnessAdjusted = maxVal;
+        }
+      }
+      this._ctSliderValue = stateObj.attributes.color_temp_kelvin;
+      this._wvSliderValue =
+        stateObj.attributes.color_mode === LightColorMode.RGBW
+          ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
+          : undefined;
+      this._cwSliderValue =
+        stateObj.attributes.color_mode === LightColorMode.RGBWW
+          ? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
+          : undefined;
+      this._wwSliderValue =
+        stateObj.attributes.color_mode === LightColorMode.RGBWW
+          ? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
+          : undefined;
+
+      const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
+
+      this._colorBrightnessSliderValue = currentRgbColor
+        ? Math.round((Math.max(...currentRgbColor.slice(0, 3)) * 100) / 255)
+        : undefined;
+
+      this._colorPickerColor = currentRgbColor?.slice(0, 3) as [
+        number,
+        number,
+        number
+      ];
+    } else {
+      this._colorPickerColor = [0, 0, 0];
+      this._ctSliderValue = undefined;
+      this._wvSliderValue = undefined;
+      this._cwSliderValue = undefined;
+      this._wwSliderValue = undefined;
+    }
+  }
+
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+
+    if (!changedProps.has("hass")) {
+      return;
+    }
+
+    this._updateSliderValues();
+  }
+
+  private _handleTabChanged(ev: CustomEvent): void {
+    const newMode = this._modes[ev.detail.index];
+    if (newMode === this._mode) {
+      return;
+    }
+    this._mode = newMode;
+  }
+
+  private _ctSliderChanged(ev: CustomEvent) {
+    const ct = ev.detail.value;
+
+    if (isNaN(ct)) {
+      return;
+    }
+
+    this._ctSliderValue = ct;
+
+    this.hass.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      color_temp_kelvin: ct,
+    });
+  }
+
+  private _wvSliderChanged(ev: CustomEvent) {
+    const target = ev.target as any;
+    let wv = Number(target.value);
+    const name = target.name;
+
+    if (isNaN(wv)) {
+      return;
+    }
+
+    if (name === "wv") {
+      this._wvSliderValue = wv;
+    } else if (name === "cw") {
+      this._cwSliderValue = wv;
+    } else if (name === "ww") {
+      this._wwSliderValue = wv;
+    }
+
+    wv = Math.min(255, Math.round((wv * 255) / 100));
+
+    const rgb = getLightCurrentModeRgbColor(this.stateObj!);
+
+    if (name === "wv") {
+      const rgbw_color = rgb || [0, 0, 0, 0];
+      rgbw_color[3] = wv;
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        rgbw_color,
+      });
+      return;
+    }
+
+    const rgbww_color = rgb || [0, 0, 0, 0, 0];
+    while (rgbww_color.length < 5) {
+      rgbww_color.push(0);
+    }
+    rgbww_color[name === "cw" ? 3 : 4] = wv;
+    this.hass.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      rgbww_color,
+    });
+  }
+
+  private _colorBrightnessSliderChanged(ev: CustomEvent) {
+    const target = ev.target as any;
+    let value = Number(target.value);
+
+    if (isNaN(value)) {
+      return;
+    }
+
+    const oldValue = this._colorBrightnessSliderValue;
+    this._colorBrightnessSliderValue = value;
+
+    value = (value * 255) / 100;
+
+    const rgb = (getLightCurrentModeRgbColor(this.stateObj!)?.slice(0, 3) || [
+      255, 255, 255,
+    ]) as [number, number, number];
+
+    this._setRgbWColor(
+      this._adjustColorBrightness(
+        // first normalize the value
+        oldValue
+          ? this._adjustColorBrightness(rgb, (oldValue * 255) / 100, true)
+          : rgb,
+        value
+      )
+    );
+  }
+
+  private _segmentClick() {
+    if (this._hueSegments === 24 && this._saturationSegments === 8) {
+      this._hueSegments = 0;
+      this._saturationSegments = 0;
+    } else {
+      this._hueSegments = 24;
+      this._saturationSegments = 8;
+    }
+  }
+
+  private _adjustColorBrightness(
+    rgbColor: [number, number, number],
+    value?: number,
+    invert = false
+  ) {
+    if (value !== undefined && value !== 255) {
+      let ratio = value / 255;
+      if (invert) {
+        ratio = 1 / ratio;
+      }
+      rgbColor[0] = Math.min(255, Math.round(rgbColor[0] * ratio));
+      rgbColor[1] = Math.min(255, Math.round(rgbColor[1] * ratio));
+      rgbColor[2] = Math.min(255, Math.round(rgbColor[2] * ratio));
+    }
+    return rgbColor;
+  }
+
+  private _setRgbWColor(rgbColor: [number, number, number]) {
+    if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
+      const rgbww_color: [number, number, number, number, number] = this
+        .stateObj!.attributes.rgbww_color
+        ? [...this.stateObj!.attributes.rgbww_color]
+        : [0, 0, 0, 0, 0];
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
+      });
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
+      const rgbw_color: [number, number, number, number] = this.stateObj!
+        .attributes.rgbw_color
+        ? [...this.stateObj!.attributes.rgbw_color]
+        : [0, 0, 0, 0];
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        rgbw_color: rgbColor.concat(rgbw_color.slice(3)),
+      });
+    }
+  }
+
+  /**
+   * Called when a new color has been picked.
+   * should be throttled with the 'throttle=' attribute of the color picker
+   */
+  private _colorPicked(
+    ev: CustomEvent<{
+      hs: { h: number; s: number };
+      rgb: { r: number; g: number; b: number };
+    }>
+  ) {
+    this._colorPickerColor = [
+      ev.detail.rgb.r,
+      ev.detail.rgb.g,
+      ev.detail.rgb.b,
+    ];
+
+    if (
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
+    ) {
+      this._setRgbWColor(
+        this._colorBrightnessSliderValue
+          ? this._adjustColorBrightness(
+              [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b],
+              (this._colorBrightnessSliderValue * 255) / 100
+            )
+          : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
+      );
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
+      const rgb_color: [number, number, number] = [
+        ev.detail.rgb.r,
+        ev.detail.rgb.g,
+        ev.detail.rgb.b,
+      ];
+      if (this._brightnessAdjusted) {
+        const brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
+        const brightnessPercentage = Math.round(
+          ((this.stateObj!.attributes.brightness || 0) * brightnessAdjust) / 255
+        );
+        this.hass.callService("light", "turn_on", {
+          entity_id: this.stateObj!.entity_id,
+          brightness_pct: brightnessPercentage,
+          rgb_color: this._adjustColorBrightness(
+            rgb_color,
+            this._brightnessAdjusted,
+            true
+          ),
+        });
+      } else {
+        this.hass.callService("light", "turn_on", {
+          entity_id: this.stateObj!.entity_id,
+          rgb_color,
+        });
+      }
+    } else {
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        hs_color: [ev.detail.hs.h, ev.detail.hs.s * 100],
+      });
+    }
+  }
+
+  private _close(): void {
+    this._params = undefined;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --dialog-content-padding: 0px;
+        }
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+        }
+        .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 16px;
+        }
+
+        .content > * {
+          width: 100%;
+        }
+
+        .segmentationContainer {
+          position: relative;
+          max-height: 500px;
+          display: flex;
+          justify-content: center;
+        }
+
+        .segmentationButton {
+          position: absolute;
+          top: 5%;
+          left: 0;
+          color: var(--secondary-text-color);
+        }
+
+        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-more-info-bar-slider {
+          --more-info-slider-bar-height: 290px;
+          margin: 20px 0;
+        }
+
+        .color_temp {
+          --more-info-slider-bar-background: -webkit-linear-gradient(
+            top,
+            rgb(166, 209, 255) 0%,
+            white 50%,
+            rgb(255, 160, 0) 100%
+          );
+          --more-info-slider-bar-background-opacity: 1;
+        }
+
+        hr {
+          border-color: var(--divider-color);
+          border-bottom: none;
+          margin: 16px 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-light-color-picker": DialogLightColorPicker;
+  }
+}

src/dialogs/more-info/components/lights/show-dialog-light-color-picker.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+export interface LightColorPickerDialogParams {
+  entityId: string;
+}
+
+export const loadLightColorPickerDialog = () =>
+  import("./dialog-light-color-picker");
+
+export const showLightColorPickerDialog = (
+  element: HTMLElement,
+  dialogParams: LightColorPickerDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-light-color-picker",
+    dialogImport: loadLightColorPickerDialog,
+    dialogParams,
+  });
+};

src/dialogs/more-info/controls/more-info-light.ts

@@ -1,34 +1,24 @@
 import "@material/mwc-list/mwc-list-item";
-import { mdiPalette } from "@mdi/js";
+import "@material/web/iconbutton/outlined-icon-button";
-import {
+import { mdiPalette, mdiShimmer } from "@mdi/js";
-  css,
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  CSSResultGroup,
+import { customElement, property } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
-import "../../../components/ha-button-toggle-group";
+import "../../../components/ha-button-menu";
-import "../../../components/ha-color-picker";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-labeled-slider";
 import "../../../components/ha-select";
 import {
-  getLightCurrentModeRgbColor,
   LightColorMode,
   LightEntity,
   LightEntityFeature,
-  lightIsInColorMode,
+  lightSupportsBrightness,
   lightSupportsColor,
   lightSupportsColorMode,
-  lightSupportsBrightness,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
+import "../components/ha-more-info-light-brightness";
+import { showLightColorPickerDialog } from "../components/lights/show-dialog-light-color-picker";
 
 @customElement("more-info-light")
 class MoreInfoLight extends LitElement {
@@ -36,198 +26,90 @@ class MoreInfoLight extends LitElement {
 
   @property({ attribute: false }) public stateObj?: LightEntity;
 
-  @state() private _brightnessSliderValue = 0;
-
-  @state() private _ctSliderValue?: number;
-
-  @state() private _cwSliderValue?: number;
-
-  @state() private _wwSliderValue?: number;
-
-  @state() private _wvSliderValue?: number;
-
-  @state() private _colorBrightnessSliderValue?: number;
-
-  @state() private _brightnessAdjusted?: number;
-
-  @state() private _hueSegments = 24;
-
-  @state() private _saturationSegments = 8;
-
-  @state() private _colorPickerColor?: [number, number, number];
-
-  @state() private _mode?: "color" | LightColorMode;
-
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
       return html``;
     }
 
-    const supportsTemp = lightSupportsColorMode(
+    const supportsColorTemp = lightSupportsColorMode(
       this.stateObj,
       LightColorMode.COLOR_TEMP
     );
 
-    const supportsWhite = lightSupportsColorMode(
+    const supportsColor = lightSupportsColor(this.stateObj);
+
+    const supportsBrightness = lightSupportsBrightness(this.stateObj);
+
+    const supportsEffects = supportsFeature(
       this.stateObj,
-      LightColorMode.WHITE
+      LightEntityFeature.EFFECT
     );
 
-    const supportsRgbww = lightSupportsColorMode(
-      this.stateObj,
-      LightColorMode.RGBWW
-    );
-
-    const supportsRgbw =
-      !supportsRgbww &&
-      lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
-
-    const supportsColor =
-      supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj);
-
     return html`
       <div class="content">
-        ${lightSupportsBrightness(this.stateObj)
+        ${supportsBrightness
           ? html`
-              <ha-labeled-slider
+              <ha-more-info-light-brightness
-                caption=${this.hass.localize("ui.card.light.brightness")}
+                .stateObj=${this.stateObj}
-                icon="hass:brightness-5"
+                .hass=${this.hass}
-                min="1"
+              >
-                max="100"
+              </ha-more-info-light-brightness>
-                value=${this._brightnessSliderValue}
-                @change=${this._brightnessSliderChanged}
-                pin
-              ></ha-labeled-slider>
             `
           : ""}
-        ${this.stateObj.state === "on"
+        ${supportsColorTemp || supportsColor || supportsEffects
           ? html`
-              ${supportsTemp || supportsColor ? html`<hr />` : ""}
+              <div class="buttons">
-              ${supportsColor && (supportsTemp || supportsWhite)
+                ${supportsColorTemp || supportsColor
-                ? html`<ha-button-toggle-group
+                  ? html`
-                    fullWidth
+                      <md-outlined-icon-button
-                    .buttons=${this._toggleButtons(supportsTemp, supportsWhite)}
+                        .title=${this.hass.localize(
-                    .active=${this._mode}
+                          "ui.dialogs.more_info_control.light.change_color"
-                    @value-changed=${this._modeChanged}
+                        )}
-                  ></ha-button-toggle-group>`
+                        .ariaLabel=${this.hass.localize(
-                : ""}
+                          "ui.dialogs.more_info_control.light.change_color"
-              ${supportsTemp &&
+                        )}
-              ((!supportsColor && !supportsWhite) ||
+                        @click=${this._showLightColorPickerDialog}
-                this._mode === LightColorMode.COLOR_TEMP)
-                ? html`
-                    <ha-labeled-slider
-                      class="color_temp"
-                      caption=${this.hass.localize(
-                        "ui.card.light.color_temperature"
-                      )}
-                      icon="hass:thermometer"
-                      .min=${this.stateObj.attributes.min_color_temp_kelvin}
-                      .max=${this.stateObj.attributes.max_color_temp_kelvin}
-                      .value=${this._ctSliderValue}
-                      @change=${this._ctSliderChanged}
-                      pin
-                    ></ha-labeled-slider>
-                  `
-                : ""}
-              ${supportsColor &&
-              ((!supportsTemp && !supportsWhite) || this._mode === "color")
-                ? html`
-                    <div class="segmentationContainer">
-                      <ha-color-picker
-                        class="color"
-                        @colorselected=${this._colorPicked}
-                        .desiredRgbColor=${this._colorPickerColor}
-                        throttle="500"
-                        .hueSegments=${this._hueSegments}
-                        .saturationSegments=${this._saturationSegments}
                       >
-                      </ha-color-picker>
+                        <ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
-                      <ha-icon-button
+                      </md-outlined-icon-button>
-                        .path=${mdiPalette}
+                    `
-                        @click=${this._segmentClick}
+                  : null}
-                        class="segmentationButton"
+                ${supportsEffects
-                      ></ha-icon-button>
+                  ? html`
-                    </div>
+                      <ha-button-menu
-
+                        corner="BOTTOM_START"
-                    ${supportsRgbw || supportsRgbww
+                        @action=${this._handleEffectButton}
-                      ? html`<ha-labeled-slider
+                        @closed=${stopPropagation}
-                          .caption=${this.hass.localize(
+                        fixed
-                            "ui.card.light.color_brightness"
+                      >
+                        <md-outlined-icon-button
+                          slot="trigger"
+                          .title=${this.hass.localize(
+                            "ui.dialogs.more_info_control.light.select_effect"
                           )}
-                          icon="hass:brightness-7"
+                          .ariaLabel=${this.hass.localize(
-                          max="100"
+                            "ui.dialogs.more_info_control.light.select_effect"
-                          .value=${this._colorBrightnessSliderValue}
+                          )}
-                          @change=${this._colorBrightnessSliderChanged}
+                        >
-                          pin
+                          <ha-svg-icon .path=${mdiShimmer}></ha-svg-icon>
-                        ></ha-labeled-slider>`
+                        </md-outlined-icon-button>
-                      : ""}
+                        ${this.stateObj.attributes.effect_list!.map(
-                    ${supportsRgbw
+                          (effect: string) => html`
-                      ? html`
+                            <mwc-list-item
-                          <ha-labeled-slider
+                              .value=${effect}
-                            .caption=${this.hass.localize(
+                              .activated=${this.stateObj!.attributes.effect ===
-                              "ui.card.light.white_value"
+                              effect}
-                            )}
+                            >
-                            icon="hass:file-word-box"
+                              ${effect}
-                            max="100"
+                            </mwc-list-item>
-                            .name=${"wv"}
+                          `
-                            .value=${this._wvSliderValue}
+                        )}
-                            @change=${this._wvSliderChanged}
+                      </ha-button-menu>
-                            pin
+                    `
-                          ></ha-labeled-slider>
+                  : null}
-                        `
+              </div>
-                      : ""}
-                    ${supportsRgbww
-                      ? html`
-                          <ha-labeled-slider
-                            .caption=${this.hass.localize(
-                              "ui.card.light.cold_white_value"
-                            )}
-                            icon="hass:file-word-box-outline"
-                            max="100"
-                            .name=${"cw"}
-                            .value=${this._cwSliderValue}
-                            @change=${this._wvSliderChanged}
-                            pin
-                          ></ha-labeled-slider>
-                          <ha-labeled-slider
-                            .caption=${this.hass.localize(
-                              "ui.card.light.warm_white_value"
-                            )}
-                            icon="hass:file-word-box"
-                            max="100"
-                            .name=${"ww"}
-                            .value=${this._wwSliderValue}
-                            @change=${this._wvSliderChanged}
-                            pin
-                          ></ha-labeled-slider>
-                        `
-                      : ""}
-                  `
-                : ""}
-              ${supportsFeature(this.stateObj, LightEntityFeature.EFFECT) &&
-              this.stateObj!.attributes.effect_list?.length
-                ? html`
-                    <hr />
-                    <ha-select
-                      .label=${this.hass.localize("ui.card.light.effect")}
-                      .value=${this.stateObj.attributes.effect || ""}
-                      fixedMenuPosition
-                      naturalMenuWidth
-                      @selected=${this._effectChanged}
-                      @closed=${stopPropagation}
-                    >
-                      ${this.stateObj.attributes.effect_list.map(
-                        (effect: string) => html`
-                          <mwc-list-item .value=${effect}>
-                            ${effect}
-                          </mwc-list-item>
-                        `
-                      )}
-                    </ha-select>
-                  `
-                : ""}
             `
-          : ""}
+          : null}
         <ha-attributes
           .hass=${this.hass}
           .stateObj=${this.stateObj}
@@ -237,334 +119,27 @@ class MoreInfoLight extends LitElement {
     `;
   }
 
-  public willUpdate(changedProps: PropertyValues<this>) {
+  private _showLightColorPickerDialog = () => {
-    super.willUpdate(changedProps);
+    showLightColorPickerDialog(this, { entityId: this.stateObj!.entity_id });
+  };
 
-    if (!changedProps.has("stateObj")) {
+  private _handleEffectButton(ev) {
-      return;
+    ev.stopPropagation();
-    }
+    ev.preventDefault();
-    const stateObj = this.stateObj! as LightEntity;
-    const oldStateObj = changedProps.get("stateObj") as LightEntity | undefined;
 
-    if (stateObj.state === "on") {
+    const index = ev.detail.index;
-      // Don't change tab when the color mode changes
+    const effect = this.stateObj!.attributes.effect_list![index];
-      if (
-        oldStateObj?.entity_id !== stateObj.entity_id ||
-        oldStateObj?.state !== stateObj.state
-      ) {
-        this._mode = lightIsInColorMode(this.stateObj!)
-          ? "color"
-          : this.stateObj!.attributes.color_mode;
-      }
 
-      let brightnessAdjust = 100;
+    if (!effect || this.stateObj!.attributes.effect === effect) {
-      this._brightnessAdjusted = undefined;
-      if (
-        stateObj.attributes.color_mode === LightColorMode.RGB &&
-        !lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
-        !lightSupportsColorMode(stateObj, LightColorMode.RGBW)
-      ) {
-        const maxVal = Math.max(...stateObj.attributes.rgb_color!);
-        if (maxVal < 255) {
-          this._brightnessAdjusted = maxVal;
-          brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
-        }
-      }
-      this._brightnessSliderValue = Math.round(
-        ((stateObj.attributes.brightness || 0) * brightnessAdjust) / 255
-      );
-      this._ctSliderValue = stateObj.attributes.color_temp_kelvin;
-      this._wvSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBW
-          ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
-          : undefined;
-      this._cwSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
-          : undefined;
-      this._wwSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
-          : undefined;
-
-      const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
-
-      this._colorBrightnessSliderValue = currentRgbColor
-        ? Math.round((Math.max(...currentRgbColor.slice(0, 3)) * 100) / 255)
-        : undefined;
-
-      this._colorPickerColor = currentRgbColor?.slice(0, 3) as [
-        number,
-        number,
-        number
-      ];
-    } else {
-      this._brightnessSliderValue = 0;
-    }
-  }
-
-  private _toggleButtons = memoizeOne(
-    (supportsTemp: boolean, supportsWhite: boolean) => {
-      const modes = [{ label: "Color", value: "color" }];
-      if (supportsTemp) {
-        modes.push({ label: "Temperature", value: LightColorMode.COLOR_TEMP });
-      }
-      if (supportsWhite) {
-        modes.push({ label: "White", value: LightColorMode.WHITE });
-      }
-      return modes;
-    }
-  );
-
-  private _modeChanged(ev: CustomEvent) {
-    this._mode = ev.detail.value;
-  }
-
-  private _effectChanged(ev) {
-    const newVal = ev.target.value;
-
-    if (!newVal || this.stateObj!.attributes.effect === newVal) {
       return;
     }
 
     this.hass.callService("light", "turn_on", {
       entity_id: this.stateObj!.entity_id,
-      effect: newVal,
+      effect,
     });
   }
 
-  private _brightnessSliderChanged(ev: CustomEvent) {
-    const bri = Number((ev.target as any).value);
-
-    if (isNaN(bri)) {
-      return;
-    }
-
-    this._brightnessSliderValue = bri;
-
-    if (this._mode === LightColorMode.WHITE) {
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        white: Math.min(255, Math.round((bri * 255) / 100)),
-      });
-      return;
-    }
-
-    if (this._brightnessAdjusted) {
-      const rgb =
-        this.stateObj!.attributes.rgb_color ||
-        ([0, 0, 0] as [number, number, number]);
-
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        brightness_pct: bri,
-        rgb_color: this._adjustColorBrightness(
-          rgb,
-          this._brightnessAdjusted,
-          true
-        ),
-      });
-      return;
-    }
-
-    this.hass.callService("light", "turn_on", {
-      entity_id: this.stateObj!.entity_id,
-      brightness_pct: bri,
-    });
-  }
-
-  private _ctSliderChanged(ev: CustomEvent) {
-    const ct = Number((ev.target as any).value);
-
-    if (isNaN(ct)) {
-      return;
-    }
-
-    this._ctSliderValue = ct;
-
-    this.hass.callService("light", "turn_on", {
-      entity_id: this.stateObj!.entity_id,
-      color_temp_kelvin: ct,
-    });
-  }
-
-  private _wvSliderChanged(ev: CustomEvent) {
-    const target = ev.target as any;
-    let wv = Number(target.value);
-    const name = target.name;
-
-    if (isNaN(wv)) {
-      return;
-    }
-
-    if (name === "wv") {
-      this._wvSliderValue = wv;
-    } else if (name === "cw") {
-      this._cwSliderValue = wv;
-    } else if (name === "ww") {
-      this._wwSliderValue = wv;
-    }
-
-    wv = Math.min(255, Math.round((wv * 255) / 100));
-
-    const rgb = getLightCurrentModeRgbColor(this.stateObj!);
-
-    if (name === "wv") {
-      const rgbw_color = rgb || [0, 0, 0, 0];
-      rgbw_color[3] = wv;
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        rgbw_color,
-      });
-      return;
-    }
-
-    const rgbww_color = rgb || [0, 0, 0, 0, 0];
-    while (rgbww_color.length < 5) {
-      rgbww_color.push(0);
-    }
-    rgbww_color[name === "cw" ? 3 : 4] = wv;
-    this.hass.callService("light", "turn_on", {
-      entity_id: this.stateObj!.entity_id,
-      rgbww_color,
-    });
-  }
-
-  private _colorBrightnessSliderChanged(ev: CustomEvent) {
-    const target = ev.target as any;
-    let value = Number(target.value);
-
-    if (isNaN(value)) {
-      return;
-    }
-
-    const oldValue = this._colorBrightnessSliderValue;
-    this._colorBrightnessSliderValue = value;
-
-    value = (value * 255) / 100;
-
-    const rgb = (getLightCurrentModeRgbColor(this.stateObj!)?.slice(0, 3) || [
-      255, 255, 255,
-    ]) as [number, number, number];
-
-    this._setRgbWColor(
-      this._adjustColorBrightness(
-        // first normalize the value
-        oldValue
-          ? this._adjustColorBrightness(rgb, (oldValue * 255) / 100, true)
-          : rgb,
-        value
-      )
-    );
-  }
-
-  private _segmentClick() {
-    if (this._hueSegments === 24 && this._saturationSegments === 8) {
-      this._hueSegments = 0;
-      this._saturationSegments = 0;
-    } else {
-      this._hueSegments = 24;
-      this._saturationSegments = 8;
-    }
-  }
-
-  private _adjustColorBrightness(
-    rgbColor: [number, number, number],
-    value?: number,
-    invert = false
-  ) {
-    if (value !== undefined && value !== 255) {
-      let ratio = value / 255;
-      if (invert) {
-        ratio = 1 / ratio;
-      }
-      rgbColor[0] = Math.min(255, Math.round(rgbColor[0] * ratio));
-      rgbColor[1] = Math.min(255, Math.round(rgbColor[1] * ratio));
-      rgbColor[2] = Math.min(255, Math.round(rgbColor[2] * ratio));
-    }
-    return rgbColor;
-  }
-
-  private _setRgbWColor(rgbColor: [number, number, number]) {
-    if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
-      const rgbww_color: [number, number, number, number, number] = this
-        .stateObj!.attributes.rgbww_color
-        ? [...this.stateObj!.attributes.rgbww_color]
-        : [0, 0, 0, 0, 0];
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
-      });
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
-      const rgbw_color: [number, number, number, number] = this.stateObj!
-        .attributes.rgbw_color
-        ? [...this.stateObj!.attributes.rgbw_color]
-        : [0, 0, 0, 0];
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        rgbw_color: rgbColor.concat(rgbw_color.slice(3)),
-      });
-    }
-  }
-
-  /**
-   * Called when a new color has been picked.
-   * should be throttled with the 'throttle=' attribute of the color picker
-   */
-  private _colorPicked(
-    ev: CustomEvent<{
-      hs: { h: number; s: number };
-      rgb: { r: number; g: number; b: number };
-    }>
-  ) {
-    this._colorPickerColor = [
-      ev.detail.rgb.r,
-      ev.detail.rgb.g,
-      ev.detail.rgb.b,
-    ];
-
-    if (
-      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
-      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
-    ) {
-      this._setRgbWColor(
-        this._colorBrightnessSliderValue
-          ? this._adjustColorBrightness(
-              [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b],
-              (this._colorBrightnessSliderValue * 255) / 100
-            )
-          : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
-      );
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
-      const rgb_color: [number, number, number] = [
-        ev.detail.rgb.r,
-        ev.detail.rgb.g,
-        ev.detail.rgb.b,
-      ];
-      if (this._brightnessAdjusted) {
-        this.hass.callService("light", "turn_on", {
-          entity_id: this.stateObj!.entity_id,
-          brightness_pct: this._brightnessSliderValue,
-          rgb_color: this._adjustColorBrightness(
-            rgb_color,
-            this._brightnessAdjusted,
-            true
-          ),
-        });
-      } else {
-        this.hass.callService("light", "turn_on", {
-          entity_id: this.stateObj!.entity_id,
-          rgb_color,
-        });
-      }
-    } else {
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        hs_color: [ev.detail.hs.h, ev.detail.hs.s * 100],
-      });
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       .content {
@@ -577,48 +152,18 @@ class MoreInfoLight extends LitElement {
         width: 100%;
       }
 
-      .color_temp {
+      .buttons {
-        --ha-slider-background: -webkit-linear-gradient(
-          var(--float-end),
-          rgb(166, 209, 255) 0%,
-          white 50%,
-          rgb(255, 160, 0) 100%
-        );
-        /* The color temp minimum value shouldn't be rendered differently. It's not "off". */
-        --paper-slider-knob-start-border-color: var(--primary-color);
-        margin-bottom: 4px;
-      }
-
-      .segmentationContainer {
-        position: relative;
-        max-height: 500px;
         display: flex;
+        align-items: center;
         justify-content: center;
+        margin-bottom: 12px;
+      }
+      .buttons > * {
+        margin: 4px;
       }
 
-      ha-button-toggle-group {
+      ha-more-info-light-brightness {
-        margin-bottom: 8px;
+        margin-bottom: 16px;
-      }
-
-      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;
-      }
-
-      .segmentationButton {
-        position: absolute;
-        top: 5%;
-        left: 0;
-        color: var(--secondary-text-color);
-      }
-
-      hr {
-        border-color: var(--divider-color);
-        border-bottom: none;
-        margin: 16px 0;
       }
     `;
   }

src/dialogs/more-info/state_more_info_control.ts

@@ -1,9 +1,9 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import {
-  DOMAINS_WITH_MORE_INFO,
-  DOMAINS_HIDE_DEFAULT_MORE_INFO,
-} from "./const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
+import {
+  DOMAINS_HIDE_DEFAULT_MORE_INFO,
+  DOMAINS_WITH_MORE_INFO,
+} from "./const";
 
 const LAZY_LOADED_MORE_INFO_CONTROL = {
   alarm_control_panel: () => import("./controls/more-info-alarm_control_panel"),
@@ -33,7 +33,6 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
 
 export const stateMoreInfoType = (stateObj: HassEntity): string => {
   const domain = computeStateDomain(stateObj);
-
   return domainMoreInfoType(domain);
 };
 

src/translations/en.json

@@ -889,6 +889,18 @@
         },
         "zone": {
           "graph_unit": "People home"
+        },
+        "light": {
+          "change_color": "Change color",
+          "select_effect": "Select effect",
+          "color_picker": {
+            "title": "Change color",
+            "mode": {
+              "color": "Color",
+              "color_temp": "Temperature",
+              "white": "White"
+            }
+          }
         }
       },
       "entity_registry": {

yarn.lock

@@ -3117,6 +3117,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@material/web@npm:^1.0.0-pre.1":
+  version: 1.0.0-pre.1
+  resolution: "@material/web@npm:1.0.0-pre.1"
+  dependencies:
+    lit: ^2.3.0
+    tslib: ^2.4.0
+  checksum: 87716cb760020380f797feebb066a6e22ecd9d97b2fdb697977ca9af2b58b7422737a38cb0639cdb1124669d650ce3cfe1e77642738ef36556116ced57d82a1f
+  languageName: node
+  linkType: hard
+
 "@mdi/js@npm:7.1.96":
   version: 7.1.96
   resolution: "@mdi/js@npm:7.1.96"
@@ -9493,6 +9503,7 @@ fsevents@^1.2.7:
     "@material/mwc-textfield": ^0.27.0
     "@material/mwc-top-app-bar-fixed": ^0.27.0
     "@material/top-app-bar": =14.0.0-canary.53b3cad2f.0
+    "@material/web": ^1.0.0-pre.1
     "@mdi/js": 7.1.96
     "@mdi/svg": 7.1.96
     "@octokit/auth-oauth-device": ^4.0.2
@@ -11214,7 +11225,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.5.0, lit@npm:^2.6.1":
+"lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.3.0, lit@npm:^2.5.0, lit@npm:^2.6.1":
   version: 2.6.1
   resolution: "lit@npm:2.6.1"
   dependencies: