genesys-spark-components 4.0.0-beta.40 → 4.0.0-beta.41

package/dist/cjs/gux-phone-input-beta.cjs.entry.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-39160f18.js');
-const usage = require('./usage-9feecec4.js');
+const usage = require('./usage-7bd0f4a2.js');
 const index$1 = require('./index-ff762de3.js');
 const onClickOutside = require('./on-click-outside-a7d87c91.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-15142963.js');
 const logError = require('./log-error-8a92241e.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
 require('./get-closest-element-26894e5a.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1219,255 +1220,6 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
 
 const libphonenumber$1 = /*@__PURE__*/getDefaultExportFromCjs(libphonenumber);
 
-const regionCountryCodeMap = {
-  AD: '+376',
-  AE: '+971',
-  AF: '+93',
-  AG: '+1',
-  AI: '+1',
-  AL: '+355',
-  AM: '+374',
-  AO: '+244',
-  AR: '+54',
-  AS: '+1',
-  AT: '+43',
-  AU: '+61',
-  AW: '+297',
-  AX: '+358',
-  AZ: '+994',
-  BA: '+387',
-  BB: '+1',
-  BD: '+880',
-  BE: '+32',
-  BF: '+226',
-  BG: '+359',
-  BH: '+973',
-  BI: '+257',
-  BJ: '+229',
-  BL: '+590',
-  BM: '+1',
-  BN: '+673',
-  BO: '+591',
-  BQ: '+599',
-  BR: '+55',
-  BS: '+1',
-  BT: '+975',
-  BV: '+47',
-  BW: '+267',
-  BY: '+375',
-  BZ: '+501',
-  CA: '+1',
-  CC: '+61',
-  CD: '+243',
-  CF: '+236',
-  CG: '+242',
-  CH: '+41',
-  CI: '+225',
-  CK: '+682',
-  CL: '+56',
-  CM: '+237',
-  CN: '+86',
-  CO: '+57',
-  CR: '+506',
-  CU: '+53',
-  CV: '+238',
-  CW: '+599',
-  CX: '+61',
-  CY: '+357',
-  CZ: '+420',
-  DE: '+49',
-  DJ: '+253',
-  DK: '+45',
-  DM: '+1',
-  DO: '+1',
-  DZ: '+213',
-  EC: '+593',
-  EE: '+372',
-  EG: '+20',
-  EH: '+212',
-  ER: '+291',
-  ES: '+34',
-  ET: '+251',
-  FI: '+358',
-  FJ: '+679',
-  FK: '+500',
-  FM: '+691',
-  FO: '+298',
-  FR: '+33',
-  GA: '+241',
-  GB: '+44',
-  GD: '+1',
-  GE: '+995',
-  GF: '+594',
-  GG: '+44',
-  GH: '+233',
-  GI: '+350',
-  GL: '+299',
-  GM: '+220',
-  GN: '+224',
-  GP: '+590',
-  GQ: '+240',
-  GR: '+30',
-  GS: '+500',
-  GT: '+502',
-  GU: '+1',
-  GW: '+245',
-  GY: '+592',
-  HK: '+852',
-  HN: '+504',
-  HR: '+385',
-  HT: '+509',
-  HU: '+36',
-  ID: '+62',
-  IE: '+353',
-  IL: '+972',
-  IM: '+44',
-  IN: '+91',
-  IO: '+246',
-  IQ: '+964',
-  IR: '+98',
-  IS: '+354',
-  IT: '+39',
-  JE: '+44',
-  JM: '+1',
-  JO: '+962',
-  JP: '+81',
-  KE: '+254',
-  KG: '+996',
-  KH: '+855',
-  KI: '+686',
-  KM: '+269',
-  KN: '+1',
-  KP: '+850',
-  KR: '+82',
-  KW: '+965',
-  KY: '+1',
-  KZ: '+7',
-  LA: '+856',
-  LB: '+961',
-  LC: '+1',
-  LI: '+423',
-  LK: '+94',
-  LR: '+231',
-  LS: '+266',
-  LT: '+370',
-  LU: '+352',
-  LV: '+371',
-  LY: '+218',
-  MA: '+212',
-  MC: '+377',
-  MD: '+373',
-  ME: '+382',
-  MF: '+590',
-  MG: '+261',
-  MH: '+692',
-  MK: '+389',
-  ML: '+223',
-  MM: '+95',
-  MN: '+976',
-  MO: '+853',
-  MP: '+1',
-  MQ: '+596',
-  MR: '+222',
-  MS: '+1',
-  MT: '+356',
-  MU: '+230',
-  MV: '+960',
-  MW: '+265',
-  MX: '+52',
-  MY: '+60',
-  MZ: '+258',
-  NA: '+264',
-  NC: '+687',
-  NE: '+227',
-  NF: '+672',
-  NG: '+234',
-  NI: '+505',
-  NL: '+31',
-  NO: '+47',
-  NP: '+977',
-  NR: '+674',
-  NU: '+683',
-  NZ: '+64',
-  OM: '+968',
-  PA: '+507',
-  PE: '+51',
-  PF: '+689',
-  PG: '+675',
-  PH: '+63',
-  PK: '+92',
-  PL: '+48',
-  PM: '+508',
-  PN: '+64',
-  PR: '+1',
-  PS: '+970',
-  PT: '+351',
-  PW: '+680',
-  PY: '+595',
-  QA: '+974',
-  RE: '+262',
-  RO: '+40',
-  RS: '+381',
-  RU: '+7',
-  RW: '+250',
-  SA: '+966',
-  SB: '+677',
-  SC: '+248',
-  SD: '+249',
-  SE: '+46',
-  SG: '+65',
-  SH: '+290',
-  SI: '+386',
-  SJ: '+47',
-  SK: '+421',
-  SL: '+232',
-  SM: '+378',
-  SN: '+221',
-  SO: '+252',
-  SR: '+597',
-  SS: '+211',
-  ST: '+239',
-  SV: '+503',
-  SX: '+1',
-  SY: '+963',
-  SZ: '+268',
-  TC: '+1',
-  TD: '+235',
-  TG: '+228',
-  TH: '+66',
-  TJ: '+992',
-  TK: '+690',
-  TL: '+670',
-  TM: '+993',
-  TN: '+216',
-  TO: '+676',
-  TR: '+90',
-  TT: '+1',
-  TV: '+688',
-  TW: '+886',
-  TZ: '+255',
-  UA: '+380',
-  UG: '+256',
-  US: '+1',
-  UY: '+598',
-  UZ: '+998',
-  VA: '+379',
-  VC: '+1',
-  VE: '+58',
-  VG: '+1',
-  VI: '+1',
-  VN: '+84',
-  VU: '+678',
-  WF: '+681',
-  WS: '+685',
-  XK: '+383',
-  YE: '+967',
-  YT: '+262',
-  ZA: '+27',
-  ZM: '+260',
-  ZW: '+263'
-};
-
 const AD = "Andorra";
 const AE = "United Arab Emirates";
 const AF = "Afghanistan";
@@ -1969,16 +1721,265 @@ const countryResources = {
 	regionDropdownButton: regionDropdownButton
 };
 
-function getRegionObjects(locale, i18n, phoneUtil) {
-  let regionObjects = [];
-  for (const [key, val] of Object.entries(regionCountryCodeMap)) {
-    regionObjects.push({
-      code: key,
-      name: i18n(key),
-      countryCode: val
-    });
-  }
-  regionObjects = regionObjects.filter(r => phoneUtil.getSupportedRegions().includes(r.code));
+const regionCountryCodeMap = {
+  AD: '+376',
+  AE: '+971',
+  AF: '+93',
+  AG: '+1',
+  AI: '+1',
+  AL: '+355',
+  AM: '+374',
+  AO: '+244',
+  AR: '+54',
+  AS: '+1',
+  AT: '+43',
+  AU: '+61',
+  AW: '+297',
+  AX: '+358',
+  AZ: '+994',
+  BA: '+387',
+  BB: '+1',
+  BD: '+880',
+  BE: '+32',
+  BF: '+226',
+  BG: '+359',
+  BH: '+973',
+  BI: '+257',
+  BJ: '+229',
+  BL: '+590',
+  BM: '+1',
+  BN: '+673',
+  BO: '+591',
+  BQ: '+599',
+  BR: '+55',
+  BS: '+1',
+  BT: '+975',
+  BV: '+47',
+  BW: '+267',
+  BY: '+375',
+  BZ: '+501',
+  CA: '+1',
+  CC: '+61',
+  CD: '+243',
+  CF: '+236',
+  CG: '+242',
+  CH: '+41',
+  CI: '+225',
+  CK: '+682',
+  CL: '+56',
+  CM: '+237',
+  CN: '+86',
+  CO: '+57',
+  CR: '+506',
+  CU: '+53',
+  CV: '+238',
+  CW: '+599',
+  CX: '+61',
+  CY: '+357',
+  CZ: '+420',
+  DE: '+49',
+  DJ: '+253',
+  DK: '+45',
+  DM: '+1',
+  DO: '+1',
+  DZ: '+213',
+  EC: '+593',
+  EE: '+372',
+  EG: '+20',
+  EH: '+212',
+  ER: '+291',
+  ES: '+34',
+  ET: '+251',
+  FI: '+358',
+  FJ: '+679',
+  FK: '+500',
+  FM: '+691',
+  FO: '+298',
+  FR: '+33',
+  GA: '+241',
+  GB: '+44',
+  GD: '+1',
+  GE: '+995',
+  GF: '+594',
+  GG: '+44',
+  GH: '+233',
+  GI: '+350',
+  GL: '+299',
+  GM: '+220',
+  GN: '+224',
+  GP: '+590',
+  GQ: '+240',
+  GR: '+30',
+  GS: '+500',
+  GT: '+502',
+  GU: '+1',
+  GW: '+245',
+  GY: '+592',
+  HK: '+852',
+  HN: '+504',
+  HR: '+385',
+  HT: '+509',
+  HU: '+36',
+  ID: '+62',
+  IE: '+353',
+  IL: '+972',
+  IM: '+44',
+  IN: '+91',
+  IO: '+246',
+  IQ: '+964',
+  IR: '+98',
+  IS: '+354',
+  IT: '+39',
+  JE: '+44',
+  JM: '+1',
+  JO: '+962',
+  JP: '+81',
+  KE: '+254',
+  KG: '+996',
+  KH: '+855',
+  KI: '+686',
+  KM: '+269',
+  KN: '+1',
+  KP: '+850',
+  KR: '+82',
+  KW: '+965',
+  KY: '+1',
+  KZ: '+7',
+  LA: '+856',
+  LB: '+961',
+  LC: '+1',
+  LI: '+423',
+  LK: '+94',
+  LR: '+231',
+  LS: '+266',
+  LT: '+370',
+  LU: '+352',
+  LV: '+371',
+  LY: '+218',
+  MA: '+212',
+  MC: '+377',
+  MD: '+373',
+  ME: '+382',
+  MF: '+590',
+  MG: '+261',
+  MH: '+692',
+  MK: '+389',
+  ML: '+223',
+  MM: '+95',
+  MN: '+976',
+  MO: '+853',
+  MP: '+1',
+  MQ: '+596',
+  MR: '+222',
+  MS: '+1',
+  MT: '+356',
+  MU: '+230',
+  MV: '+960',
+  MW: '+265',
+  MX: '+52',
+  MY: '+60',
+  MZ: '+258',
+  NA: '+264',
+  NC: '+687',
+  NE: '+227',
+  NF: '+672',
+  NG: '+234',
+  NI: '+505',
+  NL: '+31',
+  NO: '+47',
+  NP: '+977',
+  NR: '+674',
+  NU: '+683',
+  NZ: '+64',
+  OM: '+968',
+  PA: '+507',
+  PE: '+51',
+  PF: '+689',
+  PG: '+675',
+  PH: '+63',
+  PK: '+92',
+  PL: '+48',
+  PM: '+508',
+  PN: '+64',
+  PR: '+1',
+  PS: '+970',
+  PT: '+351',
+  PW: '+680',
+  PY: '+595',
+  QA: '+974',
+  RE: '+262',
+  RO: '+40',
+  RS: '+381',
+  RU: '+7',
+  RW: '+250',
+  SA: '+966',
+  SB: '+677',
+  SC: '+248',
+  SD: '+249',
+  SE: '+46',
+  SG: '+65',
+  SH: '+290',
+  SI: '+386',
+  SJ: '+47',
+  SK: '+421',
+  SL: '+232',
+  SM: '+378',
+  SN: '+221',
+  SO: '+252',
+  SR: '+597',
+  SS: '+211',
+  ST: '+239',
+  SV: '+503',
+  SX: '+1',
+  SY: '+963',
+  SZ: '+268',
+  TC: '+1',
+  TD: '+235',
+  TG: '+228',
+  TH: '+66',
+  TJ: '+992',
+  TK: '+690',
+  TL: '+670',
+  TM: '+993',
+  TN: '+216',
+  TO: '+676',
+  TR: '+90',
+  TT: '+1',
+  TV: '+688',
+  TW: '+886',
+  TZ: '+255',
+  UA: '+380',
+  UG: '+256',
+  US: '+1',
+  UY: '+598',
+  UZ: '+998',
+  VA: '+379',
+  VC: '+1',
+  VE: '+58',
+  VG: '+1',
+  VI: '+1',
+  VN: '+84',
+  VU: '+678',
+  WF: '+681',
+  WS: '+685',
+  XK: '+383',
+  YE: '+967',
+  YT: '+262',
+  ZA: '+27',
+  ZM: '+260',
+  ZW: '+263'
+};
+
+function getRegionObjects(locale, i18n, phoneUtil) {
+  let regionObjects = [];
+  for (const [key, val] of Object.entries(regionCountryCodeMap)) {
+    regionObjects.push({
+      alpha2Code: key,
+      name: i18n(key),
+      dialCode: val
+    });
+  }
+  regionObjects = regionObjects.filter(r => phoneUtil.getSupportedRegions().includes(r.alpha2Code));
   regionObjects.sort((a, b) => a.name.localeCompare(b.name, locale));
   return regionObjects;
 }
@@ -1998,19 +1999,61 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxPhoneInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.input = index.createEvent(this, "input", 7);
-    this.phoneValidationError = index.createEvent(this, "phoneValidationError", 7);
+    this.guxregionselect = index.createEvent(this, "guxregionselect", 7);
     this.phoneUtil = libphonenumber$1.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) {
@@ -2021,22 +2064,30 @@ const GuxPhoneInput = class {
       });
     }
   }
