break theme picker out of lovelace (#12140)

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

@@ -6,7 +6,6 @@ import type {
   LocationSelector,
   LocationSelectorValue,
 } from "../../data/selector";
-import "../../panels/lovelace/components/hui-theme-select-editor";
 import type { HomeAssistant } from "../../types";
 import type { MarkerLocation } from "../map/ha-locations-editor";
 import "../map/ha-locations-editor";

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

@@ -1,4 +1,4 @@
-import "../../panels/lovelace/components/hui-theme-select-editor";
+import "../ha-theme-picker";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
@@ -18,11 +18,11 @@ export class HaThemeSelector extends LitElement {
 
   protected render() {
     return html`
-      <hui-theme-select-editor
+      <ha-theme-picker
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
-      ></hui-theme-select-editor>
+      ></ha-theme-picker>
     `;
   }
 }

src/components/ha-theme-picker.ts

@@ -2,13 +2,13 @@ import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
+import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
+import { stopPropagation } from "../common/dom/stop_propagation";
-import "../../../components/ha-select";
+import "./ha-select";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant } from "../types";
 
-@customElement("hui-theme-select-editor")
+@customElement("ha-theme-picker")
-export class HuiThemeSelectEditor extends LitElement {
+export class HaThemePicker extends LitElement {
   @property() public value?: string;
 
   @property() public label?: string;
@@ -19,11 +19,7 @@ export class HuiThemeSelectEditor extends LitElement {
     return html`
       <ha-select
         .label=${this.label ||
-        `${this.hass!.localize(
+        this.hass!.localize("ui.components.theme_picker.theme")}
-          "ui.panel.lovelace.editor.card.generic.theme"
-        )} (${this.hass!.localize(
-          "ui.panel.lovelace.editor.card.config.optional"
-        )})`}
         .value=${this.value}
         @selected=${this._changed}
         @closed=${stopPropagation}
@@ -32,7 +28,7 @@ export class HuiThemeSelectEditor extends LitElement {
       >
         <mwc-list-item value="remove"
           >${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.generic.no_theme"
+            "ui.components.theme_picker.no_theme"
           )}</mwc-list-item
         >
         ${Object.keys(this.hass!.themes.themes)
@@ -64,6 +60,6 @@ export class HuiThemeSelectEditor extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-theme-select-editor": HuiThemeSelectEditor;
+    "ha-theme-picker": HaThemePicker;
   }
 }

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -23,7 +23,6 @@ export const configElementStyle = css`
   .suffix {
     margin: 0 8px;
   }
-  hui-theme-select-editor,
   hui-action-editor,
   ha-select,
   ha-textfield,

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

@@ -99,6 +99,14 @@ export class HuiAlarmPanelCardEditor
       return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.name`);
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return this.hass!.localize(
       `ui.panel.lovelace.editor.card.alarm-panel.${
         schema.name === "states" ? "available_states" : schema.name

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

@@ -69,6 +69,12 @@ export class HuiAreaCardEditor
 
   private _computeLabelCallback = (schema: HaFormSchema) => {
     switch (schema.name) {
+      case "theme":
+        return `${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.generic.theme"
+        )} (${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.config.optional"
+        )})`;
       case "area":
         return this.hass!.localize("ui.panel.lovelace.editor.card.area.name");
       case "navigation_path":

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

@@ -200,6 +200,14 @@ export class HuiButtonCardEditor
       )}`;
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return this.hass!.localize(
       `ui.panel.lovelace.editor.card.generic.${schema.name}`
     );

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

@@ -121,6 +121,14 @@ export class HuiCalendarCardEditor
       return this.hass!.localize("ui.panel.lovelace.editor.card.generic.title");
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return this.hass!.localize(
       `ui.panel.lovelace.editor.card.calendar.${schema.name}`
     );

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

@@ -31,7 +31,7 @@ import "../../../../components/ha-icon";
 import "../../../../components/ha-switch";
 import type { HomeAssistant } from "../../../../types";
 import type { EntitiesCardConfig } from "../../cards/types";
-import "../../components/hui-theme-select-editor";
+import "../../../../components/ha-theme-picker";
 import { TIMESTAMP_RENDERING_FORMATS } from "../../components/types";
 import type { LovelaceRowConfig } from "../../entity-rows/types";
 import { headerFooterConfigStructs } from "../../header-footer/structs";
@@ -265,12 +265,17 @@ export class HuiEntitiesCardEditor
           .configValue=${"title"}
           @input=${this._valueChanged}
         ></ha-textfield>
-        <hui-theme-select-editor
+        <ha-theme-picker
           .hass=${this.hass}
           .value=${this._theme}
+          .label=${`${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.theme"
+          )} (${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})`}
           .configValue=${"theme"}
           @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
+        ></ha-theme-picker>
         <div class="side-by-side">
           <ha-formfield
             .label=${this.hass.localize(

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

@@ -112,6 +112,14 @@ export class HuiEntityCardEditor
       );
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return this.hass!.localize(
       `ui.panel.lovelace.editor.card.generic.${schema.name}`
     );

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

@@ -172,6 +172,12 @@ export class HuiGaugeCardEditor
         return this.hass!.localize(
           "ui.panel.lovelace.editor.card.gauge.needle_gauge"
         );
+      case "theme":
+        return `${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.generic.theme"
+        )} (${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.config.optional"
+        )})`;
     }
     return (
       this.hass!.localize(

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

@@ -117,11 +117,23 @@ export class HuiGlanceCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) =>
+  private _computeLabelCallback = (schema: HaFormSchema) => {
-    this.hass!.localize(
+    if (schema.name === "theme") {
-      `ui.panel.lovelace.editor.card.glance.${schema.name}`
+      return `${this.hass!.localize(
-    ) ||
+        "ui.panel.lovelace.editor.card.generic.theme"
-    this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+    return (
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.glance.${schema.name}`
+      ) ||
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.generic.${schema.name}`
+      )
+    );
+  };
 }
 
 declare global {

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

@@ -75,6 +75,14 @@ export class HuiHumidifierCardEditor
       );
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return this.hass!.localize(
       `ui.panel.lovelace.editor.card.generic.${schema.name}`
     );

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

