genesys-spark-components 4.0.0-beta.8 → 4.0.1

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.js

@@ -8,29 +8,72 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { forceUpdate, h } from '@stencil/core';
-import libphonenumber, { PhoneNumberFormat } from 'google-libphonenumber';
-import { trackComponent } from '@utils/tracking/usage';
-import { regionCountryCodeMap } from './services/RegionCountryCodeMap';
-import { buildI18nForComponent, getDesiredLocale } from '../../../i18n';
-import countryResources from './i18n/en.json';
-import { OnClickOutside } from '@utils/decorator/on-click-outside';
-import { getRegionObjects } from './services/region-map.service';
-import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
-import { logWarn } from '@utils/error/log-error';
+import { forceUpdate, h } from "@stencil/core";
+import libphonenumber, { PhoneNumberFormat } from "google-libphonenumber";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent, getDesiredLocale } from "../../../i18n";
+import countryResources from "./i18n/en.json";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { getRegionObjects } from "./services/region-map.service";
+import { preventBrowserValidationStyling } from "../../../utils/dom/prevent-browser-validation-styling";
+import { logWarn } from "../../../utils/error/log-error";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
 export class GuxPhoneInput {
   constructor() {
     this.phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
     this.regionObjects = [];
-    this.value = undefined;
+    this.value = '';
     this.defaultRegion = undefined;
     this.labelId = undefined;
     this.hasError = false;
     this.disabled = false;
     this.required = false;
-    this.phoneNumberFormat = 'INTERNATIONAL';
-    this.region = undefined;
+    this.phoneNumberFormat = 'NATIONAL';
+    this.regionOptions = [];
     this.expanded = false;
+    this.region = null;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async setRegionAlpha2Code(alpha2Code) {
+    this._setRegionAlpha2Code(alpha2Code);
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async setRegionDialCode(dialCode) {
+    const newRegion = this.getRegionFromDialCode(dialCode);
+    this.updateInputWithNewRegion(newRegion, this.region);
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async getRegion() {
+    return this.region;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async getFormattedNumber(format = 'E164') {
+    var _a;
+    const phone = this.parsePhoneNumber(this.value, (_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code);
+    const libFormat = this.parseDisplayFormat(format);
+    return phone ? this.phoneUtil.format(phone, libFormat) : null;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async getExtension() {
+    var _a;
+    const phone = this.parsePhoneNumber(this.value, (_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code);
+    return phone ? phone.getExtension() : null;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async isPossibleNumber() {
+    var _a;
+    const phone = this.parsePhoneNumber(this.value, (_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code);
+    return phone ? this.phoneUtil.isPossibleNumber(phone) : false;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async isValidNumber() {
+    var _a;
+    const phone = this.parsePhoneNumber(this.value, (_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code);
+    return phone ? this.phoneUtil.isValidNumber(phone) : false;
+  }
+  updateValue(number) {
+    var _a;
+    this._setRegionAlpha2Code((_a = this.getRegionFromValue(number)) === null || _a === void 0 ? void 0 : _a.alpha2Code);
   }
   focusSelectedItemAfterRender(expanded) {
     if (expanded && this.listboxElement) {
@@ -41,22 +84,30 @@ export class GuxPhoneInput {
       });
     }
   }
-  validateValue(newValue) {
-    const selectedListboxOptionElement = this.getOptionElementByValue(newValue);
-    if (selectedListboxOptionElement) {
-      this.listboxElement.value = newValue;
-      return;
-    }
+  setDisplayFormat(format) {
+    this.displayFormat = this.parseDisplayFormat(format);
   }
   onInternallistboxoptionsupdated(event) {
     event.stopPropagation();
     forceUpdate(this.root);
   }
   onBlur(event) {
+    var _a;
     this.stopPropagationOfInternalFocusEvents(event);
+    // Native change events are not composed so they will not propagate out of the outermost of the shadow DOM.
+    if (this.value !== this.valueWhenFocused ||
+      ((_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code) !== this.regionAlphaCodeWhenFocused) {
+      simulateNativeEvent(this.root, 'change');
+    }
   }
   onFocus(event) {
+    var _a;
     this.stopPropagationOfInternalFocusEvents(event);
+    this.valueWhenFocused = this.value;
+    this.regionAlphaCodeWhenFocused = (_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code;
+    if (this.regionOptions.length === 0) {
+      this.regionOptions = this.getRegionOptions();
+    }
   }
   onFocusout() {
     this.collapseListbox('noFocusChange');
@@ -78,98 +129,132 @@ export class GuxPhoneInput {
     }
   }
   componentDidLoad() {
-    this.setValidation();
     this.setInput();
     this.setListBox();
   }
   componentWillRender() {
     trackComponent(this.root);
-    this.validateValue(this.region);
   }
   initialValueParse() {
     var _a;
-    this.setDisplayFormat();
+    this.setDisplayFormat(this.phoneNumberFormat);
     if (this.value) {
       try {
         const phone = this.phoneUtil.parse(this.value);
-        this.numberText = this.phoneUtil.format(phone, this.displayFormat);
-        this.region = this.getRegionCode(phone);
+        this._setRegionAlpha2Code((_a = this.getRegionFromValue(this.value)) === null || _a === void 0 ? void 0 : _a.alpha2Code);
+        this.value = this.phoneUtil.format(phone, this.displayFormat);
       }
       catch (e) {
-        if (this.numberText === undefined) {
-          // only show warning on initial render
-          logWarn(this.root, 'Number cannot be parsed');
-          this.numberText = this.value;
-          this.region = '';
-        }
+        logWarn(this.root, 'Number cannot be parsed');
       }
     }
     else {
-      this.region = ((_a = this.defaultRegion) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || '';
-      this.numberText = '';
+      this._setRegionAlpha2Code(this.defaultRegionCode);
+      this.value = '';
     }
-    if (this.listboxElement) {
-      this.listboxElement.value = this.region;
+  }
+  parseDisplayFormat(format) {
+    let output;
+    switch (format.toUpperCase()) {
+      case 'INTERNATIONAL':
+        output = PhoneNumberFormat.INTERNATIONAL;
+        break;
+      case 'E164':
+        output = PhoneNumberFormat.E164;
+        break;
+      case 'NATIONAL':
+      default:
+        output = PhoneNumberFormat.NATIONAL;
+        break;
     }
+    return output;
   }
-  onInputChange(number) {
-    if (number.startsWith('+')) {
-      try {
-        this.region = this.getRegionCode(this.phoneUtil.parse(number));
-      }
-      catch (e) {
-        // parse failed, so check if there is a matching region in the string
-        this.region = this.getRegionCodeFromRegionObjects(number);
-      }
+  /** Returns parsed phone number object or null if utility threw an error (unknown region or impossible to parse number) */
+  parsePhoneNumber(value, region = 'ZZ') {
+    try {
+      return this.phoneUtil.parse(value, region);
     }
-    this.numberText = number;
-    this.phoneNumberUpdated();
-  }
-  getRegionCode(number) {
-    let region = this.phoneUtil.getRegionCodeForNumber(number);
-    // setting region to empty when either 001 (global satellite) or ZZ (unknown) are returned
-    // phoneUtil doesn't always handle these cases in its other functions, so setting to an empty region (which is unknown with a globe as an icon) works best
-    if (region === '001' || region === 'ZZ') {
-      region = '';
+    catch (e) {
+      return null;
     }
-    return region;
   }
-  getRegionCodeFromRegionObjects(number) {
-    var _a;
-    return (((_a = this.regionObjects
-      .filter(region => number.startsWith(region.countryCode))
-      .sort((a, b) => b.countryCode.length - a.countryCode.length)[0]) === null || _a === void 0 ? void 0 : _a.code) ||
-      '');
-  }
-  validatePhoneNumber() {
-    if (this.value) {
-      try {
-        const phone = this.phoneUtil.parse(this.value);
-        const isValid = phone &&
-          this.phoneUtil.isValidNumberForRegion(phone, this.phoneUtil.getRegionCodeForNumber(phone));
-        this.phoneValidationError.emit(!isValid);
-      }
-      catch (e) {
-        if (this.numberText) {
-          logWarn(this.root, 'Number cannot be parsed');
-          this.phoneValidationError.emit(true);
-        }
+  onInputChange(number) {
+    this.value = number;
+  }
+  regionObjectToRegion(regionObject) {
+    let output = null;
+    if (regionObject) {
+      const regionCopy = Object.assign({}, regionObject);
+      delete regionCopy.name;
+      output = regionCopy;
+    }
+    return output;
+  }
+  _setRegionAlpha2Code(regionCode) {
+    const newAlpha2Code = regionCode === null || regionCode === void 0 ? void 0 : regionCode.toUpperCase();
+    const regionMatch = this.regionObjects.find(r => r.alpha2Code === newAlpha2Code);
+    const newRegion = this.regionObjectToRegion(regionMatch);
+    this.updateInputWithNewRegion(newRegion, this.region);
+  }
+  updateInputWithNewRegion(region, lastRegion) {
+    this.region = region;
+    if (this.value.startsWith('+') &&
+      (lastRegion === null || lastRegion === void 0 ? void 0 : lastRegion.dialCode) !== (region === null || region === void 0 ? void 0 : region.dialCode) &&
+      lastRegion !== null) {
+      const newValue = this.value.replace((lastRegion === null || lastRegion === void 0 ? void 0 : lastRegion.dialCode) || '+', (region === null || region === void 0 ? void 0 : region.dialCode) || '');
+      if (this.value !== newValue) {
+        this.value = newValue;
       }
     }
   }
-  phoneNumberUpdated() {
-    this.value = `+${this.numberText.replace(/\D/, '')}`;
-    this.input.emit(this.value);
+  get defaultRegionCode() {
+    var _a, _b;
+    const defaultRegion = (_a = this.defaultRegion) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    const regionMatch = defaultRegion
+      ? this.regionObjects.find(r => r.alpha2Code === defaultRegion)
+      : undefined;
+    return (_b = regionMatch === null || regionMatch === void 0 ? void 0 : regionMatch.alpha2Code) !== null && _b !== void 0 ? _b : null;
+  }
+  getRegionFromValue(number) {
+    return this.isNationalNumber(number)
+      ? this.region || null
+      : this.getRegionFromDialCode(number);
+  }
+  isNationalNumber(number) {
+    return !number.startsWith('+');
+  }
+  getRegionFromDialCode(number) {
+    const matches = this.regionObjects
+      .filter(region => number.startsWith(region.dialCode))
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(regionObj => this.regionObjectToRegion(regionObj));
+    if (number === '+') {
+      return this.region || null;
+    }
+    if (matches.length < 2) {
+      return matches[0] || null;
+    }
+    try {
+      // Use googlelib-phonenumber to parse and get the region code (primarily works for complete, valid numbers)
+      const parsedNumber = this.phoneUtil.parse(number);
+      const parsedRegionCode = this.phoneUtil.getRegionCodeForNumber(parsedNumber);
+      const match = matches.find(r => r.alpha2Code === parsedRegionCode);
+      if (match) {
+        return match;
+      }
+    }
+    catch (e) {
+      // Error thrown while parsing, continue processing without googlelib-phonenumber
+    }
+    const currentRegionMatch = matches.find(r => { var _a; return r.alpha2Code === ((_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code); });
+    const defaultRegionMatch = matches.find(r => r.alpha2Code === this.defaultRegionCode);
+    return currentRegionMatch || defaultRegionMatch || matches[0];
   }
   stopPropagationOfInternalFocusEvents(event) {
     if (this.root.contains(event.relatedTarget)) {
-      return event.stopImmediatePropagation();
+      event.stopImmediatePropagation();
     }
   }
-  getOptionElementByValue(value) {
-    const listboxOptionElements = this.root.shadowRoot.querySelectorAll('gux-option');
-    return Array.from(listboxOptionElements).find(listboxOptionElement => listboxOptionElement.value === value);
-  }
   fieldButtonClick() {
     this.expanded = !this.expanded;
   }
@@ -181,42 +266,10 @@ export class GuxPhoneInput {
       this.fieldButtonElement.focus();
     }
   }
-  updateRegion(newValue) {
-    if (this.region !== newValue) {
-      this.collapseListbox('focusFieldButton');
-      this.region = newValue;
-      if (this.numberText.startsWith('+')) {
-        this.numberText = regionCountryCodeMap[this.region] || '';
-      }
-      else {
-        this.numberText = regionCountryCodeMap[this.region]
-          ? regionCountryCodeMap[this.region] + this.numberText
-          : '';
-      }
-      this.phoneNumberUpdated();
-    }
-  }
-  setDisplayFormat() {
-    switch (this.phoneNumberFormat) {
-      case 'INTERNATIONAL':
-        this.displayFormat = PhoneNumberFormat.INTERNATIONAL;
-        break;
-      case 'E164':
-        this.displayFormat = PhoneNumberFormat.E164;
-        break;
-    }
-  }
-  setValidation() {
-    this.root.addEventListener('focusout', (event) => {
-      event.stopPropagation();
-      this.validatePhoneNumber();
-    });
-  }
   setInput() {
     this.inputElement = this.root.shadowRoot.querySelector('input[type="tel"]');
     preventBrowserValidationStyling(this.inputElement);
-    this.inputElement.addEventListener('input', (event) => {
-      event.stopPropagation();
+    this.inputElement.addEventListener('input', () => {
       this.onInputChange(this.inputElement.value);
     });
     this.inputElement.addEventListener('focusin', (event) => {
@@ -226,11 +279,11 @@ export class GuxPhoneInput {
   }
   setListBox() {
     this.listboxElement.addEventListener('input', (event) => {
-      event.stopPropagation();
-      this.updateRegion(event.target.value);
-    });
-    this.listboxElement.addEventListener('change', (event) => {
-      event.stopPropagation();
+      const regionCode = event.target
+        .value;
+      this.guxregionselect.emit(regionCode);
+      this._setRegionAlpha2Code(regionCode);
+      this.collapseListbox('focusFieldButton');
     });
     this.listboxElement.addEventListener('focusout', (event) => {
       event.stopPropagation();
@@ -255,11 +308,15 @@ export class GuxPhoneInput {
     return (h("div", { class: "gux-region-select" }, h("button", { type: "button", class: "gux-field gux-field-button", disabled: this.disabled, onClick: this.fieldButtonClick.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString(), "aria-label": this.i18n('regionDropdownButton') }, h("div", { class: "gux-field-content" }, this.renderButtonDisplay()), h("gux-icon", { class: "gux-expand-icon", iconName: "chevron-small-down", decorative: true }))));
   }
   renderButtonDisplay() {
-    const selectedListboxOptionElement = this.getOptionElementByValue(this.region);
-    return (h("div", { class: "gux-selected-option" }, (selectedListboxOptionElement === null || selectedListboxOptionElement === void 0 ? void 0 : selectedListboxOptionElement.value) ? (h("gux-region-icon", { region: this.region, "screenreader-text": this.i18n(this.region) })) : (h("gux-icon", { "icon-name": "globe", "screenreader-text": this.i18n('unknownRegion') }))));
+    var _a, _b;
+    return (h("div", { class: "gux-selected-option" }, this.region ? (h("gux-flag-icon-beta", { flag: (_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code, "screenreader-text": this.i18n((_b = this.region) === null || _b === void 0 ? void 0 : _b.alpha2Code) })) : (h("gux-icon", { "icon-name": "globe", "screenreader-text": this.i18n('unknownRegion') }))));
   }
   renderInput() {
-    return (h("input", { id: 'tel-input', class: "gux-phone-text-input", type: "tel", placeholder: this.phoneUtil.format(this.phoneUtil.getExampleNumber(this.region || 'US'), this.displayFormat), value: this.numberText, disabled: this.disabled }));
+    var _a;
+    return (h("input", { id: 'tel-input', class: {
+        'gux-phone-text-input': true,
+        'gux-disabled': this.disabled
+      }, type: "tel", placeholder: this.phoneUtil.format(this.phoneUtil.getExampleNumber(((_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code) || this.defaultRegionCode || 'US'), this.displayFormat), value: this.value, disabled: this.disabled }));
   }
   renderTarget() {
     return (h("div", { class: {
@@ -267,20 +324,22 @@ export class GuxPhoneInput {
         'gux-error': this.hasError
       }, slot: "target" }, this.renderCountryButton(), this.renderInput()));
   }
-  renderPopup() {
-    const options = [
+  getRegionOptions() {
+    return [
       (h("gux-option", { value: "" }, h("span", { class: "gux-option-content" }, h("gux-icon", { "icon-name": "globe", decorative: true }), h("span", null, this.i18n('unknownRegion')), h("span", { class: "gux-country-code" }, "+"))))
-    ].concat(this.regionObjects.map(region => (h("gux-option", { value: region.code }, h("span", { class: "gux-option-content" }, h("gux-region-icon", { region: region.code }), h("span", null, region.name), h("span", { class: "gux-country-code" }, region.countryCode))))));
-    return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("gux-listbox", { "aria-label": this.i18n('regionDropdown') }, options)));
+    ].concat(this.regionObjects.map(region => (h("gux-option", { value: region.alpha2Code }, h("span", { class: "gux-option-content" }, h("gux-flag-icon-beta", { flag: region.alpha2Code }), h("span", null, region.name), h("span", { class: "gux-country-code" }, region.dialCode))))));
+  }
+  renderPopup() {
+    return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("gux-listbox", { "aria-label": this.i18n('regionDropdown'), value: this.region ? this.region.alpha2Code : '' }, this.regionOptions)));
   }
   render() {
-    return (h("gux-popup", { expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+    return (h("gux-popup", { expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
   }
   static get is() { return "gux-phone-input-beta"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-phone-input.less"]
+      "$": ["gux-phone-input.scss"]
     };
   }
   static get styleUrls() {
@@ -305,18 +364,20 @@ export class GuxPhoneInput {
           "text": ""
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "''"
       },
       "defaultRegion": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "RegionCodes",
+          "original": "Alpha2Code",
           "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BV\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GS\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"",
           "references": {
-            "RegionCodes": {
+            "Alpha2Code": {
               "location": "import",
-              "path": "./services/RegionCountryCodeMap"
+              "path": "./gux-phone.types",
+              "id": "src/components/beta/gux-phone-input/gux-phone.types.ts::Alpha2Code"
             }
           }
         },
@@ -324,7 +385,7 @@ export class GuxPhoneInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Default ISO 3166-1 alpha-2 region code."
         },
         "attribute": "default-region",
         "reflect": false
@@ -404,8 +465,8 @@ export class GuxPhoneInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'E164' | 'INTERNATIONAL'",
-          "resolved": "\"E164\" | \"INTERNATIONAL\"",
+          "original": "'E164' | 'INTERNATIONAL' | 'NATIONAL'",
+          "resolved": "\"E164\" | \"INTERNATIONAL\" | \"NATIONAL\"",
           "references": {}
         },
         "required": false,
@@ -416,20 +477,21 @@ export class GuxPhoneInput {
         },
         "attribute": "phone-number-format",
         "reflect": false,
-        "defaultValue": "'INTERNATIONAL'"
+        "defaultValue": "'NATIONAL'"
       }
     };
   }
   static get states() {
     return {
-      "region": {},
-      "expanded": {}
+      "regionOptions": {},
+      "expanded": {},
+      "region": {}
     };
   }
   static get events() {
     return [{
-        "method": "input",
-        "name": "input",
+        "method": "guxregionselect",
+        "name": "guxregionselect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -442,28 +504,161 @@ export class GuxPhoneInput {
           "resolved": "string",
           "references": {}
         }
-      }, {
-        "method": "phoneValidationError",
-        "name": "phoneValidationError",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
+      }];
+  }
+  static get methods() {
+    return {
+      "setRegionAlpha2Code": {
+        "complexType": {
+          "signature": "(alpha2Code: Alpha2Code) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "Alpha2Code": {
+              "location": "import",
+              "path": "./gux-phone.types",
+              "id": "src/components/beta/gux-phone-input/gux-phone.types.ts::Alpha2Code"
+            }
+          },
+          "return": "Promise<void>"
+        },
         "docs": {
-          "tags": [],
-          "text": ""
+          "text": "",
+          "tags": []
+        }
+      },
+      "setRegionDialCode": {
+        "complexType": {
+          "signature": "(dialCode: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
         },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "getRegion": {
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "signature": "() => Promise<Region>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "Region": {
+              "location": "import",
+              "path": "./gux-phone.types",
+              "id": "src/components/beta/gux-phone-input/gux-phone.types.ts::Region"
+            }
+          },
+          "return": "Promise<Region>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
         }
-      }];
+      },
+      "getFormattedNumber": {
+        "complexType": {
+          "signature": "(format?: typeof this.phoneNumberFormat) => Promise<string>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<string>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "getExtension": {
+        "complexType": {
+          "signature": "() => Promise<string>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<string>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "isPossibleNumber": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "isValidNumber": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
   }
   static get elementRef() { return "root"; }
   static get watchers() {
     return [{
+        "propName": "value",
+        "methodName": "updateValue"
+      }, {
         "propName": "expanded",
         "methodName": "focusSelectedItemAfterRender"
+      }, {
+        "propName": "phoneNumberFormat",
+        "methodName": "setDisplayFormat"
       }];
   }
   static get listeners() {