Add timezone selector (#29205)

* Add timezone selector

* Use timezone selector in clock card

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

@@ -0,0 +1,47 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { TimezoneSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-timezone-picker";
+
+@customElement("ha-selector-timezone")
+export class HaTimezoneSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: TimezoneSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  protected render() {
+    return html`
+      <ha-timezone-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-timezone-picker>
+    `;
+  }
+
+  static styles = css`
+    ha-timezone-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-timezone": HaTimezoneSelector;
+  }
+}

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

@@ -52,6 +52,7 @@ const LOAD_ELEMENTS = {
   icon: () => import("./ha-selector-icon"),
   media: () => import("./ha-selector-media"),
   theme: () => import("./ha-selector-theme"),
+  timezone: () => import("./ha-selector-timezone"),
   button_toggle: () => import("./ha-selector-button-toggle"),
   trigger: () => import("./ha-selector-trigger"),
   tts: () => import("./ha-selector-tts"),

src/components/ha-timezone-picker.ts

@@ -28,10 +28,17 @@ export class HaTimeZonePicker extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
   @property({ type: Boolean }) public required = false;
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean, attribute: "hide-clear-icon" })
+  public hideClearIcon = false;
+
   private _getTimezoneOptions = memoizeOne(getTimezoneOptions);
 
   private _getItems = () => this._getTimezoneOptions();
@@ -56,14 +63,16 @@ export class HaTimeZonePicker extends LitElement {
           "ui.components.timezone-picker.no_timezones"
         ) || "No time zones available"}
         .label=${label}
+        .helper=${this.helper}
+        .placeholder=${this.placeholder}
         .value=${this.value}
         .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}
         .required=${this.required}
         .getItems=${this._getItems}
         .searchKeys=${SEARCH_KEYS}
+        .hideClearIcon=${this.hideClearIcon}
         @value-changed=${this._changed}
-        hide-clear-icon
       ></ha-generic-picker>
     `;
   }

src/data/selector.ts

@@ -68,6 +68,7 @@ export type Selector =
   | TemplateSelector
   | ThemeSelector
   | TimeSelector
+  | TimezoneSelector
   | TriggerSelector
   | TTSSelector
   | TTSVoiceSelector
@@ -296,6 +297,10 @@ export interface LanguageSelector {
   } | null;
 }
 
+export interface TimezoneSelector {
+  timezone: {} | null;
+}
+
 export interface LocationSelector {
   location: {
     radius?: boolean;

src/panels/config/core/ha-config-section-general.ts

@@ -106,6 +106,7 @@ class HaConfigSectionGeneral extends LitElement {
                 .disabled=${disabled}
                 .value=${this._timeZone}
                 @value-changed=${this._handleValueChanged}
+                hide-clear-icon
               ></ha-timezone-picker>
               <ha-textfield
                 .label=${this.hass.localize(

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

@@ -237,33 +237,13 @@ export class HuiClockCardEditor
                   : []),
               ] as const satisfies readonly HaFormSchema[])
             : []),
-        {
-          name: "time_zone",
-          selector: {
-            select: {
-              mode: "dropdown",
-              options: [
-                [
-                  "auto",
-                  localize(
-                    `ui.panel.lovelace.editor.card.clock.time_zones.auto`
-                  ),
-                ],
-                ...Object.entries(timezones as Record<string, string>),
-              ].map(([key, value]) => ({
-                value: key,
-                label: value,
-              })),
-            },
-          },
-        },
+        { name: "time_zone", selector: { timezone: {} } },
       ] as const satisfies readonly HaFormSchema[]
   );
 
   private _data = memoizeOne((config) => ({
     clock_style: "digital",
     clock_size: "small",
-    time_zone: "auto",
     time_format: "auto",
     show_seconds: false,
     no_background: false,
@@ -302,9 +282,6 @@ export class HuiClockCardEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    if (ev.detail.value.time_zone === "auto") {
-      delete ev.detail.value.time_zone;
-    }
     if (ev.detail.value.time_format === "auto") {
       delete ev.detail.value.time_format;
     }