@@ -179,6 +179,14 @@ export class HuiLightCardEditor
       );
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return this.hass!.localize(
       `ui.panel.lovelace.editor.card.generic.${schema.name}`
     );

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

@@ -96,11 +96,24 @@ export class HuiLogbookCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) =>
+  private _computeLabelCallback = (schema: HaFormSchema) => {
-    this.hass!.localize(
+    if (schema.name === "theme") {
-      `ui.panel.lovelace.editor.card.generic.${schema.name}`
+      return `${this.hass!.localize(
-    ) ||
+        "ui.panel.lovelace.editor.card.generic.theme"
-    this.hass!.localize(`ui.panel.lovelace.editor.card.logbook.${schema.name}`);
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
+    return (
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.generic.${schema.name}`
+      ) ||
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.logbook.${schema.name}`
+      )
+    );
+  };
 }
 
 declare global {

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

@@ -58,13 +58,23 @@ export class HuiMarkdownCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) =>
+  private _computeLabelCallback = (schema: HaFormSchema) => {
-    this.hass!.localize(
+    if (schema.name === "theme") {
-      `ui.panel.lovelace.editor.card.generic.${schema.name}`
+      return `${this.hass!.localize(
-    ) ||
+        "ui.panel.lovelace.editor.card.generic.theme"
-    this.hass!.localize(
+      )} (${this.hass!.localize(
-      `ui.panel.lovelace.editor.card.markdown.${schema.name}`
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+    return (
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.generic.${schema.name}`
+      ) ||
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.markdown.${schema.name}`
+      )
     );
+  };
 }
 
 declare global {

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

@@ -5,7 +5,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
-import "../../components/hui-theme-select-editor";
+import "../../../../components/ha-theme-picker";
 import { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
@@ -62,12 +62,17 @@ export class HuiMediaControlCardEditor
           @change=${this._valueChanged}
           allow-custom-entity
         ></ha-entity-picker>
-        <hui-theme-select-editor
+        <ha-theme-picker
+          .label=${`${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.theme"
+          )} (${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})`}
           .hass=${this.hass}
           .value=${this._theme}
           .configValue=${"theme"}
           @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
+        ></ha-theme-picker>
       </div>
     `;
   }

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

@@ -6,7 +6,7 @@ import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { PictureCardConfig } from "../../cards/types";
 import "../../components/hui-action-editor";
-import "../../components/hui-theme-select-editor";
+import "../../../../components/ha-theme-picker";
 import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
@@ -72,12 +72,17 @@ export class HuiPictureCardEditor
           .configValue=${"image"}
           @input=${this._valueChanged}
         ></ha-textfield>
-        <hui-theme-select-editor
+        <ha-theme-picker
           .hass=${this.hass}
           .value=${this._theme}
+          .label=${`${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.theme"
+          )} (${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})`}
           .configValue=${"theme"}
           @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
+        ></ha-theme-picker>
         <hui-action-editor
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.tap_action"

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

@@ -170,6 +170,14 @@ export class HuiPictureEntityCardEditor
       );
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return (
       this.hass!.localize(
         `ui.panel.lovelace.editor.card.generic.${schema.name}`

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

@@ -165,6 +165,14 @@ export class HuiPictureGlanceCardEditor
       );
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return (
       this.hass!.localize(
         `ui.panel.lovelace.editor.card.generic.${schema.name}`

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

@@ -64,7 +64,13 @@ export class HuiPlantStatusCardEditor
         "ui.panel.lovelace.editor.card.generic.entity"
       );
     }
-
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
     return this.hass!.localize(
       `ui.panel.lovelace.editor.card.generic.${schema.name}`
     );

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

@@ -153,6 +153,14 @@ export class HuiSensorCardEditor
       );
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     if (schema.name === "detail") {
       return this.hass!.localize(
         "ui.panel.lovelace.editor.card.sensor.show_more_detail"

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -6,7 +6,7 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
-import "../../components/hui-theme-select-editor";
+import "../../../../components/ha-theme-picker";
 import { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
@@ -67,12 +67,17 @@ export class HuiShoppingListEditor
           .configValue=${"title"}
           @input=${this._valueChanged}
         ></ha-textfield>
-        <hui-theme-select-editor
+        <ha-theme-picker
           .hass=${this.hass}
           .value=${this._theme}
           .configValue=${"theme"}
+          .label=${`${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.theme"
+          )} (${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})`}
           @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
+        ></ha-theme-picker>
       </div>
     `;
   }

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

@@ -71,6 +71,14 @@ export class HuiThermostatCardEditor
       );
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return this.hass!.localize(
       `ui.panel.lovelace.editor.card.generic.${schema.name}`
     );

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

@@ -184,6 +184,14 @@ export class HuiWeatherForecastCardEditor
       )})`;
     }
 
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+
     return (
       this.hass!.localize(
         `ui.panel.lovelace.editor.card.generic.${schema.name}`

src/translations/en.json

@@ -401,6 +401,10 @@
         "add_device_id": "Choose device",
         "add_entity_id": "Choose entity"
       },
+      "theme-picker": {
+        "theme": "Theme",
+        "no_theme": "No theme"
+      },
       "user-picker": {
         "no_user": "No user",
         "add_user": "Add user",
@@ -3458,7 +3462,6 @@
               "tap_action": "Tap Action",
               "title": "Title",
               "theme": "Theme",
-              "no_theme": "No theme",
               "unit": "Unit",
               "url": "URL",
               "state": "State",