genesys-spark-components 4.26.1-beta.0 → 4.26.1

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-75c9f0d9.js');
-const usage = require('./usage-287da480.js');
-const index$1 = require('./index-dee802be.js');
-const onClickOutside = require('./on-click-outside-3c0f8816.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');
+const index = require('./index-7fb02c8c.js');
+const usage = require('./usage-623a7a81.js');
+const index$1 = require('./index-a1a48d79.js');
+const onClickOutside = require('./on-click-outside-f7acdd1d.js');
+const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
+const logError = require('./log-error-7b9d4b57.js');
+const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
+require('./get-closest-element-9e41d6b9.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -17,21 +17,13 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
+function commonjsRequire (path) {
+	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
 
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
+var libphonenumber$1 = {exports: {}};
 
-var libphonenumber = createCommonjsModule(function (module, exports) {
+(function (module, exports) {
 (function(f){{module.exports=f();}})(function(){return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof commonjsRequire&&commonjsRequire;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t);}return n[i].exports}for(var u="function"==typeof commonjsRequire&&commonjsRequire,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 (function (global){(function (){
 /*
@@ -1223,9 +1215,9 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
 }).call(this);}).call(this,typeof commonjsGlobal !== "undefined" ? commonjsGlobal : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {});
 },{}]},{},[1])(1)
 });
-});
+}(libphonenumber$1));
 
-const libphonenumber$1 = /*@__PURE__*/getDefaultExportFromCjs(libphonenumber);
+const libphonenumber = /*@__PURE__*/getDefaultExportFromCjs(libphonenumber$1.exports);
 
 const AD = "Andorra";
 const AE = "United Arab Emirates";
@@ -1729,619 +1721,620 @@ const countryResources = {
 };
 
 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'
+    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;
+    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;
 }
 
 const guxPhoneInputCss = ":host{display:block;color:var(--gse-ui-formControl-input-populatedColor)}.gux-phone-text-input{flex:1 1 auto;align-self:auto;order:0;width:100%;margin-inline-start:var(--gse-core-spacing-4xs);overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);color:var(--gse-ui-formControl-input-populatedColor);text-overflow:ellipsis;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;outline:none}.gux-phone-text-input.gux-disabled{-webkit-user-select:none;user-select:none}.target-container{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch center;align-items:center;width:100%;height:var(--gse-ui-phoneInput-dropdown-height);padding:0 var(--gse-core-spacing-3xs) 0 0;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.target-container.gux-error{border:var(--gse-ui-formControl-input-error-border-width) var(--gse-ui-formControl-input-error-border-style) var(--gse-ui-formControl-input-error-border-color)}.target-container:focus-within{outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-field{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-phoneInput-dropdown-gap);align-items:center;width:100%;height:100%;padding:var(--gse-ui-phoneInput-dropdown-padding);font-family:inherit;font-size:var(--gse-ui-formControl-input-contentText-fontSize);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);cursor:pointer;border-radius:var(--gse-ui-formControl-input-borderRadius) 0 0 var(--gse-ui-formControl-input-borderRadius)}.gux-field.gux-disabled{padding:var(--gse-ui-phoneInput-dropdown-disabled-padding)}.gux-field .gux-field-content{display:flex;flex-direction:column;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;min-width:0}.gux-field .gux-field-content .gux-selected-option{display:flex;justify-content:center;width:var(--gse-ui-phoneInput-dropdown-flag-width);overflow:hidden}.gux-field .gux-field-content .gux-selected-option gux-icon{position:relative;color:var(--gse-ui-formControl-input-inputIcon-defaultColor)}.gux-field .gux-field-content .gux-placeholder{color:var(--gse-ui-formControl-input-placeholderColor)}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;width:var(--gse-ui-phoneInput-dropdown-icon-width);height:var(--gse-ui-phoneInput-dropdown-icon-height);color:var(--gse-ui-phoneInput-dropdown-foregroundColor)}.gux-field-button{box-sizing:border-box;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;border-radius:var(--gse-ui-formControl-input-borderRadius) 0 0 var(--gse-ui-formControl-input-borderRadius);outline:none}.gux-field-button.gux-expanded{background-color:var(--gse-ui-phoneInput-dropdown-active-backgroundColor)}.gux-field-button.gux-expanded .gux-expand-icon{transform:rotate(180deg)}.gux-field-button:hover{background-color:var(--gse-ui-phoneInput-dropdown-hover-backgroundColor)}.gux-listbox-container{box-sizing:border-box;width:fit-content;min-width:var(--gse-ui-phoneInput-dropdown-menu-minWidth);margin:0}.gux-option-content{display:grid;grid-template-columns:36px 1fr;align-items:center;width:100%}.gux-option-content .gux-country-code{text-align:right}.gux-option-content gux-icon{position:relative;inset-inline-start:4px;width:var(--gse-ui-phoneInput-dropdown-icon-width);height:var(--gse-ui-phoneInput-dropdown-icon-height);color:var(--gse-ui-formControl-input-inputIcon-defaultColor)}.gux-region-select{height:100%;border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-region-select:focus-within{outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset)}";
+const GuxPhoneInputBetaStyle0 = guxPhoneInputCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        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;
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                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;
 };
 const GuxPhoneInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.guxregionselect = index.createEvent(this, "guxregionselect", 7);
-    this.phoneUtil = libphonenumber$1.PhoneNumberUtil.getInstance();
-    this.regionObjects = [];
-    this.value = '';
-    this.defaultRegion = undefined;
-    this.labelId = undefined;
-    this.hasError = false;
-    this.disabled = false;
-    this.required = false;
-    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) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          this.listboxElement.focus();
-        });
-      });
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.guxregionselect = index.createEvent(this, "guxregionselect", 7);
+        this.phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
+        this.regionObjects = [];
+        this.value = '';
+        this.defaultRegion = undefined;
+        this.labelId = undefined;
+        this.hasError = false;
+        this.disabled = false;
+        this.required = false;
+        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);
     }
-  }
-  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');
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async getRegion() {
+        return this.region;
     }