-  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();
     index.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.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');
@@ -2058,98 +2109,132 @@ const GuxPhoneInput = class {
     }
   }
   componentDidLoad() {
-    this.setValidation();
     this.setInput();
     this.setListBox();
   }
   componentWillRender() {
     usage.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
-          logError.logWarn(this.root, 'Number cannot be parsed');
-          this.numberText = this.value;
-          this.region = '';
-        }
+        logError.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 = libphonenumber.PhoneNumberFormat.INTERNATIONAL;
+        break;
+      case 'E164':
+        output = libphonenumber.PhoneNumberFormat.E164;
+        break;
+      case 'NATIONAL':
+      default:
+        output = libphonenumber.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);
+    }
+    catch (e) {
+      return null;
     }
-    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 = '';
+  onInputChange(number) {
+    this.value = number;
+  }
+  regionObjectToRegion(regionObject) {
+    let output = null;
+    if (regionObject) {
+      const regionCopy = Object.assign({}, regionObject);
+      delete regionCopy.name;
+      output = regionCopy;
     }
-    return region;
+    return output;
   }
-  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) ||
-      '');
+  _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);
   }
-  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) {
-          logError.logWarn(this.root, 'Number cannot be parsed');
-          this.phoneValidationError.emit(true);
-        }
+  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;
   }
