introduce country dropdown with cdn data

packages/boxel-ui/addon/src/components/select/index.gts

@@ -33,6 +33,7 @@ const BoxelSelect: TemplateOnlyComponent<Signature> = <template>
     @renderInPlace={{@renderInPlace}}
     @verticalPosition={{@verticalPosition}}
     @dropdownClass={{cn 'boxel-select__dropdown' @dropdownClass}}
+    @loadingMessage={{@loadingMessage}}
     {{! We can avoid providing arguments to the triggerComponent as long as they are specified here https://github.com/cibernox/ember-power-select/blob/913c85ec82d5c6aeb80a7a3b9d9c21ca9613e900/ember-power-select/src/components/power-select.hbs#L79-L106 }}
     {{! Even the custom BoxelTriggerWrapper will receive these arguments }}
     @triggerComponent={{(if

packages/experiments-realm/CardWithCountryField/86fee625-f9f0-460a-99aa-917d25657ec1.json

@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "country": {
+        "name": null,
+        "code": null
+      },
+      "title": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../country",
+        "name": "CardWithCountryField"
+      }
+    }
+  }
+}

packages/experiments-realm/country.gts

@@ -3,9 +3,16 @@ import {
   field,
   Component,
   CardDef,
+  FieldDef,
 } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
 import World from '@cardstack/boxel-icons/world';
+import { BoxelSelect } from '@cardstack/boxel-ui/components';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { restartableTask } from 'ember-concurrency';
+import type Owner from '@ember/owner';
+import countryDataFind from 'https://esm.run/[email protected]';
 
 export class Country extends CardDef {
   static displayName = 'Country';
@@ -23,3 +30,74 @@ export class Country extends CardDef {
     </template>
   };
 }
+
+function getCountryFlagEmoji(countryCode: string) {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map((char) => 127397 + char.charCodeAt(0));
+  return String.fromCodePoint(...codePoints);
+}
+
+interface CountryData {
+  code: string;
+  name: string;
+  emoji: string;
+}
+
+class CountryFieldEdit extends Component<typeof CountryField> {
+  @tracked countryDataFindLib: any;
+  @tracked country: CountryData | undefined;
+  @tracked countries: CountryData[] = [];
+
+  constructor(owner: Owner, args: any) {
+    super(owner, args);
+    this.loadCountries.perform();
+  }
+
+  private loadCountries = restartableTask(async () => {
+    this.countries = countryDataFind.Array().map((country: any) => {
+      return {
+        code: country.ISO2_CODE,
+        name: country.LIST_OF_NAME.ENG,
+        emoji: getCountryFlagEmoji(country.ISO2_CODE),
+      } as CountryData;
+    });
+  });
+
+  @action onSelectCountry(country: any) {
+    this.country = country;
+  }
+
+  <template>
+    <BoxelSelect
+      @options={{this.countries}}
+      @selected={{this.country}}
+      @onSelect={{@set}}
+      @loadingMessage='Loading countries...'
+      @onChange={{this.onSelectCountry}}
+      as |country|
+    >
+      {{country.emoji}}
+      {{country.name}}
+    </BoxelSelect>
+  </template>
+}
+
+export class CountryField extends FieldDef {
+  static displayName = 'Country';
+  @field name = contains(StringField);
+  @field code = contains(StringField);
+  static edit = CountryFieldEdit;
+}
+
+export class CardWithCountryField extends CardDef {
+  static displayName = 'Card With Country Field';
+  @field country = contains(CountryField);
+
+  static isolated = class Isolated extends Component<typeof this> {
+    <template>
+      <@fields.country />
+    </template>
+  };
+}