-  }
-  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();
+    // 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;
     }
-  }
-  onFocusout() {
-    this.collapseListbox('noFocusChange');
-  }
-  onFocusin(event) {
-    this.stopPropagationOfInternalFocusEvents(event);
-  }
-  onClickOutside() {
-    this.collapseListbox('noFocusChange');
-  }
-  async componentWillLoad() {
-    this.i18n = await index$1.buildI18nForComponent(this.root, countryResources);
-    this.regionObjects = getRegionObjects(index$1.getDesiredLocale(this.root), this.i18n, this.phoneUtil);
-    this.initialValueParse();
-  }
-  componentDidRender() {
-    if (!this.listboxElement) {
-      this.listboxElement = this.root.shadowRoot.querySelector('gux-listbox');
+    // 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;
     }
-  }
-  componentDidLoad() {
-    this.setInput();
-    this.setListBox();
-  }
-  componentWillRender() {
-    usage.trackComponent(this.root);
-  }
-  initialValueParse() {
-    var _a;
-    this.setDisplayFormat(this.phoneNumberFormat);
-    if (this.value) {
-      try {
-        const phone = this.phoneUtil.parse(this.value);
-        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) {
-        logError.logWarn(this.root, 'Number cannot be parsed');
-      }
+    // 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;
     }
-    else {
-      this._setRegionAlpha2Code(this.defaultRegionCode);
-      this.value = '';
+    // 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;
     }
-  }
-  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;
+    updateValue(number) {
+        var _a;
+        this._setRegionAlpha2Code((_a = this.getRegionFromValue(number)) === null || _a === void 0 ? void 0 : _a.alpha2Code);
     }
