Open right mode when editing favorite color (#16719)

* Open right mode when editing favorite color

* Add missing type

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

@@ -79,6 +79,7 @@ class DialogLightColorFavorite extends LitElement {
         <light-color-picker
           .hass=${this.hass}
           entityId=${this._entry.entity_id}
+          .defaultMode=${this._dialogParams?.defaultMode}
           @color-changed=${this._colorChanged}
         >
         </light-color-picker>

src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts

@@ -31,6 +31,7 @@ import {
 import { HomeAssistant } from "../../../../types";
 import { showConfirmationDialog } from "../../../generic/show-dialog-box";
 import "./ha-favorite-color-button";
+import type { LightPickerMode } from "./light-color-picker";
 import { showLightColorFavoriteDialog } from "./show-dialog-light-color-favorite";
 
 @customElement("ha-more-info-light-favorite-colors")
@@ -147,8 +148,14 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
   private _edit = async (index) => {
     // Make sure the current favorite color is set
     await this._apply(index);
+
+    const defaultMode: LightPickerMode =
+      "color_temp_kelvin" in this._favoriteColors[index]
+        ? "color_temp"
+        : "color";
     const color = await showLightColorFavoriteDialog(this, {
       entry: this.entry!,
+      defaultMode,
       title: this.hass.localize(
         "ui.dialogs.more_info_control.light.favorite_color.edit_title"
       ),

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

@@ -28,7 +28,7 @@ import {
 } from "../../../../data/light";
 import { HomeAssistant } from "../../../../types";
 
-type Mode = "color_temp" | "color";
+export type LightPickerMode = "color_temp" | "color";
 
 declare global {
   interface HASSDomEvents {
@@ -42,7 +42,7 @@ class LightColorPicker extends LitElement {
 
   @property() public entityId!: string;
 
-  @property() public defaultMode!: Mode;
+  @property() public defaultMode?: LightPickerMode;
 
   @state() private _cwSliderValue?: number;
 
@@ -58,9 +58,9 @@ class LightColorPicker extends LitElement {
 
   @state() private _ctPickerValue?: number;
 
-  @state() private _mode?: Mode;
+  @state() private _mode?: LightPickerMode;
 
-  @state() private _modes: Mode[] = [];
+  @state() private _modes: LightPickerMode[] = [];
 
   get stateObj() {
     return this.hass.states[this.entityId] as LightEntity | undefined;
@@ -267,7 +267,7 @@ class LightColorPicker extends LitElement {
 
       const supportsColor = lightSupportsColor(this.stateObj!);
 
-      const modes: Mode[] = [];
+      const modes: LightPickerMode[] = [];
       if (supportsColor) {
         modes.push("color");
       }

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

@@ -1,10 +1,12 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ExtEntityRegistryEntry } from "../../../../data/entity_registry";
 import { LightColor } from "../../../../data/light";
+import type { LightPickerMode } from "./light-color-picker";
 
 export interface LightColorFavoriteDialogParams {
   entry: ExtEntityRegistryEntry;
   title: string;
+  defaultMode?: LightPickerMode;
   submit?: (color?: LightColor) => void;
   cancel?: () => void;
 }

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

@@ -1,8 +1,9 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LightPickerMode } from "./light-color-picker";
 
 export interface LightColorPickerViewParams {
   entityId: string;
-  defaultMode: "color" | "color_temp";
+  defaultMode: LightPickerMode;
 }
 
 export const loadLightColorPickerView = () =>