@@ -2161,42 +2246,10 @@ const GuxPhoneInput = class {
       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 = libphonenumber.PhoneNumberFormat.INTERNATIONAL;
-        break;
-      case 'E164':
-        this.displayFormat = libphonenumber.PhoneNumberFormat.E164;
-        break;
-    }
-  }
-  setValidation() {
-    this.root.addEventListener('focusout', (event) => {
-      event.stopPropagation();
-      this.validatePhoneNumber();
-    });
-  }
   setInput() {
     this.inputElement = this.root.shadowRoot.querySelector('input[type="tel"]');
     preventBrowserValidationStyling.preventBrowserValidationStyling(this.inputElement);
-    this.inputElement.addEventListener('input', (event) => {
-      event.stopPropagation();
+    this.inputElement.addEventListener('input', () => {
       this.onInputChange(this.inputElement.value);
     });
     this.inputElement.addEventListener('focusin', (event) => {
@@ -2206,11 +2259,11 @@ const GuxPhoneInput = class {
   }
   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();
@@ -2235,11 +2288,12 @@ const GuxPhoneInput = class {
     return (index.h("div", { class: "gux-region-select" }, index.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') }, index.h("div", { class: "gux-field-content" }, this.renderButtonDisplay()), index.h("gux-icon", { class: "gux-expand-icon", iconName: "chevron-small-down", decorative: true }))));
   }
   renderButtonDisplay() {
-    const selectedListboxOptionElement = this.getOptionElementByValue(this.region);
-    return (index.h("div", { class: "gux-selected-option" }, (selectedListboxOptionElement === null || selectedListboxOptionElement === void 0 ? void 0 : selectedListboxOptionElement.value) ? (index.h("gux-region-icon", { region: this.region, "screenreader-text": this.i18n(this.region) })) : (index.h("gux-icon", { "icon-name": "globe", "screenreader-text": this.i18n('unknownRegion') }))));
+    var _a, _b;
+    return (index.h("div", { class: "gux-selected-option" }, this.region ? (index.h("gux-region-icon", { region: (_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) })) : (index.h("gux-icon", { "icon-name": "globe", "screenreader-text": this.i18n('unknownRegion') }))));
   }
   renderInput() {
-    return (index.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 (index.h("input", { id: 'tel-input', class: "gux-phone-text-input", 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 (index.h("div", { class: {
@@ -2247,18 +2301,22 @@ const GuxPhoneInput = class {
         'gux-error': this.hasError
       }, slot: "target" }, this.renderCountryButton(), this.renderInput()));
   }
-  renderPopup() {
-    const options = [
+  getRegionOptions() {
+    return [
       (index.h("gux-option", { value: "" }, index.h("span", { class: "gux-option-content" }, index.h("gux-icon", { "icon-name": "globe", decorative: true }), index.h("span", null, this.i18n('unknownRegion')), index.h("span", { class: "gux-country-code" }, "+"))))
-    ].concat(this.regionObjects.map(region => (index.h("gux-option", { value: region.code }, index.h("span", { class: "gux-option-content" }, index.h("gux-region-icon", { region: region.code }), index.h("span", null, region.name), index.h("span", { class: "gux-country-code" }, region.countryCode))))));
-    return (index.h("div", { slot: "popup", class: "gux-listbox-container" }, index.h("gux-listbox", { "aria-label": this.i18n('regionDropdown') }, options)));
+    ].concat(this.regionObjects.map(region => (index.h("gux-option", { value: region.alpha2Code }, index.h("span", { class: "gux-option-content" }, index.h("gux-region-icon", { region: region.alpha2Code }), index.h("span", null, region.name), index.h("span", { class: "gux-country-code" }, region.dialCode))))));
+  }
+  renderPopup() {
+    return (index.h("div", { slot: "popup", class: "gux-listbox-container" }, index.h("gux-listbox", { "aria-label": this.i18n('regionDropdown'), value: this.region ? this.region.alpha2Code : '' }, this.regionOptions)));
   }
   render() {
-    return (index.h("gux-popup", { expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+    return (index.h("gux-popup", { expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {
-    "expanded": ["focusSelectedItemAfterRender"]
+    "value": ["updateValue"],
+    "expanded": ["focusSelectedItemAfterRender"],
+    "phoneNumberFormat": ["setDisplayFormat"]
   }; }
 };
 __decorate([