-    return output;
-  }
-  /** 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);
+    focusSelectedItemAfterRender(expanded) {
+        if (expanded && this.listboxElement) {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.listboxElement.focus();
+                });
+            });
+        }
     }
-    catch (e) {
-      return null;
+    setDisplayFormat(format) {
+        this.displayFormat = this.parseDisplayFormat(format);
     }
-  }
-  onInputChange(number) {
-    this.value = number;
-  }
-  regionObjectToRegion(regionObject) {
-    let output = null;
-    if (regionObject) {
-      const regionCopy = Object.assign({}, regionObject);
-      delete regionCopy.name;
-      output = regionCopy;
+    onInternallistboxoptionsupdated(event) {
+        event.stopPropagation();
+        index.forceUpdate(this.root);
     }
-    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;
-      }
+    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');
+        }
     }
-  }
-  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;
+    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();
+        }
     }
-    if (matches.length < 2) {
-      return matches[0] || null;
+    onFocusout() {
+        this.collapseListbox('noFocusChange');
     }
-    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;
-      }
+    onFocusin(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
     }
-    catch (e) {
-      // Error thrown while parsing, continue processing without googlelib-phonenumber
+    onClickOutside() {
+        this.collapseListbox('noFocusChange');
+    }
+    async componentWillLoad() {
+        this.i18n = await index$1.buildI18nForComponent(this.root, countryResources);
+        this.regionObjects = getRegionObjects(index$1.getDesiredLocale(this.root), this.i18n, this.phoneUtil);
+        this.initialValueParse();
     }
-    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)) {
-      event.stopImmediatePropagation();
+    componentDidRender() {
+        if (!this.listboxElement) {
+            this.listboxElement = this.root.shadowRoot.querySelector('gux-listbox');
+        }
     }
-  }
-  fieldButtonClick() {
-    this.expanded = !this.expanded;
-  }
-  collapseListbox(focusChange) {
-    if (this.expanded) {
-      this.expanded = false;
+    componentDidLoad() {
+        this.setInput();
+        this.setListBox();
     }
-    if (focusChange === 'focusFieldButton') {
-      this.fieldButtonElement.focus();
+    componentWillRender() {
+        usage.trackComponent(this.root);
     }
-  }
-  setInput() {
-    this.inputElement = this.root.shadowRoot.querySelector('input[type="tel"]');
-    preventBrowserValidationStyling.preventBrowserValidationStyling(this.inputElement);
-    this.inputElement.addEventListener('input', () => {
-      this.onInputChange(this.inputElement.value);
-    });
-    this.inputElement.addEventListener('focusin', (event) => {
-      event.stopPropagation();
-      this.collapseListbox('noFocusChange');
-    });
-  }
-  setListBox() {
-    this.listboxElement.addEventListener('input', (event) => {
-      const regionCode = event.target
-        .value;
-      this.guxregionselect.emit(regionCode);
-      this._setRegionAlpha2Code(regionCode);
-      this.collapseListbox('focusFieldButton');
-    });
-    this.listboxElement.addEventListener('focusout', (event) => {
-      event.stopPropagation();
-    });
-    this.listboxElement.addEventListener('keydown', (event) => {
-      event.stopPropagation();
-      if (event.key === 'Tab') {
-        /* calling setTimeout is a workaround as calling focus without it does not work */
-        if (event.shiftKey) {
-          setTimeout(() => this.fieldButtonElement.focus(), 0);
+    initialValueParse() {
+        var _a;
+        this.setDisplayFormat(this.phoneNumberFormat);
+        if (this.value) {
+            try {
+                const phone = this.phoneUtil.parse(this.value);
+                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) {
+                logError.logWarn(this.root, 'Number cannot be parsed');
+            }
         }
         else {
-          setTimeout(() => this.inputElement.focus(), 0);
+            this._setRegionAlpha2Code(this.defaultRegionCode);
+            this.value = '';
         }
-      }
-      else if (event.key === 'Escape') {
-        this.collapseListbox('noFocusChange');
-      }
-    });
-  }
-  renderExpandIcon() {
-    if (!this.disabled)
-      return (index.h("gux-icon", { class: "gux-expand-icon", iconName: "chevron-small-down", decorative: true }));
-  }
-  renderCountryButton() {
-    return (index.h("div", { class: "gux-region-select" }, index.h("button", { type: "button", class: {
-        'gux-field gux-field-button': true,
-        'gux-expanded': this.expanded,
-        'gux-disabled': this.disabled
-      }, 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()), this.renderExpandIcon())));
-  }
-  renderButtonDisplay() {
-    var _a, _b;
-    return (index.h("div", { class: "gux-selected-option" }, this.region ? (index.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) })) : (index.h("gux-icon", { "icon-name": "globe", "screenreader-text": this.i18n('unknownRegion') }))));
-  }
-  renderInput() {
-    var _a;
-    return (index.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 (index.h("div", { class: {
-        'target-container': true,
-        'gux-error': this.hasError
-      }, slot: "target" }, this.renderCountryButton(), this.renderInput()));
-  }
-  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.alpha2Code }, index.h("span", { class: "gux-option-content" }, index.h("gux-flag-icon-beta", { flag: 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, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
-  }
-  get root() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["updateValue"],
-    "expanded": ["focusSelectedItemAfterRender"],
-    "phoneNumberFormat": ["setDisplayFormat"]
-  }; }
+    }
+    parseDisplayFormat(format) {
+        let output;
+        switch (format.toUpperCase()) {
+            case 'INTERNATIONAL':
+                output = libphonenumber$1.exports.PhoneNumberFormat.INTERNATIONAL;
+                break;
+            case 'E164':
+                output = libphonenumber$1.exports.PhoneNumberFormat.E164;
+                break;
+            case 'NATIONAL':
+            default:
+                output = libphonenumber$1.exports.PhoneNumberFormat.NATIONAL;
+                break;
+        }
+        return output;
+    }
+    /** 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;
+        }
+    }
+    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;
+            }
+        }
+    }
+    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)) {
+            event.stopImmediatePropagation();
+        }
+    }
+    fieldButtonClick() {
+        this.expanded = !this.expanded;
+    }
+    collapseListbox(focusChange) {
+        if (this.expanded) {
+            this.expanded = false;
+        }
+        if (focusChange === 'focusFieldButton') {
+            this.fieldButtonElement.focus();
+        }
+    }
+    setInput() {
+        this.inputElement = this.root.shadowRoot.querySelector('input[type="tel"]');
+        preventBrowserValidationStyling.preventBrowserValidationStyling(this.inputElement);
+        this.inputElement.addEventListener('input', () => {
+            this.onInputChange(this.inputElement.value);
+        });
+        this.inputElement.addEventListener('focusin', (event) => {
+            event.stopPropagation();
+            this.collapseListbox('noFocusChange');
+        });
+    }
+    setListBox() {
+        this.listboxElement.addEventListener('input', (event) => {
+            const regionCode = event.target
+                .value;
+            this.guxregionselect.emit(regionCode);
+            this._setRegionAlpha2Code(regionCode);
+            this.collapseListbox('focusFieldButton');
+        });
+        this.listboxElement.addEventListener('focusout', (event) => {
+            event.stopPropagation();
+        });
+        this.listboxElement.addEventListener('keydown', (event) => {
+            event.stopPropagation();
+            if (event.key === 'Tab') {
+                /* calling setTimeout is a workaround as calling focus without it does not work */
+                if (event.shiftKey) {
+                    setTimeout(() => this.fieldButtonElement.focus(), 0);
+                }
+                else {
+                    setTimeout(() => this.inputElement.focus(), 0);
+                }
+            }
+            else if (event.key === 'Escape') {
+                this.collapseListbox('noFocusChange');
+            }
+        });
+    }
+    renderExpandIcon() {
+        if (!this.disabled)
+            return (index.h("gux-icon", { class: "gux-expand-icon", iconName: "chevron-small-down", decorative: true }));
+    }
+    renderCountryButton() {
+        return (index.h("div", { class: "gux-region-select" }, index.h("button", { type: "button", class: {
+                'gux-field gux-field-button': true,
+                'gux-expanded': this.expanded,
+                'gux-disabled': this.disabled
+            }, 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()), this.renderExpandIcon())));
+    }
+    renderButtonDisplay() {
+        var _a, _b;
+        return (index.h("div", { class: "gux-selected-option" }, this.region ? (index.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) })) : (index.h("gux-icon", { "icon-name": "globe", "screenreader-text": this.i18n('unknownRegion') }))));
+    }
+    renderInput() {
+        var _a;
+        return (index.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 (index.h("div", { class: {
+                'target-container': true,
+                'gux-error': this.hasError
+            }, slot: "target" }, this.renderCountryButton(), this.renderInput()));
+    }
+    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.alpha2Code }, index.h("span", { class: "gux-option-content" }, index.h("gux-flag-icon-beta", { flag: 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", { key: '4ed7c9503078e26440b73fccdef2672b2b32033b', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+    }
+    get root() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["updateValue"],
+        "expanded": ["focusSelectedItemAfterRender"],
+        "phoneNumberFormat": ["setDisplayFormat"]
+    }; }
 };
 __decorate([
-  onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
 ], GuxPhoneInput.prototype, "onClickOutside", null);
-GuxPhoneInput.style = guxPhoneInputCss;
+GuxPhoneInput.style = GuxPhoneInputBetaStyle0;
 
 exports.gux_phone_input_beta = GuxPhoneInput;