CountrySelector (#18035)

src/components/ha-country-picker.ts

@@ -269,37 +269,61 @@ export class HaCountryPicker extends LitElement {
 
   @property() public label?: string;
 
+  @property() public countries?: string[];
+
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public required = false;
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  private _getOptions = memoizeOne((language?: string) => {
+  @property({ type: Boolean }) public noSort = false;
-    const countryDisplayNames =
-      Intl && "DisplayNames" in Intl
-        ? new Intl.DisplayNames(language, {
-            type: "region",
-            fallback: "code",
-          })
-        : undefined;
 
-    const options = COUNTRIES.map((country) => ({
+  private _getOptions = memoizeOne(
-      value: country,
+    (language?: string, countries?: string[]) => {
-      label: countryDisplayNames ? countryDisplayNames.of(country)! : country,
+      let options: { label: string; value: string }[] = [];
-    }));
+      const countryDisplayNames =
-    options.sort((a, b) =>
+        Intl && "DisplayNames" in Intl
-      caseInsensitiveStringCompare(a.label, b.label, language)
+          ? new Intl.DisplayNames(language, {
-    );
+              type: "region",
-    return options;
+              fallback: "code",
-  });
+            })
+          : undefined;
+
+      if (countries) {
+        options = countries.map((country) => ({
+          value: country,
+          label: countryDisplayNames
+            ? countryDisplayNames.of(country)!
+            : country,
+        }));
+      } else {
+        options = COUNTRIES.map((country) => ({
+          value: country,
+          label: countryDisplayNames
+            ? countryDisplayNames.of(country)!
+            : country,
+        }));
+      }
+
+      if (!this.noSort) {
+        options.sort((a, b) =>
+          caseInsensitiveStringCompare(a.label, b.label, language)
+        );
+      }
+      return options;
+    }
+  );
 
   protected render() {
-    const options = this._getOptions(this.language);
+    const options = this._getOptions(this.language, this.countries);
 
     return html`
       <ha-select
         .label=${this.label}
         .value=${this.value}
         .required=${this.required}
+        .helper=${this.helper}
         .disabled=${this.disabled}
         @selected=${this._changed}
         @closed=${stopPropagation}

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -66,6 +66,10 @@ export const computeInitialHaFormData = (
             typeof firstOption === "string" ? firstOption : firstOption.value;
           data[field.name] = selector.select.multiple ? [val] : val;
         }
+      } else if ("country" in selector) {
+        if (selector.country?.countries?.length) {
+          data[field.name] = selector.country.countries[0];
+        }
       } else if ("duration" in selector) {
         data[field.name] = {
           hours: 0,

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

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

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

@@ -21,6 +21,7 @@ const LOAD_ELEMENTS = {
   config_entry: () => import("./ha-selector-config-entry"),
   conversation_agent: () => import("./ha-selector-conversation-agent"),
   constant: () => import("./ha-selector-constant"),
+  country: () => import("./ha-selector-country"),
   date: () => import("./ha-selector-date"),
   datetime: () => import("./ha-selector-datetime"),
   device: () => import("./ha-selector-device"),

src/data/selector.ts

@@ -23,6 +23,7 @@ export type Selector =
   | ConversationAgentSelector
   | ConfigEntrySelector
   | ConstantSelector
+  | CountrySelector
   | DateSelector
   | DateTimeSelector
   | DeviceSelector
@@ -124,6 +125,13 @@ export interface ConstantSelector {
   } | null;
 }
 
+export interface CountrySelector {
+  country: {
+    countries: string[];
+    no_sort?: boolean;
+  } | null;
+}
+
 export interface DateSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   date: {} | null;

src/translations/en.json

@@ -418,6 +418,9 @@
         "conversation_agent": "Conversation agent",
         "none": "None"
       },
+      "country-picker": {
+        "country": "Country"
+      },
       "pipeline-picker": {
         "pipeline": "Assistant",
         "preferred": "Preferred assistant ({preferred})",