Add a region picker

TelixonRegionPicker is a button that shows the flag of the current region. Pressing the button opens a searchable list of regions. The picker links to a phone field through [for].

Link it to the field

<telixon-region-picker [for]="phone" />

<input
  #phone="telixonPhoneInput"
  [telixonPhoneInput]="{ mode: 'international', defaultRegion: 'US', display: { callingCodeInInput: false } }"
  [formControl]="control"
/>

[for] takes the field’s telixonPhoneInput export. Open the list and pick the United Kingdom. The trigger now shows +44 while the placeholder reads 7400 123456. Typing 2071838750 then puts +442071838750 in the control.

Pin and name the regions

prioritize puts the listed regions first, in the given order. sort orders the remaining regions, alphabetically by default or by calling code. The region names come from the application’s LOCALE_ID. The locale input overrides that locale for one picker. triggerLabel, searchLabel, and emptyText replace the picker’s three built-in strings. This picker pins the German-speaking regions, orders the rest by calling code, and shows German names and labels:

<telixon-region-picker
  [for]="phone"
  [prioritize]="['DE', 'AT', 'CH']"
  sort="callingCode"
  locale="de"
  triggerLabel="Region wählen"
  searchLabel="Suchen"
  emptyText="Keine Treffer"
/>

Restyle it

Every part of the picker carries a class. The package’s own rules have no specificity, which lets one class selector in the application’s stylesheet restyle any part. This example recolors the trigger and the selected row:

.tlx-region-picker__trigger {
  border-color: #b7d9cc;
  background: #f2faf7;
}

.tlx-region-picker__option[aria-selected='true'] {
  color: #1f7a5c;
}

The reference lists every class and the custom properties the parts share.

Replace the trigger and the rows

Two templates replace the content of the trigger and the content of every row. Their directives, TelixonRegionTriggerTemplate and TelixonRegionOptionTemplate, go into the component’s imports beside TelixonRegionPicker. So does TelixonFlag, which draws the flag inside either one:

<telixon-region-picker [for]="phone">
  <ng-template telixonRegionTrigger let-region>
    <telixon-flag [region]="region" />
    <span>{{ region }}</span>
  </ng-template>
  <ng-template telixonRegionOption let-option>
    <telixon-flag [region]="option.region" />
    <span>+{{ option.callingCode }} {{ option.displayName }}</span>
  </ng-template>
</telixon-region-picker>

The reference describes the context each template receives.

Place the list

By default the list opens under the trigger. anchor lines the list up with another element and gives the list that element’s width. Here the anchor is the whole field:

<div class="field" #field>
  <telixon-region-picker [for]="phone" [anchor]="field" />
  <input #phone="telixonPhoneInput" telixonPhoneInput [formControl]="control" />
</div>

popupOffset moves the list away from its anchor by a number of pixels.

Use it with Angular Material puts the picker inside mat-form-field, where the anchor is given as a selector.