sas-ui 0.8.281 → 0.8.283

package/dist/cjs/sas-form-input-template_4.cjs.entry.js

@@ -0,0 +1,2286 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cd75521b.js');
+const global = require('./global-fcd219ac.js');
+const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
+
+const sasFormInputTemplateCss = ":host{display:block;position:relative;height:100%}:host .hide{display:none}:host .container{overflow-y:auto;position:absolute;min-width:var(--form-input-template-container-min-width, 100%);max-width:var(--form-input-template-container-max-width, none);background-color:white;height:0;z-index:-15;pointer-events:none}:host .top{transform:translateY(-100%);top:0}:host .right{right:0}:host(:focus){outline:none}:host(:focus-within)>.container{padding:10px 0;height:auto;overflow:visible;z-index:15;pointer-events:initial;box-shadow:0px 5px 10px #0000001A;border:1px solid #D0D9DE;border-radius:5px}:host(:not([label=\"\"])) .top{transform:translateY(-100%);top:0}:host(:not([label=\"\"])[outside]:not([outside=false])) .top{transform:translateY(calc(-100% + 30px));top:0}:host:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}";
+
+let SasFormInputTemplate = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inputContainerClick = index.createEvent(this, "inputContainerClick", 7);
+    this.containerVerticalPosition = null;
+    this.containerHorizontalPosition = null;
+    /**
+     * Label
+     */
+    this.label = '';
+    /**
+     * Shows an icon next to the label - mainly for help icons
+     */
+    this.iconLabel = '';
+    /**
+     * Label position
+     */
+    this.outside = false;
+    /**
+     * Shows a star symbol behind label
+     */
+    this.required = false;
+    /**
+     * Placeholder
+     */
+    this.placeholder = '';
+    /**
+     * Placeholder
+     */
+    this.type = '';
+    /**
+     * Value
+     */
+    this.value = '';
+    /**
+     * Max value, only works with type number, range and date
+     */
+    this.max = null;
+    /**
+     * Min value, only works with type number, range and date
+     */
+    this.min = null;
+    /**
+     * Icon Right
+     */
+    this.iconRight = '';
+    /**
+     * Readonly
+     */
+    this.readonly = false;
+    /**
+     * Error
+     */
+    this.error = false;
+    /**
+     * Disabled
+     */
+    this.disabled = false;
+    /**
+     * Clear
+     */
+    this.clear = false;
+    /**
+     * Container vertical position
+     */
+    this.position = null;
+    /**
+     * Container horizontal position
+     */
+    this.positionH = null;
+    /**
+     * Show or hide content under input
+     */
+    this.show = false;
+    /**
+     * Close menu or not after click menu item
+     */
+    this.clickClose = false;
+    /**
+     * Minimum amount of space required above component, before rendering container above component
+     */
+    this.minimumPixelsAboveComponentRequired = 0;
+    /**
+     * Minimum amount of space required to the right of the component, before rendering container to the right of the component
+     */
+    this.minimumPixelsRightOfComponentRequired = 0;
+    this.handleInputClick = (event) => {
+      event.stopPropagation();
+      if (!this.disabled) {
+        const container = this.el.shadowRoot.querySelector('.container');
+        const height = container.getBoundingClientRect().height;
+        if (height > 0) {
+          this.show = false;
+        }
+        else {
+          this.show = true;
+        }
+        this.inputContainerClick.emit();
+      }
+    };
+    this.handleContainerClick = (event) => {
+      event.stopPropagation();
+      if (this.clickClose) {
+        setTimeout(() => {
+          this.show = false;
+        }, 100);
+      }
+    };
+    this.updateContainerPosition = () => {
+      this.updateVerticalContainerPosition();
+      this.updateContainerHorizontalPosition();
+    };
+    this.updateVerticalContainerPosition = () => {
+      if (Boolean(this.position)) {
+        this.containerVerticalPosition = this.position;
+      }
+      else {
+        const top = this.el.getBoundingClientRect().top;
+        const clientHeight = document.documentElement.clientHeight;
+        if (clientHeight < top * 2 && top > this.minimumPixelsAboveComponentRequired) {
+          this.containerVerticalPosition = 'top';
+        }
+        else {
+          this.containerVerticalPosition = 'bottom';
+        }
+      }
+    };
+    this.updateContainerHorizontalPosition = () => {
+      if (Boolean(this.positionH)) {
+        this.containerHorizontalPosition = this.positionH;
+      }
+      else {
+        const left = this.el.getBoundingClientRect().left;
+        const clientWidth = document.documentElement.clientWidth;
+        if (clientWidth - this.minimumPixelsRightOfComponentRequired > left) {
+          this.containerHorizontalPosition = 'left';
+        }
+        else {
+          this.containerHorizontalPosition = 'right';
+        }
+      }
+    };
+  }
+  showHandler(newValue) {
+    if (newValue) {
+      this.updateContainerPosition();
+      this.showContainer();
+    }
+    else {
+      this.hideContainer();
+    }
+  }
+  listItemClickEventUsedInternalHandler() {
+    // keep focus so dropdown list will not hide if there are dropdown components inside dropdown list
+    this.el.focus();
+  }
+  showContainer() {
+    const element = this.el.shadowRoot.querySelector('.container');
+    element.classList.remove('hide');
+  }
+  hideContainer() {
+    const element = this.el.shadowRoot.querySelector('.container');
+    element.classList.add('hide');
+  }
+  render() {
+    return (index.h(index.Host, { onFocus: this.updateContainerPosition, tabindex: 0, "data-message": "" }, index.h("sas-input", { label: this.label, outside: this.outside, required: this.required, type: this.type, placeholder: this.placeholder, "icon-right": this.iconRight, value: this.value, min: this.min, max: this.max, readonly: this.readonly, disabled: this.disabled, clear: this.clear, onKeyDown: global.keydownEvent, tabindex: 0, iconLabel: this.iconLabel,
+      // mouseDown event is faster than focus event, click event is slower than focus event
+      onMouseDown: this.handleInputClick }, index.h("slot", { name: "input" })), index.h("div", { class: `container hide ${this.containerVerticalPosition} ${this.containerHorizontalPosition}`, onMouseDown: this.handleContainerClick }, index.h("slot", { name: "container" }))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "show": ["showHandler"]
+  }; }
+};
+SasFormInputTemplate.style = sasFormInputTemplateCss;
+
+const sasInputCss = ":host{display:flex}:host .input-container{position:relative;height:var(--input-height, 40px);width:100%;max-width:100%;background-color:var(--input-background-color, white);border:var(--input-border, 1px solid var(--s-300));border-radius:5px;box-sizing:border-box;display:flex;gap:5px;padding:var(--input-padding, 0)}:host .input-container:focus-within{border:var(--input-border, 1px solid var(--s-400));outline:none;box-shadow:var(--input-focus-box-shadow, 0px 0px 5px #0000001A)}:host .input-container:after{content:attr(data-message);position:absolute;top:calc(100% + 5px);right:10px;color:var(--li-2);font-size:12px;text-align:right}:host .outside-label{color:var(--secondary);font-size:14px;position:absolute;left:0;bottom:100%;transform:translateY(-10px)}:host .inside-label{color:var(--s-400);left:10px;position:absolute;z-index:1;font-size:12px;transform:translateY(-65%);background-color:white;padding:0 2px}:host .required-symbol{margin-left:5px;color:var(--primary)}:host .input{border:none;color:var(--input-color, var(--s-500));background-color:var(--input-background-color, white);height:100%;min-width:0;font-family:roboto, \"Font Awesome 6 Pro\";font-size:14px;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;margin:0 10px;box-sizing:border-box}:host .input:focus{outline:none}:host .input:required{box-shadow:none}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}:host input[type=date],:host input[type=time]{-webkit-appearance:none}:host input[type=date]::-webkit-calendar-picker-indicator{display:none}:host input[type=time]::-webkit-calendar-picker-indicator{display:none}:host .input-date-container{position:relative;flex-grow:1;display:flex}:host .input-date-cover{position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}:host input[readonly]:not([readonly=false]){cursor:initial}:host .iconLabel{padding-left:5px;cursor:pointer}:host .right-icon-container{display:flex;align-items:center}:host .clear-icon{--icon-color:white;--icon-background-color:var(--s-300);--icon-background-width:14px;--icon-background-height:14px;--icon-size:9px;box-shadow:none;margin-right:10px}:host .input-right-icon{--icon-color:var(--input-right-icon-color, var(--s-500));--icon-size:var(--input-right-icon-size, 14px);--icon-background-height:38px;margin-right:10px;padding:var(--input-right-icon-padding, 0)}:host .input-error{border:1px solid var(--li-2)}:host(:focus){outline:none}:host([type=textarea]) .input-container{height:var(--input-height, auto)}:host([type=textarea]) .right-icon-container{align-items:flex-start}:host([type=textarea]) .clear-icon{margin-top:10px;margin-right:10px}:host(:not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 5px)}:host([outside]:not([outside=false]):not([label=\"\"])) .input-container{margin-top:var(--input-margin-top, 30px)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed}:host([disabled]:not([disabled=false])) label{cursor:default}:host([disabled]:not([disabled=false])) .input-container:before{content:\"\";background-color:var(--s-200);left:0;right:0;top:0;bottom:0;position:absolute;border-radius:5px;opacity:0.3;z-index:10}:host-context([error]:not([error=false])) .input-container,:host([error]:not([error=false])) .input-container{border-color:var(--li-2)}";
+
+let SasInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inputUpdate = index.createEvent(this, "inputUpdate", 7);
+    this.inputupdate = index.createEvent(this, "inputupdate", 7);
+    this.labeliconclicked = index.createEvent(this, "labeliconclicked", 7);
+    this.inputiconrightclicked = index.createEvent(this, "inputiconrightclicked", 7);
+    this.inputClear = index.createEvent(this, "inputClear", 7);
+    this.inputFocus = index.createEvent(this, "inputFocus", 7);
+    this.inputBlur = index.createEvent(this, "inputBlur", 7);
+    this.isUpdateFromSubcomponent = false;
+    /**
+     * Type
+     */
+    this.type = 'text';
+    /**
+     * Type
+     */
+    this.step = '1';
+    /**
+     * Placeholder
+     */
+    this.placeholder = '';
+    /**
+     * name
+     */
+    this.name = '';
+    /**
+     * Value
+     */
+    this.value = '';
+    /**
+     * Label
+     */
+    this.label = '';
+    /**
+     * Label position
+     */
+    this.outside = false;
+    /**
+     * Shows a star symbol behind label
+     */
+    this.required = false;
+    /**
+     * Maximum number of characters allowed
+     */
+    this.maxlength = 1000;
+    /**
+     * Minimum number of characters allowed
+     */
+    this.minlength = 0;
+    /**
+     * Max value, only works with type number, range and date
+     */
+    this.max = null;
+    /**
+     * Min value, only works with type number, range and date
+     */
+    this.min = null;
+    /**
+     * Shows an icon next to the label - mainly for help icons
+     */
+    this.iconLabel = '';
+    /**
+     * Shows an icon on left
+     */
+    this.iconLeft = '';
+    /**
+     * Shows an icon on right, will be overrided if type is password
+     */
+    this.iconRight = '';
+    /**
+     * Show a clear icon to clear input
+     */
+    this.clear = false;
+    /**
+     * Readonly
+     */
+    this.readonly = false;
+    /**
+     * Disabled
+     */
+    this.disabled = false;
+    /**
+     * Changes to false automatically when value updates
+     */
+    this.error = false;
+    /**
+     * Only shows when prop error is true, auto generated
+     */
+    this.message = '';
+    // type tel props
+    /**
+     * Country
+     */
+    this.country = 'au';
+    /**
+     * Placeholder Number Type
+     */
+    this.placeholderNumberType = 'MOBILE';
+    /**
+     * phone number validity
+     */
+    this.isValidNumber = true;
+    this.handleInput = (event) => {
+      this.value = event.target.value;
+      this.inputUpdate.emit(event.target.value);
+      this.inputupdate.emit(event.target.value);
+    };
+    this.focusEvent = () => {
+      this.inputFocus.emit();
+    };
+    this.blurEvent = () => {
+      this.inputBlur.emit();
+    };
+    this.clickEvent = (event) => {
+      if (this.type === 'date' || this.type === "time") {
+        event.preventDefault();
+      }
+    };
+    this.togglePassword = (event) => {
+      const icon = event.target.icon;
+      const input = this.el.shadowRoot.querySelector('input');
+      if (icon === 'fas fa-eye-slash') {
+        event.target.icon = 'fas fa-eye';
+        input.type = 'text';
+      }
+      else {
+        event.target.icon = 'fas fa-eye-slash';
+        input.type = 'password';
+      }
+    };
+    this.iconRightClickHandler = () => {
+      this.inputiconrightclicked.emit();
+    };
+    this.labelIconClickHandler = () => {
+      this.labeliconclicked.emit();
+    };
+    this.clearInput = (event) => {
+      event.stopPropagation();
+      // force date field and time field to clear incomplete input
+      // as when input not complete, value not update
+      // clear value will not trigger re-render
+      if (this.type === 'date' || this.type === 'time') {
+        const inputElement = this.el.shadowRoot.querySelector('input');
+        inputElement.value = '';
+      }
+      this.value = '';
+      this.update();
+      this.inputClear.emit();
+    };
+  }
+  watchCountryHandler() {
+    if (this.type === 'tel') {
+      const inputTel = this.el.shadowRoot.querySelector('sas-input-tel');
+      inputTel.setCountry(this.country);
+    }
+  }
+  async watchValueHandler() {
+    if (this.isUpdateFromSubcomponent) {
+      this.isUpdateFromSubcomponent = false;
+    }
+    else {
+      if (this.type === 'tel') {
+        const inputTel = this.el.shadowRoot.querySelector('sas-input-tel');
+        inputTel.update(this.value);
+      }
+      else {
+        this.value = global.HTMLDecodeString(this.value);
+      }
+    }
+    this.resetErrorStatus();
+  }
+  watchPlaceholderNumberTypeHandler() {
+    if (this.type === 'tel') {
+      const inputTel = this.el.shadowRoot.querySelector('sas-input-tel');
+      inputTel.setPlaceholder(this.placeholderNumberType);
+    }
+  }
+  async componentWillLoad() {
+    this.value = global.HTMLDecodeString(this.value);
+    this.resetErrorStatus();
+  }
+  inputTelUpdateHandler(event) {
+    if (this.country !== event.detail.country) {
+      this.country = event.detail.country;
+    }
+    if (this.isValidNumber !== event.detail.isValidNumber) {
+      this.isValidNumber = event.detail.isValidNumber;
+    }
+    if (this.value !== event.detail.value) {
+      this.isUpdateFromSubcomponent = true;
+      this.value = event.detail.value;
+      this.inputUpdate.emit(event.detail.value);
+      this.inputupdate.emit(event.detail.value);
+    }
+  }
+  inputTextareaUpdateHandler(event) {
+    this.value = event.detail;
+    this.inputUpdate.emit(event.detail);
+    this.inputupdate.emit(event.detail);
+  }
+  /**
+   * Trigger inputupdate event programmatically
+   */
+  async update() {
+    const value = this.value;
+    this.inputUpdate.emit(value);
+    this.inputupdate.emit(value);
+  }
+  /**
+   * Validate
+   */
+  async validate(customErrorMessage = '') {
+    const input = document.createElement('input');
+    if (this.type !== 'textarea') {
+      input.type = this.type;
+    }
+    input.required = this.required;
+    input.maxLength = this.maxlength;
+    input.minLength = this.minlength;
+    input.max = this.max;
+    input.min = this.min;
+    input.value = Boolean(this.value) ? this.value.trim() : '';
+    let isCustomError = false;
+    if (customErrorMessage !== '') {
+      isCustomError = true;
+    }
+    // check tooShort mannually
+    // as tooShort not trigger by using js to set value
+    let validity = {
+      badInput: input.validity.badInput,
+      customError: isCustomError,
+      patternMismatch: input.validity.patternMismatch,
+      rangeOverflow: input.validity.rangeOverflow,
+      rangeUnderflow: input.validity.rangeUnderflow,
+      stepMismatch: input.validity.stepMismatch,
+      tooLong: input.validity.tooLong,
+      tooShort: input.validity.tooShort,
+      typeMismatch: input.validity.typeMismatch,
+      valid: input.validity.valid && !isCustomError,
+      valueMissing: input.validity.valueMissing,
+    };
+    if (Boolean(this.value)) {
+      const length = this.value.length;
+      if (length < this.minlength) {
+        validity.tooShort = true;
+        validity.valid = false;
+      }
+    }
+    if (this.type === 'tel') {
+      if (!this.isValidNumber) {
+        validity.typeMismatch = true;
+        validity.valid = false;
+      }
+    }
+    this.validity = validity;
+  }
+  /**
+   * Show error status if value is not valid (only for components internal use)
+   */
+  async updateErrorStatus(errorMessage = '') {
+    await this.validate(errorMessage);
+    this.error = !this.validity.valid;
+    if (this.error) {
+      this.message = this.getErrorMessage();
+    }
+  }
+  /**
+   * Clear error status (only for components internal use)
+   */
+  async resetErrorStatus() {
+    this.error = false;
+    this.message = '';
+  }
+  /**
+   * Set custom error message and validate
+   */
+  async setCustomValidity(errorMessage = 'custom validation error message') {
+    this.message = errorMessage;
+    await this.updateErrorStatus(errorMessage);
+  }
+  getErrorMessage() {
+    const validity = this.validity;
+    if (validity.valueMissing) {
+      const prefix = Boolean(this.label) ? this.label : 'Field';
+      return `${prefix} is required`;
+    }
+    if (validity.typeMismatch || validity.badInput) {
+      return `Invalid ${this.type} format`;
+    }
+    if (validity.rangeOverflow) {
+      if (this.type === 'date' && this.value[0] !== '0') {
+        this.inputUpdate.emit('reset request');
+        this.inputupdate.emit('reset request');
+      }
+      return `${this.label} must be less or equal to ${this.max}`;
+    }
+    if (validity.rangeUnderflow) {
+      if (this.type === 'date' && this.value[0] !== '0') {
+        this.inputUpdate.emit('reset request');
+        this.inputupdate.emit('reset request');
+      }
+      return `${this.label} must be larger or equal to ${this.min}`;
+    }
+    if (validity.tooShort) {
+      return `${this.label}'s length must be larger or equal to ${this.minlength} characters`;
+    }
+    return this.message;
+  }
+  getLeftIcon() {
+    if (Boolean(this.iconLeft)) {
+      const icon = this.iconLeft.slice(7);
+      if (icon === 'search') {
+        return "\uf002" + ' ';
+      }
+    }
+    return '';
+  }
+  generateRightIcon() {
+    let rightIcon = null;
+    if (this.type === 'password') {
+      rightIcon = index.h("sas-icon", { class: "input-right-icon", icon: "fas fa-eye-slash", onClick: this.togglePassword });
+    }
+    else {
+      if (Boolean(this.iconRight)) {
+        rightIcon = index.h("sas-icon", { class: "input-right-icon", icon: this.iconRight, onClick: this.iconRightClickHandler });
+      }
+    }
+    return rightIcon;
+  }
+  render() {
+    return (index.h(index.Host
+    // onBlur = {() => this.updateErrorStatus()}
+    , null, index.h("div", { class: "input-container", "data-message": this.message }, Boolean(this.label)
+      ? index.h("label", { class: this.outside ? 'outside-label' : 'inside-label' }, this.label, this.required
+        ? index.h("span", { class: "required-symbol" }, "*")
+        : null, index.h("sas-icon", { class: "iconLabel", icon: this.iconLabel, onClick: this.labelIconClickHandler }))
+      : null, this.type === 'tel'
+      ? index.h("sas-input-tel", { "data-country": this.country, "data-value": this.value, "data-placeholder": this.placeholder, "data-placeholderNumberType": this.placeholderNumberType })
+      : null, this.type === 'textarea'
+      ? index.h("sas-input-textarea", { placeholder: this.getLeftIcon() + this.placeholder, maxlength: this.maxlength, minlength: this.minlength, value: this.value })
+      : null, this.type === 'date'
+      ? index.h("div", { class: "input-date-container" }, index.h("input", { class: "input", type: "date", placeholder: this.getLeftIcon() + this.placeholder, readonly: this.readonly, required: true, maxlength: this.maxlength, minlength: this.minlength, max: this.max, min: this.min, value: this.value, onFocus: this.focusEvent, onInput: this.handleInput, onBlur: this.blurEvent, onClick: this.clickEvent }), localStorage.getItem('platform') === 'ios' // prevent user interact with input field to trigger native date picker
+        ? index.h("div", { class: "input-date-cover" })
+        : null)
+      : null, this.type !== 'tel' && this.type !== 'textarea' && this.type !== 'date'
+      ? index.h("input", { class: "input", type: this.type, placeholder: this.getLeftIcon() + this.placeholder, readonly: this.readonly, required: this.required || this.type === 'date', maxlength: this.maxlength, minlength: this.minlength, max: this.max, min: this.min, step: this.step, value: this.value, onFocus: this.focusEvent, onInput: this.handleInput, onBlur: this.blurEvent, onClick: this.clickEvent })
+      : null, index.h("slot", null), index.h("div", { class: "right-icon-container" }, this.clear
+      ? index.h("sas-icon", { class: "clear-icon", type: "round", icon: "fas fa-times", onMouseDown: this.clearInput })
+      : null, this.generateRightIcon()))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "country": ["watchCountryHandler"],
+    "value": ["watchValueHandler"],
+    "placeholderNumberType": ["watchPlaceholderNumberTypeHandler"]
+  }; }
+};
+SasInput.style = sasInputCss;
+
+var intlTelInput$1 = _commonjsHelpers.createCommonjsModule(function (module) {
+/*
+ * International Telephone Input v18.2.1
+ * https://github.com/jackocnr/intl-tel-input.git
+ * Licensed under the MIT license
+ */
+
+// wrap in UMD
+(function(factory) {
+    if (module.exports) module.exports = factory(); else window.intlTelInput = factory();
+})(function(undefined$1) {
+    return function() {
+        // Array of country objects for the flag dropdown.
+        // Here is the criteria for the plugin to support a given country/territory
+        // - It has an iso2 code: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
+        // - It has it's own country calling code (it is not a sub-region of another country): https://en.wikipedia.org/wiki/List_of_country_calling_codes
+        // - It has a flag in the region-flags project: https://github.com/behdad/region-flags/tree/gh-pages/png
+        // - It is supported by libphonenumber (it must be listed on this page): https://github.com/googlei18n/libphonenumber/blob/master/resources/ShortNumberMetadata.xml
+        // Each country array has the following information:
+        // [
+        //    Country name,
+        //    iso2 code,
+        //    International dial code,
+        //    Order (if >1 country with same dial code),
+        //    Area codes
+        // ]
+        var allCountries = [ [ "Afghanistan (‫افغانستان‬‎)", "af", "93" ], [ "Albania (Shqipëri)", "al", "355" ], [ "Algeria (‫الجزائر‬‎)", "dz", "213" ], [ "American Samoa", "as", "1", 5, [ "684" ] ], [ "Andorra", "ad", "376" ], [ "Angola", "ao", "244" ], [ "Anguilla", "ai", "1", 6, [ "264" ] ], [ "Antigua and Barbuda", "ag", "1", 7, [ "268" ] ], [ "Argentina", "ar", "54" ], [ "Armenia (Հայաստան)", "am", "374" ], [ "Aruba", "aw", "297" ], [ "Ascension Island", "ac", "247" ], [ "Australia", "au", "61", 0 ], [ "Austria (Österreich)", "at", "43" ], [ "Azerbaijan (Azərbaycan)", "az", "994" ], [ "Bahamas", "bs", "1", 8, [ "242" ] ], [ "Bahrain (‫البحرين‬‎)", "bh", "973" ], [ "Bangladesh (বাংলাদেশ)", "bd", "880" ], [ "Barbados", "bb", "1", 9, [ "246" ] ], [ "Belarus (Беларусь)", "by", "375" ], [ "Belgium (België)", "be", "32" ], [ "Belize", "bz", "501" ], [ "Benin (Bénin)", "bj", "229" ], [ "Bermuda", "bm", "1", 10, [ "441" ] ], [ "Bhutan (འབྲུག)", "bt", "975" ], [ "Bolivia", "bo", "591" ], [ "Bosnia and Herzegovina (Босна и Херцеговина)", "ba", "387" ], [ "Botswana", "bw", "267" ], [ "Brazil (Brasil)", "br", "55" ], [ "British Indian Ocean Territory", "io", "246" ], [ "British Virgin Islands", "vg", "1", 11, [ "284" ] ], [ "Brunei", "bn", "673" ], [ "Bulgaria (България)", "bg", "359" ], [ "Burkina Faso", "bf", "226" ], [ "Burundi (Uburundi)", "bi", "257" ], [ "Cambodia (កម្ពុជា)", "kh", "855" ], [ "Cameroon (Cameroun)", "cm", "237" ], [ "Canada", "ca", "1", 1, [ "204", "226", "236", "249", "250", "263", "289", "306", "343", "354", "365", "367", "368", "382", "387", "403", "416", "418", "428", "431", "437", "438", "450", "584", "468", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "683", "705", "709", "742", "753", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905" ] ], [ "Cape Verde (Kabu Verdi)", "cv", "238" ], [ "Caribbean Netherlands", "bq", "599", 1, [ "3", "4", "7" ] ], [ "Cayman Islands", "ky", "1", 12, [ "345" ] ], [ "Central African Republic (République centrafricaine)", "cf", "236" ], [ "Chad (Tchad)", "td", "235" ], [ "Chile", "cl", "56" ], [ "China (中国)", "cn", "86" ], [ "Christmas Island", "cx", "61", 2, [ "89164" ] ], [ "Cocos (Keeling) Islands", "cc", "61", 1, [ "89162" ] ], [ "Colombia", "co", "57" ], [ "Comoros (‫جزر القمر‬‎)", "km", "269" ], [ "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", "cd", "243" ], [ "Congo (Republic) (Congo-Brazzaville)", "cg", "242" ], [ "Cook Islands", "ck", "682" ], [ "Costa Rica", "cr", "506" ], [ "Côte d’Ivoire", "ci", "225" ], [ "Croatia (Hrvatska)", "hr", "385" ], [ "Cuba", "cu", "53" ], [ "Curaçao", "cw", "599", 0 ], [ "Cyprus (Κύπρος)", "cy", "357" ], [ "Czech Republic (Česká republika)", "cz", "420" ], [ "Denmark (Danmark)", "dk", "45" ], [ "Djibouti", "dj", "253" ], [ "Dominica", "dm", "1", 13, [ "767" ] ], [ "Dominican Republic (República Dominicana)", "do", "1", 2, [ "809", "829", "849" ] ], [ "Ecuador", "ec", "593" ], [ "Egypt (‫مصر‬‎)", "eg", "20" ], [ "El Salvador", "sv", "503" ], [ "Equatorial Guinea (Guinea Ecuatorial)", "gq", "240" ], [ "Eritrea", "er", "291" ], [ "Estonia (Eesti)", "ee", "372" ], [ "Eswatini", "sz", "268" ], [ "Ethiopia", "et", "251" ], [ "Falkland Islands (Islas Malvinas)", "fk", "500" ], [ "Faroe Islands (Føroyar)", "fo", "298" ], [ "Fiji", "fj", "679" ], [ "Finland (Suomi)", "fi", "358", 0 ], [ "France", "fr", "33" ], [ "French Guiana (Guyane française)", "gf", "594" ], [ "French Polynesia (Polynésie française)", "pf", "689" ], [ "Gabon", "ga", "241" ], [ "Gambia", "gm", "220" ], [ "Georgia (საქართველო)", "ge", "995" ], [ "Germany (Deutschland)", "de", "49" ], [ "Ghana (Gaana)", "gh", "233" ], [ "Gibraltar", "gi", "350" ], [ "Greece (Ελλάδα)", "gr", "30" ], [ "Greenland (Kalaallit Nunaat)", "gl", "299" ], [ "Grenada", "gd", "1", 14, [ "473" ] ], [ "Guadeloupe", "gp", "590", 0 ], [ "Guam", "gu", "1", 15, [ "671" ] ], [ "Guatemala", "gt", "502" ], [ "Guernsey", "gg", "44", 1, [ "1481", "7781", "7839", "7911" ] ], [ "Guinea (Guinée)", "gn", "224" ], [ "Guinea-Bissau (Guiné Bissau)", "gw", "245" ], [ "Guyana", "gy", "592" ], [ "Haiti", "ht", "509" ], [ "Honduras", "hn", "504" ], [ "Hong Kong (香港)", "hk", "852" ], [ "Hungary (Magyarország)", "hu", "36" ], [ "Iceland (Ísland)", "is", "354" ], [ "India (भारत)", "in", "91" ], [ "Indonesia", "id", "62" ], [ "Iran (‫ایران‬‎)", "ir", "98" ], [ "Iraq (‫العراق‬‎)", "iq", "964" ], [ "Ireland", "ie", "353" ], [ "Isle of Man", "im", "44", 2, [ "1624", "74576", "7524", "7924", "7624" ] ], [ "Israel (‫ישראל‬‎)", "il", "972" ], [ "Italy (Italia)", "it", "39", 0 ], [ "Jamaica", "jm", "1", 4, [ "876", "658" ] ], [ "Japan (日本)", "jp", "81" ], [ "Jersey", "je", "44", 3, [ "1534", "7509", "7700", "7797", "7829", "7937" ] ], [ "Jordan (‫الأردن‬‎)", "jo", "962" ], [ "Kazakhstan (Казахстан)", "kz", "7", 1, [ "33", "7" ] ], [ "Kenya", "ke", "254" ], [ "Kiribati", "ki", "686" ], [ "Kosovo", "xk", "383" ], [ "Kuwait (‫الكويت‬‎)", "kw", "965" ], [ "Kyrgyzstan (Кыргызстан)", "kg", "996" ], [ "Laos (ລາວ)", "la", "856" ], [ "Latvia (Latvija)", "lv", "371" ], [ "Lebanon (‫لبنان‬‎)", "lb", "961" ], [ "Lesotho", "ls", "266" ], [ "Liberia", "lr", "231" ], [ "Libya (‫ليبيا‬‎)", "ly", "218" ], [ "Liechtenstein", "li", "423" ], [ "Lithuania (Lietuva)", "lt", "370" ], [ "Luxembourg", "lu", "352" ], [ "Macau (澳門)", "mo", "853" ], [ "Madagascar (Madagasikara)", "mg", "261" ], [ "Malawi", "mw", "265" ], [ "Malaysia", "my", "60" ], [ "Maldives", "mv", "960" ], [ "Mali", "ml", "223" ], [ "Malta", "mt", "356" ], [ "Marshall Islands", "mh", "692" ], [ "Martinique", "mq", "596" ], [ "Mauritania (‫موريتانيا‬‎)", "mr", "222" ], [ "Mauritius (Moris)", "mu", "230" ], [ "Mayotte", "yt", "262", 1, [ "269", "639" ] ], [ "Mexico (México)", "mx", "52" ], [ "Micronesia", "fm", "691" ], [ "Moldova (Republica Moldova)", "md", "373" ], [ "Monaco", "mc", "377" ], [ "Mongolia (Монгол)", "mn", "976" ], [ "Montenegro (Crna Gora)", "me", "382" ], [ "Montserrat", "ms", "1", 16, [ "664" ] ], [ "Morocco (‫المغرب‬‎)", "ma", "212", 0 ], [ "Mozambique (Moçambique)", "mz", "258" ], [ "Myanmar (Burma) (မြန်မာ)", "mm", "95" ], [ "Namibia (Namibië)", "na", "264" ], [ "Nauru", "nr", "674" ], [ "Nepal (नेपाल)", "np", "977" ], [ "Netherlands (Nederland)", "nl", "31" ], [ "New Caledonia (Nouvelle-Calédonie)", "nc", "687" ], [ "New Zealand", "nz", "64" ], [ "Nicaragua", "ni", "505" ], [ "Niger (Nijar)", "ne", "227" ], [ "Nigeria", "ng", "234" ], [ "Niue", "nu", "683" ], [ "Norfolk Island", "nf", "672" ], [ "North Korea (조선 민주주의 인민 공화국)", "kp", "850" ], [ "North Macedonia (Северна Македонија)", "mk", "389" ], [ "Northern Mariana Islands", "mp", "1", 17, [ "670" ] ], [ "Norway (Norge)", "no", "47", 0 ], [ "Oman (‫عُمان‬‎)", "om", "968" ], [ "Pakistan (‫پاکستان‬‎)", "pk", "92" ], [ "Palau", "pw", "680" ], [ "Palestine (‫فلسطين‬‎)", "ps", "970" ], [ "Panama (Panamá)", "pa", "507" ], [ "Papua New Guinea", "pg", "675" ], [ "Paraguay", "py", "595" ], [ "Peru (Perú)", "pe", "51" ], [ "Philippines", "ph", "63" ], [ "Poland (Polska)", "pl", "48" ], [ "Portugal", "pt", "351" ], [ "Puerto Rico", "pr", "1", 3, [ "787", "939" ] ], [ "Qatar (‫قطر‬‎)", "qa", "974" ], [ "Réunion (La Réunion)", "re", "262", 0 ], [ "Romania (România)", "ro", "40" ], [ "Russia (Россия)", "ru", "7", 0 ], [ "Rwanda", "rw", "250" ], [ "Saint Barthélemy", "bl", "590", 1 ], [ "Saint Helena", "sh", "290" ], [ "Saint Kitts and Nevis", "kn", "1", 18, [ "869" ] ], [ "Saint Lucia", "lc", "1", 19, [ "758" ] ], [ "Saint Martin (Saint-Martin (partie française))", "mf", "590", 2 ], [ "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", "pm", "508" ], [ "Saint Vincent and the Grenadines", "vc", "1", 20, [ "784" ] ], [ "Samoa", "ws", "685" ], [ "San Marino", "sm", "378" ], [ "São Tomé and Príncipe (São Tomé e Príncipe)", "st", "239" ], [ "Saudi Arabia (‫المملكة العربية السعودية‬‎)", "sa", "966" ], [ "Senegal (Sénégal)", "sn", "221" ], [ "Serbia (Србија)", "rs", "381" ], [ "Seychelles", "sc", "248" ], [ "Sierra Leone", "sl", "232" ], [ "Singapore", "sg", "65" ], [ "Sint Maarten", "sx", "1", 21, [ "721" ] ], [ "Slovakia (Slovensko)", "sk", "421" ], [ "Slovenia (Slovenija)", "si", "386" ], [ "Solomon Islands", "sb", "677" ], [ "Somalia (Soomaaliya)", "so", "252" ], [ "South Africa", "za", "27" ], [ "South Korea (대한민국)", "kr", "82" ], [ "South Sudan (‫جنوب السودان‬‎)", "ss", "211" ], [ "Spain (España)", "es", "34" ], [ "Sri Lanka (ශ්‍රී ලංකාව)", "lk", "94" ], [ "Sudan (‫السودان‬‎)", "sd", "249" ], [ "Suriname", "sr", "597" ], [ "Svalbard and Jan Mayen", "sj", "47", 1, [ "79" ] ], [ "Sweden (Sverige)", "se", "46" ], [ "Switzerland (Schweiz)", "ch", "41" ], [ "Syria (‫سوريا‬‎)", "sy", "963" ], [ "Taiwan (台灣)", "tw", "886" ], [ "Tajikistan", "tj", "992" ], [ "Tanzania", "tz", "255" ], [ "Thailand (ไทย)", "th", "66" ], [ "Timor-Leste", "tl", "670" ], [ "Togo", "tg", "228" ], [ "Tokelau", "tk", "690" ], [ "Tonga", "to", "676" ], [ "Trinidad and Tobago", "tt", "1", 22, [ "868" ] ], [ "Tunisia (‫تونس‬‎)", "tn", "216" ], [ "Turkey (Türkiye)", "tr", "90" ], [ "Turkmenistan", "tm", "993" ], [ "Turks and Caicos Islands", "tc", "1", 23, [ "649" ] ], [ "Tuvalu", "tv", "688" ], [ "U.S. Virgin Islands", "vi", "1", 24, [ "340" ] ], [ "Uganda", "ug", "256" ], [ "Ukraine (Україна)", "ua", "380" ], [ "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", "ae", "971" ], [ "United Kingdom", "gb", "44", 0 ], [ "United States", "us", "1", 0 ], [ "Uruguay", "uy", "598" ], [ "Uzbekistan (Oʻzbekiston)", "uz", "998" ], [ "Vanuatu", "vu", "678" ], [ "Vatican City (Città del Vaticano)", "va", "39", 1, [ "06698" ] ], [ "Venezuela", "ve", "58" ], [ "Vietnam (Việt Nam)", "vn", "84" ], [ "Wallis and Futuna (Wallis-et-Futuna)", "wf", "681" ], [ "Western Sahara (‫الصحراء الغربية‬‎)", "eh", "212", 1, [ "5288", "5289" ] ], [ "Yemen (‫اليمن‬‎)", "ye", "967" ], [ "Zambia", "zm", "260" ], [ "Zimbabwe", "zw", "263" ], [ "Åland Islands", "ax", "358", 1, [ "18" ] ] ];
+        // loop over all of the countries above, restructuring the data to be objects with named keys
+        for (var i = 0; i < allCountries.length; i++) {
+            var c = allCountries[i];
+            allCountries[i] = {
+                name: c[0],
+                iso2: c[1],
+                dialCode: c[2],
+                priority: c[3] || 0,
+                areaCodes: c[4] || null
+            };
+        }
+        function _objectSpread(target) {
+            for (var i = 1; i < arguments.length; i++) {
+                var source = arguments[i] != null ? Object(arguments[i]) : {};
+                var ownKeys = Object.keys(source);
+                if (typeof Object.getOwnPropertySymbols === "function") {
+                    ownKeys.push.apply(ownKeys, Object.getOwnPropertySymbols(source).filter(function(sym) {
+                        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+                    }));
+                }
+                ownKeys.forEach(function(key) {
+                    _defineProperty(target, key, source[key]);
+                });
+            }
+            return target;
+        }
+        function _defineProperty(obj, key, value) {
+            key = _toPropertyKey(key);
+            if (key in obj) {
+                Object.defineProperty(obj, key, {
+                    value: value,
+                    enumerable: true,
+                    configurable: true,
+                    writable: true
+                });
+            } else {
+                obj[key] = value;
+            }
+            return obj;
+        }
+        function _classCallCheck(instance, Constructor) {
+            if (!(instance instanceof Constructor)) {
+                throw new TypeError("Cannot call a class as a function");
+            }
+        }
+        function _defineProperties(target, props) {
+            for (var i = 0; i < props.length; i++) {
+                var descriptor = props[i];
+                descriptor.enumerable = descriptor.enumerable || false;
+                descriptor.configurable = true;
+                if ("value" in descriptor) descriptor.writable = true;
+                Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+            }
+        }
+        function _createClass(Constructor, protoProps, staticProps) {
+            if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+            if (staticProps) _defineProperties(Constructor, staticProps);
+            Object.defineProperty(Constructor, "prototype", {
+                writable: false
+            });
+            return Constructor;
+        }
+        function _toPropertyKey(arg) {
+            var key = _toPrimitive(arg, "string");
+            return typeof key === "symbol" ? key : String(key);
+        }
+        function _toPrimitive(input, hint) {
+            if (typeof input !== "object" || input === null) return input;
+            var prim = input[Symbol.toPrimitive];
+            if (prim !== undefined$1) {
+                var res = prim.call(input, hint || "default");
+                if (typeof res !== "object") return res;
+                throw new TypeError("@@toPrimitive must return a primitive value.");
+            }
+            return (hint === "string" ? String : Number)(input);
+        }
+        var intlTelInputGlobals = {
+            getInstance: function getInstance(input) {
+                var id = input.getAttribute("data-intl-tel-input-id");
+                return window.intlTelInputGlobals.instances[id];
+            },
+            instances: {},
+            // using a global like this allows us to mock it in the tests
+            documentReady: function documentReady() {
+                return document.readyState === "complete";
+            }
+        };
+        if (typeof window === "object") {
+            window.intlTelInputGlobals = intlTelInputGlobals;
+        }
+        // these vars persist through all instances of the plugin
+        var id = 0;
+        var defaults = {
+            // whether or not to allow the dropdown
+            allowDropdown: true,
+            // auto insert dial code (A) on init, (B) on user selecting a country, (C) on calling setCountry
+            // also listen for blur/submit and auto remove dial code if that's all there is
+            autoInsertDialCode: false,
+            // add a placeholder in the input with an example number for the selected country
+            autoPlaceholder: "polite",
+            // modify the parentClass
+            customContainer: "",
+            // modify the auto placeholder
+            customPlaceholder: null,
+            // append menu to specified element
+            dropdownContainer: null,
+            // don't display these countries
+            excludeCountries: [],
+            // format the input value during initialisation and on setNumber
+            formatOnDisplay: true,
+            // geoIp lookup function
+            geoIpLookup: null,
+            // inject a hidden input with this name, and on submit, populate it with the result of getNumber
+            hiddenInput: "",
+            // initial country
+            initialCountry: "",
+            // localized country names e.g. { 'de': 'Deutschland' }
+            localizedCountries: null,
+            // national vs international formatting for numbers e.g. placeholders and displaying existing numbers
+            nationalMode: true,
+            // display only these countries
+            onlyCountries: [],
+            // number type to use for placeholders
+            placeholderNumberType: "MOBILE",
+            // the countries at the top of the list. defaults to united states and united kingdom
+            preferredCountries: [ "us", "gb" ],
+            // display the country dial code next to the selected flag
+            separateDialCode: false,
+            // option to hide the flags - must be used with separateDialCode, or allowDropdown=false
+            showFlags: true,
+            // specify the path to the libphonenumber script to enable validation/formatting
+            utilsScript: ""
+        };
+        // https://en.wikipedia.org/wiki/List_of_North_American_Numbering_Plan_area_codes#Non-geographic_area_codes
+        var regionlessNanpNumbers = [ "800", "822", "833", "844", "855", "866", "877", "880", "881", "882", "883", "884", "885", "886", "887", "888", "889" ];
+        // utility function to iterate over an object. can't use Object.entries or native forEach because
+        // of IE11
+        var forEachProp = function forEachProp(obj, callback) {
+            var keys = Object.keys(obj);
+            for (var i = 0; i < keys.length; i++) {
+                callback(keys[i], obj[keys[i]]);
+            }
+        };
+        // run a method on each instance of the plugin
+        var forEachInstance = function forEachInstance(method) {
+            forEachProp(window.intlTelInputGlobals.instances, function(key) {
+                window.intlTelInputGlobals.instances[key][method]();
+            });
+        };
+        // this is our plugin class that we will create an instance of
+        // eslint-disable-next-line no-unused-vars
+        var Iti = /*#__PURE__*/ function() {
+            function Iti(input, options) {
+                var _this = this;
+                _classCallCheck(this, Iti);
+                this.id = id++;
+                this.telInput = input;
+                this.activeItem = null;
+                this.highlightedItem = null;
+                // process specified options / defaults
+                // alternative to Object.assign, which isn't supported by IE11
+                var customOptions = options || {};
+                this.options = {};
+                forEachProp(defaults, function(key, value) {
+                    _this.options[key] = customOptions.hasOwnProperty(key) ? customOptions[key] : value;
+                });
+                this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
+            }
+            _createClass(Iti, [ {
+                key: "_init",
+                value: function _init() {
+                    var _this2 = this;
+                    // if in nationalMode, do not insert dial codes
+                    if (this.options.nationalMode) {
+                        this.options.autoInsertDialCode = false;
+                    }
+                    // if separateDialCode enabled, do not insert dial codes
+                    if (this.options.separateDialCode) {
+                        this.options.autoInsertDialCode = false;
+                    }
+                    // force showFlags=true if there's a dropdown and we're not displaying the dial code,
+                    // as otherwise you just have a down arrow on it's own which doesn't make sense
+                    var forceShowFlags = this.options.allowDropdown && !this.options.separateDialCode;
+                    if (!this.options.showFlags && forceShowFlags) {
+                        this.options.showFlags = true;
+                    }
+                    // we cannot just test screen size as some smartphones/website meta tags will report desktop
+                    // resolutions
+                    // Note: for some reason jasmine breaks if you put this in the main Plugin function with the
+                    // rest of these declarations
+                    // Note: to target Android Mobiles (and not Tablets), we must find 'Android' and 'Mobile'
+                    this.isMobile = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+                    if (this.isMobile) {
+                        // trigger the mobile dropdown css
+                        document.body.classList.add("iti-mobile");
+                        // on mobile, we want a full screen dropdown, so we must append it to the body
+                        if (!this.options.dropdownContainer) {
+                            this.options.dropdownContainer = document.body;
+                        }
+                    }
+                    // check if input has one parent with RTL
+                    this.isRTL = !!this.telInput.closest("[dir=rtl]");
+                    // these promises get resolved when their individual requests complete
+                    // this way the dev can do something like iti.promise.then(...) to know when all requests are
+                    // complete
+                    if (typeof Promise !== "undefined") {
+                        var autoCountryPromise = new Promise(function(resolve, reject) {
+                            _this2.resolveAutoCountryPromise = resolve;
+                            _this2.rejectAutoCountryPromise = reject;
+                        });
+                        var utilsScriptPromise = new Promise(function(resolve, reject) {
+                            _this2.resolveUtilsScriptPromise = resolve;
+                            _this2.rejectUtilsScriptPromise = reject;
+                        });
+                        this.promise = Promise.all([ autoCountryPromise, utilsScriptPromise ]);
+                    } else {
+                        // prevent errors when Promise doesn't exist
+                        this.resolveAutoCountryPromise = this.rejectAutoCountryPromise = function() {};
+                        this.resolveUtilsScriptPromise = this.rejectUtilsScriptPromise = function() {};
+                    }
+                    // in various situations there could be no country selected initially, but we need to be able
+                    // to assume this variable exists
+                    this.selectedCountryData = {};
+                    // process all the data: onlyCountries, excludeCountries, preferredCountries etc
+                    this._processCountryData();
+                    // generate the markup
+                    this._generateMarkup();
+                    // set the initial state of the input value and the selected flag
+                    this._setInitialState();
+                    // start all of the event listeners: autoInsertDialCode, input keydown, selectedFlag click
+                    this._initListeners();
+                    // utils script, and auto country
+                    this._initRequests();
+                }
+            }, {
+                key: "_processCountryData",
+                value: function _processCountryData() {
+                    // process onlyCountries or excludeCountries array if present
+                    this._processAllCountries();
+                    // process the countryCodes map
+                    this._processCountryCodes();
+                    // process the preferredCountries
+                    this._processPreferredCountries();
+                    // translate countries according to localizedCountries option
+                    if (this.options.localizedCountries) {
+                        this._translateCountriesByLocale();
+                    }
+                    // sort countries by name
+                    if (this.options.onlyCountries.length || this.options.localizedCountries) {
+                        this.countries.sort(this._countryNameSort);
+                    }
+                }
+            }, {
+                key: "_addCountryCode",
+                value: function _addCountryCode(iso2, countryCode, priority) {
+                    if (countryCode.length > this.countryCodeMaxLen) {
+                        this.countryCodeMaxLen = countryCode.length;
+                    }
+                    if (!this.countryCodes.hasOwnProperty(countryCode)) {
+                        this.countryCodes[countryCode] = [];
+                    }
+                    // bail if we already have this country for this countryCode
+                    for (var i = 0; i < this.countryCodes[countryCode].length; i++) {
+                        if (this.countryCodes[countryCode][i] === iso2) {
+                            return;
+                        }
+                    }
+                    // check for undefined as 0 is falsy
+                    var index = priority !== undefined$1 ? priority : this.countryCodes[countryCode].length;
+                    this.countryCodes[countryCode][index] = iso2;
+                }
+            }, {
+                key: "_processAllCountries",
+                value: function _processAllCountries() {
+                    if (this.options.onlyCountries.length) {
+                        var lowerCaseOnlyCountries = this.options.onlyCountries.map(function(country) {
+                            return country.toLowerCase();
+                        });
+                        this.countries = allCountries.filter(function(country) {
+                            return lowerCaseOnlyCountries.indexOf(country.iso2) > -1;
+                        });
+                    } else if (this.options.excludeCountries.length) {
+                        var lowerCaseExcludeCountries = this.options.excludeCountries.map(function(country) {
+                            return country.toLowerCase();
+                        });
+                        this.countries = allCountries.filter(function(country) {
+                            return lowerCaseExcludeCountries.indexOf(country.iso2) === -1;
+                        });
+                    } else {
+                        this.countries = allCountries;
+                    }
+                }
+            }, {
+                key: "_translateCountriesByLocale",
+                value: function _translateCountriesByLocale() {
+                    for (var i = 0; i < this.countries.length; i++) {
+                        var iso = this.countries[i].iso2.toLowerCase();
+                        if (this.options.localizedCountries.hasOwnProperty(iso)) {
+                            this.countries[i].name = this.options.localizedCountries[iso];
+                        }
+                    }
+                }
+            }, {
+                key: "_countryNameSort",
+                value: function _countryNameSort(a, b) {
+                    if (a.name < b.name) {
+                        return -1;
+                    }
+                    if (a.name > b.name) {
+                        return 1;
+                    }
+                    return 0;
+                }
+            }, {
+                key: "_processCountryCodes",
+                value: function _processCountryCodes() {
+                    this.countryCodeMaxLen = 0;
+                    // here we store just dial codes
+                    this.dialCodes = {};
+                    // here we store "country codes" (both dial codes and their area codes)
+                    this.countryCodes = {};
+                    // first: add dial codes
+                    for (var i = 0; i < this.countries.length; i++) {
+                        var c = this.countries[i];
+                        if (!this.dialCodes[c.dialCode]) {
+                            this.dialCodes[c.dialCode] = true;
+                        }
+                        this._addCountryCode(c.iso2, c.dialCode, c.priority);
+                    }
+                    // next: add area codes
+                    // this is a second loop over countries, to make sure we have all of the "root" countries
+                    // already in the map, so that we can access them, as each time we add an area code substring
+                    // to the map, we also need to include the "root" country's code, as that also matches
+                    for (var _i = 0; _i < this.countries.length; _i++) {
+                        var _c = this.countries[_i];
+                        // area codes
+                        if (_c.areaCodes) {
+                            var rootCountryCode = this.countryCodes[_c.dialCode][0];
+                            // for each area code
+                            for (var j = 0; j < _c.areaCodes.length; j++) {
+                                var areaCode = _c.areaCodes[j];
+                                // for each digit in the area code to add all partial matches as well
+                                for (var k = 1; k < areaCode.length; k++) {
+                                    var partialDialCode = _c.dialCode + areaCode.substr(0, k);
+                                    // start with the root country, as that also matches this dial code
+                                    this._addCountryCode(rootCountryCode, partialDialCode);
+                                    this._addCountryCode(_c.iso2, partialDialCode);
+                                }
+                                // add the full area code
+                                this._addCountryCode(_c.iso2, _c.dialCode + areaCode);
+                            }
+                        }
+                    }
+                }
+            }, {
+                key: "_processPreferredCountries",
+                value: function _processPreferredCountries() {
+                    this.preferredCountries = [];
+                    for (var i = 0; i < this.options.preferredCountries.length; i++) {
+                        var countryCode = this.options.preferredCountries[i].toLowerCase();
+                        var countryData = this._getCountryData(countryCode, false, true);
+                        if (countryData) {
+                            this.preferredCountries.push(countryData);
+                        }
+                    }
+                }
+            }, {
+                key: "_createEl",
+                value: function _createEl(name, attrs, container) {
+                    var el = document.createElement(name);
+                    if (attrs) {
+                        forEachProp(attrs, function(key, value) {
+                            return el.setAttribute(key, value);
+                        });
+                    }
+                    if (container) {
+                        container.appendChild(el);
+                    }
+                    return el;
+                }
+            }, {
+                key: "_generateMarkup",
+                value: function _generateMarkup() {
+                    // if autocomplete does not exist on the element and its form, then
+                    // prevent autocomplete as there's no safe, cross-browser event we can react to, so it can
+                    // easily put the plugin in an inconsistent state e.g. the wrong flag selected for the
+                    // autocompleted number, which on submit could mean wrong number is saved
+                    if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete"))) {
+                        this.telInput.setAttribute("autocomplete", "off");
+                    }
+                    var _this$options = this.options, allowDropdown = _this$options.allowDropdown, separateDialCode = _this$options.separateDialCode, showFlags = _this$options.showFlags, customContainer = _this$options.customContainer, hiddenInput = _this$options.hiddenInput, dropdownContainer = _this$options.dropdownContainer;
+                    // containers (mostly for positioning)
+                    var parentClass = "iti";
+                    if (allowDropdown) {
+                        parentClass += " iti--allow-dropdown";
+                    }
+                    if (separateDialCode) {
+                        parentClass += " iti--separate-dial-code";
+                    }
+                    if (showFlags) {
+                        parentClass += " iti--show-flags";
+                    }
+                    if (customContainer) {
+                        parentClass += " ".concat(customContainer);
+                    }
+                    var wrapper = this._createEl("div", {
+                        "class": parentClass
+                    });
+                    this.telInput.parentNode.insertBefore(wrapper, this.telInput);
+                    // only hide the flagsContainer if allowDropdown, showFlags and separateDialCode are all false
+                    var showFlagsContainer = allowDropdown || showFlags || separateDialCode;
+                    if (showFlagsContainer) {
+                        this.flagsContainer = this._createEl("div", {
+                            "class": "iti__flag-container"
+                        }, wrapper);
+                    }
+                    wrapper.appendChild(this.telInput);
+                    // selected flag (displayed to left of input)
+                    // using Aria tags for "Select-Only Combobox Example"
+                    // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+                    if (showFlagsContainer) {
+                        this.selectedFlag = this._createEl("div", _objectSpread({
+                            "class": "iti__selected-flag"
+                        }, allowDropdown && {
+                            role: "combobox",
+                            "aria-haspopup": "listbox",
+                            "aria-controls": "iti-".concat(this.id, "__country-listbox"),
+                            "aria-expanded": "false",
+                            "aria-label": "Telephone country code"
+                        }), this.flagsContainer);
+                    }
+                    if (showFlags) {
+                        this.selectedFlagInner = this._createEl("div", {
+                            "class": "iti__flag"
+                        }, this.selectedFlag);
+                    }
+                    if (this.selectedFlag && this.telInput.disabled) {
+                        this.selectedFlag.setAttribute("aria-disabled", "true");
+                    }
+                    if (separateDialCode) {
+                        this.selectedDialCode = this._createEl("div", {
+                            "class": "iti__selected-dial-code"
+                        }, this.selectedFlag);
+                    }
+                    if (allowDropdown) {
+                        if (!this.telInput.disabled) {
+                            // make element focusable and tab navigable
+                            this.selectedFlag.setAttribute("tabindex", "0");
+                        }
+                        this.dropdownArrow = this._createEl("div", {
+                            "class": "iti__arrow"
+                        }, this.selectedFlag);
+                        // country dropdown: preferred countries, then divider, then all countries
+                        this.countryList = this._createEl("ul", {
+                            "class": "iti__country-list iti__hide",
+                            id: "iti-".concat(this.id, "__country-listbox"),
+                            role: "listbox",
+                            "aria-label": "List of countries"
+                        });
+                        if (this.preferredCountries.length) {
+                            this._appendListItems(this.preferredCountries, "iti__preferred", true);
+                            this._createEl("li", {
+                                "class": "iti__divider",
+                                role: "separator",
+                                "aria-disabled": "true"
+                            }, this.countryList);
+                        }
+                        this._appendListItems(this.countries, "iti__standard");
+                        // create dropdownContainer markup
+                        if (dropdownContainer) {
+                            this.dropdown = this._createEl("div", {
+                                "class": "iti iti--container"
+                            });
+                            this.dropdown.appendChild(this.countryList);
+                        } else {
+                            this.flagsContainer.appendChild(this.countryList);
+                        }
+                    }
+                    if (hiddenInput) {
+                        var hiddenInputName = hiddenInput;
+                        var name = this.telInput.getAttribute("name");
+                        if (name) {
+                            var i = name.lastIndexOf("[");
+                            // if input name contains square brackets, then give the hidden input the same name,
+                            // replacing the contents of the last set of brackets with the given hiddenInput name
+                            if (i !== -1) {
+                                hiddenInputName = "".concat(name.substr(0, i), "[").concat(hiddenInputName, "]");
+                            }
+                        }
+                        this.hiddenInput = this._createEl("input", {
+                            type: "hidden",
+                            name: hiddenInputName
+                        });
+                        wrapper.appendChild(this.hiddenInput);
+                    }
+                }
+            }, {
+                key: "_appendListItems",
+                value: function _appendListItems(countries, className, preferred) {
+                    // we create so many DOM elements, it is faster to build a temp string
+                    // and then add everything to the DOM in one go at the end
+                    var tmp = "";
+                    // for each country
+                    for (var i = 0; i < countries.length; i++) {
+                        var c = countries[i];
+                        var idSuffix = preferred ? "-preferred" : "";
+                        // open the list item
+                        tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-").concat(this.id, "__item-").concat(c.iso2).concat(idSuffix, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "' aria-selected='false'>");
+                        // add the flag
+                        if (this.options.showFlags) {
+                            tmp += "<div class='iti__flag-box'><div class='iti__flag iti__".concat(c.iso2, "'></div></div>");
+                        }
+                        // and the country name and dial code
+                        tmp += "<span class='iti__country-name'>".concat(c.name, "</span>");
+                        tmp += "<span class='iti__dial-code'>+".concat(c.dialCode, "</span>");
+                        // close the list item
+                        tmp += "</li>";
+                    }
+                    this.countryList.insertAdjacentHTML("beforeend", tmp);
+                }
+            }, {
+                key: "_setInitialState",
+                value: function _setInitialState() {
+                    // fix firefox bug: when first load page (with input with value set to number with intl dial
+                    // code) and initialising plugin removes the dial code from the input, then refresh page,
+                    // and we try to init plugin again but this time on number without dial code so get grey flag
+                    var attributeValue = this.telInput.getAttribute("value");
+                    var inputValue = this.telInput.value;
+                    var useAttribute = attributeValue && attributeValue.charAt(0) === "+" && (!inputValue || inputValue.charAt(0) !== "+");
+                    var val = useAttribute ? attributeValue : inputValue;
+                    var dialCode = this._getDialCode(val);
+                    var isRegionlessNanp = this._isRegionlessNanp(val);
+                    var _this$options2 = this.options, initialCountry = _this$options2.initialCountry, autoInsertDialCode = _this$options2.autoInsertDialCode;
+                    // if we already have a dial code, and it's not a regionlessNanp, we can go ahead and set the
+                    // flag, else fall back to the default country
+                    if (dialCode && !isRegionlessNanp) {
+                        this._updateFlagFromNumber(val);
+                    } else if (initialCountry !== "auto") {
+                        // see if we should select a flag
+                        if (initialCountry) {
+                            this._setFlag(initialCountry.toLowerCase());
+                        } else {
+                            if (dialCode && isRegionlessNanp) {
+                                // has intl dial code, is regionless nanp, and no initialCountry, so default to US
+                                this._setFlag("us");
+                            } else {
+                                // no dial code and no initialCountry, so default to first in list
+                                this.defaultCountry = this.preferredCountries.length ? this.preferredCountries[0].iso2 : this.countries[0].iso2;
+                                if (!val) {
+                                    this._setFlag(this.defaultCountry);
+                                }
+                            }
+                        }
+                        // if empty and autoInsertDialCode then insert the dial code
+                        if (!val && autoInsertDialCode) {
+                            this.telInput.value = "+".concat(this.selectedCountryData.dialCode);
+                        }
+                    }
+                    // NOTE: if initialCountry is set to auto, that will be handled separately
+                    // format - note this wont be run after _updateDialCode as that's only called if no val
+                    if (val) {
+                        this._updateValFromNumber(val);
+                    }
+                }
+            }, {
+                key: "_initListeners",
+                value: function _initListeners() {
+                    this._initKeyListeners();
+                    if (this.options.autoInsertDialCode) {
+                        this._initBlurListeners();
+                    }
+                    if (this.options.allowDropdown) {
+                        this._initDropdownListeners();
+                    }
+                    if (this.hiddenInput) {
+                        this._initHiddenInputListener();
+                    }
+                }
+            }, {
+                key: "_initHiddenInputListener",
+                value: function _initHiddenInputListener() {
+                    var _this3 = this;
+                    this._handleHiddenInputSubmit = function() {
+                        _this3.hiddenInput.value = _this3.getNumber();
+                    };
+                    if (this.telInput.form) {
+                        this.telInput.form.addEventListener("submit", this._handleHiddenInputSubmit);
+                    }
+                }
+            }, {
+                key: "_getClosestLabel",
+                value: function _getClosestLabel() {
+                    var el = this.telInput;
+                    while (el && el.tagName !== "LABEL") {
+                        el = el.parentNode;
+                    }
+                    return el;
+                }
+            }, {
+                key: "_initDropdownListeners",
+                value: function _initDropdownListeners() {
+                    var _this4 = this;
+                    // hack for input nested inside label (which is valid markup): clicking the selected-flag to
+                    // open the dropdown would then automatically trigger a 2nd click on the input which would
+                    // close it again
+                    this._handleLabelClick = function(e) {
+                        // if the dropdown is closed, then focus the input, else ignore the click
+                        if (_this4.countryList.classList.contains("iti__hide")) {
+                            _this4.telInput.focus();
+                        } else {
+                            e.preventDefault();
+                        }
+                    };
+                    var label = this._getClosestLabel();
+                    if (label) {
+                        label.addEventListener("click", this._handleLabelClick);
+                    }
+                    // toggle country dropdown on click
+                    this._handleClickSelectedFlag = function() {
+                        // only intercept this event if we're opening the dropdown
+                        // else let it bubble up to the top ("click-off-to-close" listener)
+                        // we cannot just stopPropagation as it may be needed to close another instance
+                        if (_this4.countryList.classList.contains("iti__hide") && !_this4.telInput.disabled && !_this4.telInput.readOnly) {
+                            _this4._showDropdown();
+                        }
+                    };
+                    this.selectedFlag.addEventListener("click", this._handleClickSelectedFlag);
+                    // open dropdown list if currently focused
+                    this._handleFlagsContainerKeydown = function(e) {
+                        var isDropdownHidden = _this4.countryList.classList.contains("iti__hide");
+                        if (isDropdownHidden && [ "ArrowUp", "Up", "ArrowDown", "Down", " ", "Enter" ].indexOf(e.key) !== -1) {
+                            // prevent form from being submitted if "ENTER" was pressed
+                            e.preventDefault();
+                            // prevent event from being handled again by document
+                            e.stopPropagation();
+                            _this4._showDropdown();
+                        }
+                        // allow navigation from dropdown to input on TAB
+                        if (e.key === "Tab") {
+                            _this4._closeDropdown();
+                        }
+                    };
+                    this.flagsContainer.addEventListener("keydown", this._handleFlagsContainerKeydown);
+                }
+            }, {
+                key: "_initRequests",
+                value: function _initRequests() {
+                    var _this5 = this;
+                    // if the user has specified the path to the utils script, fetch it on window.load, else resolve
+                    if (this.options.utilsScript && !window.intlTelInputUtils) {
+                        // if the plugin is being initialised after the window.load event has already been fired
+                        if (window.intlTelInputGlobals.documentReady()) {
+                            window.intlTelInputGlobals.loadUtils(this.options.utilsScript);
+                        } else {
+                            // wait until the load event so we don't block any other requests e.g. the flags image
+                            window.addEventListener("load", function() {
+                                window.intlTelInputGlobals.loadUtils(_this5.options.utilsScript);
+                            });
+                        }
+                    } else {
+                        this.resolveUtilsScriptPromise();
+                    }
+                    if (this.options.initialCountry === "auto") {
+                        this._loadAutoCountry();
+                    } else {
+                        this.resolveAutoCountryPromise();
+                    }
+                }
+            }, {
+                key: "_loadAutoCountry",
+                value: function _loadAutoCountry() {
+                    // 3 options:
+                    // 1) already loaded (we're done)
+                    // 2) not already started loading (start)
+                    // 3) already started loading (do nothing - just wait for loading callback to fire)
+                    if (window.intlTelInputGlobals.autoCountry) {
+                        this.handleAutoCountry();
+                    } else if (!window.intlTelInputGlobals.startedLoadingAutoCountry) {
+                        // don't do this twice!
+                        window.intlTelInputGlobals.startedLoadingAutoCountry = true;
+                        if (typeof this.options.geoIpLookup === "function") {
+                            this.options.geoIpLookup(function(countryCode) {
+                                window.intlTelInputGlobals.autoCountry = countryCode.toLowerCase();
+                                // tell all instances the auto country is ready
+                                // TODO: this should just be the current instances
+                                // UPDATE: use setTimeout in case their geoIpLookup function calls this callback straight
+                                // away (e.g. if they have already done the geo ip lookup somewhere else). Using
+                                // setTimeout means that the current thread of execution will finish before executing
+                                // this, which allows the plugin to finish initialising.
+                                setTimeout(function() {
+                                    return forEachInstance("handleAutoCountry");
+                                });
+                            }, function() {
+                                return forEachInstance("rejectAutoCountryPromise");
+                            });
+                        }
+                    }
+                }
+            }, {
+                key: "_initKeyListeners",
+                value: function _initKeyListeners() {
+                    var _this6 = this;
+                    // update flag on keyup
+                    this._handleKeyupEvent = function() {
+                        if (_this6._updateFlagFromNumber(_this6.telInput.value)) {
+                            _this6._triggerCountryChange();
+                        }
+                    };
+                    this.telInput.addEventListener("keyup", this._handleKeyupEvent);
+                    // update flag on cut/paste events (now supported in all major browsers)
+                    this._handleClipboardEvent = function() {
+                        // hack because "paste" event is fired before input is updated
+                        setTimeout(_this6._handleKeyupEvent);
+                    };
+                    this.telInput.addEventListener("cut", this._handleClipboardEvent);
+                    this.telInput.addEventListener("paste", this._handleClipboardEvent);
+                }
+            }, {
+                key: "_cap",
+                value: function _cap(number) {
+                    var max = this.telInput.getAttribute("maxlength");
+                    return max && number.length > max ? number.substr(0, max) : number;
+                }
+            }, {
+                key: "_initBlurListeners",
+                value: function _initBlurListeners() {
+                    var _this7 = this;
+                    // on blur or form submit: if just a dial code then remove it
+                    this._handleSubmitOrBlurEvent = function() {
+                        _this7._removeEmptyDialCode();
+                    };
+                    if (this.telInput.form) {
+                        this.telInput.form.addEventListener("submit", this._handleSubmitOrBlurEvent);
+                    }
+                    this.telInput.addEventListener("blur", this._handleSubmitOrBlurEvent);
+                }
+            }, {
+                key: "_removeEmptyDialCode",
+                value: function _removeEmptyDialCode() {
+                    if (this.telInput.value.charAt(0) === "+") {
+                        var numeric = this._getNumeric(this.telInput.value);
+                        // if just a plus, or if just a dial code
+                        if (!numeric || this.selectedCountryData.dialCode === numeric) {
+                            this.telInput.value = "";
+                        }
+                    }
+                }
+            }, {
+                key: "_getNumeric",
+                value: function _getNumeric(s) {
+                    return s.replace(/\D/g, "");
+                }
+            }, {
+                key: "_trigger",
+                value: function _trigger(name) {
+                    // have to use old school document.createEvent as IE11 doesn't support `new Event()` syntax
+                    var e = document.createEvent("Event");
+                    e.initEvent(name, true, true);
+                    // can bubble, and is cancellable
+                    this.telInput.dispatchEvent(e);
+                }
+            }, {
+                key: "_showDropdown",
+                value: function _showDropdown() {
+                    this.countryList.classList.remove("iti__hide");
+                    this.selectedFlag.setAttribute("aria-expanded", "true");
+                    this._setDropdownPosition();
+                    // update highlighting and scroll to active list item
+                    if (this.activeItem) {
+                        this._highlightListItem(this.activeItem, false);
+                        this._scrollTo(this.activeItem, true);
+                    }
+                    // bind all the dropdown-related listeners: mouseover, click, click-off, keydown
+                    this._bindDropdownListeners();
+                    // update the arrow
+                    this.dropdownArrow.classList.add("iti__arrow--up");
+                    this._trigger("open:countrydropdown");
+                }
+            }, {
+                key: "_toggleClass",
+                value: function _toggleClass(el, className, shouldHaveClass) {
+                    if (shouldHaveClass && !el.classList.contains(className)) {
+                        el.classList.add(className);
+                    } else if (!shouldHaveClass && el.classList.contains(className)) {
+                        el.classList.remove(className);
+                    }
+                }
+            }, {
+                key: "_setDropdownPosition",
+                value: function _setDropdownPosition() {
+                    var _this8 = this;
+                    if (this.options.dropdownContainer) {
+                        this.options.dropdownContainer.appendChild(this.dropdown);
+                    }
+                    if (!this.isMobile) {
+                        var pos = this.telInput.getBoundingClientRect();
+                        // windowTop from https://stackoverflow.com/a/14384091/217866
+                        var windowTop = window.pageYOffset || document.documentElement.scrollTop;
+                        var inputTop = pos.top + windowTop;
+                        var dropdownHeight = this.countryList.offsetHeight;
+                        // dropdownFitsBelow = (dropdownBottom < windowBottom)
+                        var dropdownFitsBelow = inputTop + this.telInput.offsetHeight + dropdownHeight < windowTop + window.innerHeight;
+                        var dropdownFitsAbove = inputTop - dropdownHeight > windowTop;
+                        // by default, the dropdown will be below the input. If we want to position it above the
+                        // input, we add the dropup class.
+                        this._toggleClass(this.countryList, "iti__country-list--dropup", !dropdownFitsBelow && dropdownFitsAbove);
+                        // if dropdownContainer is enabled, calculate postion
+                        if (this.options.dropdownContainer) {
+                            // by default the dropdown will be directly over the input because it's not in the flow.
+                            // If we want to position it below, we need to add some extra top value.
+                            var extraTop = !dropdownFitsBelow && dropdownFitsAbove ? 0 : this.telInput.offsetHeight;
+                            // calculate placement
+                            this.dropdown.style.top = "".concat(inputTop + extraTop, "px");
+                            this.dropdown.style.left = "".concat(pos.left + document.body.scrollLeft, "px");
+                            // close menu on window scroll
+                            this._handleWindowScroll = function() {
+                                return _this8._closeDropdown();
+                            };
+                            window.addEventListener("scroll", this._handleWindowScroll);
+                        }
+                    }
+                }
+            }, {
+                key: "_getClosestListItem",
+                value: function _getClosestListItem(target) {
+                    var el = target;
+                    while (el && el !== this.countryList && !el.classList.contains("iti__country")) {
+                        el = el.parentNode;
+                    }
+                    // if we reached the countryList element, then return null
+                    return el === this.countryList ? null : el;
+                }
+            }, {
+                key: "_bindDropdownListeners",
+                value: function _bindDropdownListeners() {
+                    var _this9 = this;
+                    // when mouse over a list item, just highlight that one
+                    // we add the class "highlight", so if they hit "enter" we know which one to select
+                    this._handleMouseoverCountryList = function(e) {
+                        // handle event delegation, as we're listening for this event on the countryList
+                        var listItem = _this9._getClosestListItem(e.target);
+                        if (listItem) {
+                            _this9._highlightListItem(listItem, false);
+                        }
+                    };
+                    this.countryList.addEventListener("mouseover", this._handleMouseoverCountryList);
+                    // listen for country selection
+                    this._handleClickCountryList = function(e) {
+                        var listItem = _this9._getClosestListItem(e.target);
+                        if (listItem) {
+                            _this9._selectListItem(listItem);
+                        }
+                    };
+                    this.countryList.addEventListener("click", this._handleClickCountryList);
+                    // click off to close
+                    // (except when this initial opening click is bubbling up)
+                    // we cannot just stopPropagation as it may be needed to close another instance
+                    var isOpening = true;
+                    this._handleClickOffToClose = function() {
+                        if (!isOpening) {
+                            _this9._closeDropdown();
+                        }
+                        isOpening = false;
+                    };
+                    document.documentElement.addEventListener("click", this._handleClickOffToClose);
+                    // listen for up/down scrolling, enter to select, or letters to jump to country name.
+                    // use keydown as keypress doesn't fire for non-char keys and we want to catch if they
+                    // just hit down and hold it to scroll down (no keyup event).
+                    // listen on the document because that's where key events are triggered if no input has focus
+                    var query = "";
+                    var queryTimer = null;
+                    this._handleKeydownOnDropdown = function(e) {
+                        // prevent down key from scrolling the whole page,
+                        // and enter key from submitting a form etc
+                        e.preventDefault();
+                        // up and down to navigate
+                        if (e.key === "ArrowUp" || e.key === "Up" || e.key === "ArrowDown" || e.key === "Down") {
+                            _this9._handleUpDownKey(e.key);
+                        } else if (e.key === "Enter") {
+                            _this9._handleEnterKey();
+                        } else if (e.key === "Escape") {
+                            _this9._closeDropdown();
+                        } else if (/^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+                            // jump to countries that start with the query string
+                            if (queryTimer) {
+                                clearTimeout(queryTimer);
+                            }
+                            query += e.key.toLowerCase();
+                            _this9._searchForCountry(query);
+                            // if the timer hits 1 second, reset the query
+                            queryTimer = setTimeout(function() {
+                                query = "";
+                            }, 1e3);
+                        }
+                    };
+                    document.addEventListener("keydown", this._handleKeydownOnDropdown);
+                }
+            }, {
+                key: "_handleUpDownKey",
+                value: function _handleUpDownKey(key) {
+                    var next = key === "ArrowUp" || key === "Up" ? this.highlightedItem.previousElementSibling : this.highlightedItem.nextElementSibling;
+                    if (next) {
+                        // skip the divider
+                        if (next.classList.contains("iti__divider")) {
+                            next = key === "ArrowUp" || key === "Up" ? next.previousElementSibling : next.nextElementSibling;
+                        }
+                        this._highlightListItem(next, true);
+                    }
+                }
+            }, {
+                key: "_handleEnterKey",
+                value: function _handleEnterKey() {
+                    if (this.highlightedItem) {
+                        this._selectListItem(this.highlightedItem);
+                    }
+                }
+            }, {
+                key: "_searchForCountry",
+                value: function _searchForCountry(query) {
+                    for (var i = 0; i < this.countries.length; i++) {
+                        if (this._startsWith(this.countries[i].name, query)) {
+                            var listItem = this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(this.countries[i].iso2));
+                            // update highlighting and scroll
+                            this._highlightListItem(listItem, false);
+                            this._scrollTo(listItem, true);
+                            break;
+                        }
+                    }
+                }
+            }, {
+                key: "_startsWith",
+                value: function _startsWith(a, b) {
+                    return a.substr(0, b.length).toLowerCase() === b;
+                }
+            }, {
+                key: "_updateValFromNumber",
+                value: function _updateValFromNumber(originalNumber) {
+                    var number = originalNumber;
+                    if (this.options.formatOnDisplay && window.intlTelInputUtils && this.selectedCountryData) {
+                        var useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.separateDialCode;
+                        var _intlTelInputUtils$nu = intlTelInputUtils.numberFormat, NATIONAL = _intlTelInputUtils$nu.NATIONAL, INTERNATIONAL = _intlTelInputUtils$nu.INTERNATIONAL;
+                        var format = useNational ? NATIONAL : INTERNATIONAL;
+                        number = intlTelInputUtils.formatNumber(number, this.selectedCountryData.iso2, format);
+                    }
+                    number = this._beforeSetNumber(number);
+                    this.telInput.value = number;
+                }
+            }, {
+                key: "_updateFlagFromNumber",
+                value: function _updateFlagFromNumber(originalNumber) {
+                    // if we already have US/Canada selected, make sure the number starts
+                    // with a +1 so _getDialCode will be able to extract the area code
+                    // update: if we dont yet have selectedCountryData, but we're here (trying to update the flag
+                    // from the number), that means we're initialising the plugin with a number that already has a
+                    // dial code, so fine to ignore this bit
+                    var number = originalNumber;
+                    var selectedDialCode = this.selectedCountryData.dialCode;
+                    var isNanp = selectedDialCode === "1";
+                    if (number && isNanp && number.charAt(0) !== "+") {
+                        if (number.charAt(0) !== "1") {
+                            number = "1".concat(number);
+                        }
+                        number = "+".concat(number);
+                    }
+                    // if separateDialCode enabled, then consider the selected dial code to be part of the number
+                    if (this.options.separateDialCode && selectedDialCode && number.charAt(0) !== "+") {
+                        number = "+".concat(selectedDialCode).concat(number);
+                    }
+                    // try and extract valid dial code from input
+                    var dialCode = this._getDialCode(number, true);
+                    var numeric = this._getNumeric(number);
+                    var countryCode = null;
+                    if (dialCode) {
+                        var countryCodes = this.countryCodes[this._getNumeric(dialCode)];
+                        // check if the right country is already selected. this should be false if the number is
+                        // longer than the matched dial code because in this case we need to make sure that if
+                        // there are multiple country matches, that the first one is selected (note: we could
+                        // just check that here, but it requires the same loop that we already have later)
+                        var alreadySelected = countryCodes.indexOf(this.selectedCountryData.iso2) !== -1 && numeric.length <= dialCode.length - 1;
+                        var isRegionlessNanpNumber = selectedDialCode === "1" && this._isRegionlessNanp(numeric);
+                        // only update the flag if:
+                        // A) NOT (we currently have a NANP flag selected, and the number is a regionlessNanp)
+                        // AND
+                        // B) the right country is not already selected
+                        if (!isRegionlessNanpNumber && !alreadySelected) {
+                            // if using onlyCountries option, countryCodes[0] may be empty, so we must find the first
+                            // non-empty index
+                            for (var j = 0; j < countryCodes.length; j++) {
+                                if (countryCodes[j]) {
+                                    countryCode = countryCodes[j];
+                                    break;
+                                }
+                            }
+                        }
+                    } else if (number.charAt(0) === "+" && numeric.length) {
+                        // invalid dial code, so empty
+                        // Note: use getNumeric here because the number has not been formatted yet, so could contain
+                        // bad chars
+                        countryCode = "";
+                    } else if (!number || number === "+") {
+                        // empty, or just a plus, so default
+                        countryCode = this.defaultCountry;
+                    }
+                    if (countryCode !== null) {
+                        return this._setFlag(countryCode);
+                    }
+                    return false;
+                }
+            }, {
+                key: "_isRegionlessNanp",
+                value: function _isRegionlessNanp(number) {
+                    var numeric = this._getNumeric(number);
+                    if (numeric.charAt(0) === "1") {
+                        var areaCode = numeric.substr(1, 3);
+                        return regionlessNanpNumbers.indexOf(areaCode) !== -1;
+                    }
+                    return false;
+                }
+            }, {
+                key: "_highlightListItem",
+                value: function _highlightListItem(listItem, shouldFocus) {
+                    var prevItem = this.highlightedItem;
+                    if (prevItem) {
+                        prevItem.classList.remove("iti__highlight");
+                    }
+                    this.highlightedItem = listItem;
+                    this.highlightedItem.classList.add("iti__highlight");
+                    this.selectedFlag.setAttribute("aria-activedescendant", listItem.getAttribute("id"));
+                    if (shouldFocus) {
+                        this.highlightedItem.focus();
+                    }
+                }
+            }, {
+                key: "_getCountryData",
+                value: function _getCountryData(countryCode, ignoreOnlyCountriesOption, allowFail) {
+                    var countryList = ignoreOnlyCountriesOption ? allCountries : this.countries;
+                    for (var i = 0; i < countryList.length; i++) {
+                        if (countryList[i].iso2 === countryCode) {
+                            return countryList[i];
+                        }
+                    }
+                    if (allowFail) {
+                        return null;
+                    }
+                    throw new Error("No country data for '".concat(countryCode, "'"));
+                }
+            }, {
+                key: "_setFlag",
+                value: function _setFlag(countryCode) {
+                    var _this$options3 = this.options, allowDropdown = _this$options3.allowDropdown, separateDialCode = _this$options3.separateDialCode, showFlags = _this$options3.showFlags;
+                    var prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+                    // do this first as it will throw an error and stop if countryCode is invalid
+                    this.selectedCountryData = countryCode ? this._getCountryData(countryCode, false, false) : {};
+                    // update the defaultCountry - we only need the iso2 from now on, so just store that
+                    if (this.selectedCountryData.iso2) {
+                        this.defaultCountry = this.selectedCountryData.iso2;
+                    }
+                    if (showFlags) {
+                        this.selectedFlagInner.setAttribute("class", "iti__flag iti__".concat(countryCode));
+                    }
+                    this._setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode);
+                    if (separateDialCode) {
+                        var dialCode = this.selectedCountryData.dialCode ? "+".concat(this.selectedCountryData.dialCode) : "";
+                        this.selectedDialCode.innerHTML = dialCode;
+                        // offsetWidth is zero if input is in a hidden container during initialisation
+                        var selectedFlagWidth = this.selectedFlag.offsetWidth || this._getHiddenSelectedFlagWidth();
+                        // add 6px of padding after the grey selected-dial-code box, as this is what we use in the css
+                        if (this.isRTL) {
+                            this.telInput.style.paddingRight = "".concat(selectedFlagWidth + 6, "px");
+                        } else {
+                            this.telInput.style.paddingLeft = "".concat(selectedFlagWidth + 6, "px");
+                        }
+                    }
+                    // and the input's placeholder
+                    this._updatePlaceholder();
+                    // update the active list item
+                    if (allowDropdown) {
+                        var prevItem = this.activeItem;
+                        if (prevItem) {
+                            prevItem.classList.remove("iti__active");
+                            prevItem.setAttribute("aria-selected", "false");
+                        }
+                        if (countryCode) {
+                            // check if there is a preferred item first, else fall back to standard
+                            var nextItem = this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(countryCode, "-preferred")) || this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(countryCode));
+                            nextItem.setAttribute("aria-selected", "true");
+                            nextItem.classList.add("iti__active");
+                            this.activeItem = nextItem;
+                        }
+                    }
+                    // return if the flag has changed or not
+                    return prevCountry.iso2 !== countryCode;
+                }
+            }, {
+                key: "_setSelectedCountryFlagTitleAttribute",
+                value: function _setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode) {
+                    if (!this.selectedFlag) {
+                        return;
+                    }
+                    var title;
+                    if (countryCode && !separateDialCode) {
+                        title = "".concat(this.selectedCountryData.name, ": +").concat(this.selectedCountryData.dialCode);
+                    } else if (countryCode) {
+                        // For screen reader output, we don't want to include the dial code in the reader output twice
+                        // so just use the selected country name here:
+                        title = this.selectedCountryData.name;
+                    } else {
+                        title = "Unknown";
+                    }
+                    this.selectedFlag.setAttribute("title", title);
+                }
+            }, {
+                key: "_getHiddenSelectedFlagWidth",
+                value: function _getHiddenSelectedFlagWidth() {
+                    // to get the right styling to apply, all we need is a shallow clone of the container,
+                    // and then to inject a deep clone of the selectedFlag element
+                    var containerClone = this.telInput.parentNode.cloneNode();
+                    containerClone.style.visibility = "hidden";
+                    document.body.appendChild(containerClone);
+                    var flagsContainerClone = this.flagsContainer.cloneNode();
+                    containerClone.appendChild(flagsContainerClone);
+                    var selectedFlagClone = this.selectedFlag.cloneNode(true);
+                    flagsContainerClone.appendChild(selectedFlagClone);
+                    var width = selectedFlagClone.offsetWidth;
+                    containerClone.parentNode.removeChild(containerClone);
+                    return width;
+                }
+            }, {
+                key: "_updatePlaceholder",
+                value: function _updatePlaceholder() {
+                    var shouldSetPlaceholder = this.options.autoPlaceholder === "aggressive" || !this.hadInitialPlaceholder && this.options.autoPlaceholder === "polite";
+                    if (window.intlTelInputUtils && shouldSetPlaceholder) {
+                        var numberType = intlTelInputUtils.numberType[this.options.placeholderNumberType];
+                        var placeholder = this.selectedCountryData.iso2 ? intlTelInputUtils.getExampleNumber(this.selectedCountryData.iso2, this.options.nationalMode, numberType) : "";
+                        placeholder = this._beforeSetNumber(placeholder);
+                        if (typeof this.options.customPlaceholder === "function") {
+                            placeholder = this.options.customPlaceholder(placeholder, this.selectedCountryData);
+                        }
+                        this.telInput.setAttribute("placeholder", placeholder);
+                    }
+                }
+            }, {
+                key: "_selectListItem",
+                value: function _selectListItem(listItem) {
+                    // update selected flag and active list item
+                    var flagChanged = this._setFlag(listItem.getAttribute("data-country-code"));
+                    this._closeDropdown();
+                    this._updateDialCode(listItem.getAttribute("data-dial-code"));
+                    // focus the input
+                    this.telInput.focus();
+                    // put cursor at end - this fix is required for FF and IE11 (with auto inserting dial code),
+                    // who try to put the cursor at the beginning the first time
+                    var len = this.telInput.value.length;
+                    this.telInput.setSelectionRange(len, len);
+                    if (flagChanged) {
+                        this._triggerCountryChange();
+                    }
+                }
+            }, {
+                key: "_closeDropdown",
+                value: function _closeDropdown() {
+                    this.countryList.classList.add("iti__hide");
+                    this.selectedFlag.setAttribute("aria-expanded", "false");
+                    this.selectedFlag.removeAttribute("aria-activedescendant");
+                    // update the arrow
+                    this.dropdownArrow.classList.remove("iti__arrow--up");
+                    // unbind key events
+                    document.removeEventListener("keydown", this._handleKeydownOnDropdown);
+                    document.documentElement.removeEventListener("click", this._handleClickOffToClose);
+                    this.countryList.removeEventListener("mouseover", this._handleMouseoverCountryList);
+                    this.countryList.removeEventListener("click", this._handleClickCountryList);
+                    // remove menu from container
+                    if (this.options.dropdownContainer) {
+                        if (!this.isMobile) {
+                            window.removeEventListener("scroll", this._handleWindowScroll);
+                        }
+                        if (this.dropdown.parentNode) {
+                            this.dropdown.parentNode.removeChild(this.dropdown);
+                        }
+                    }
+                    this._trigger("close:countrydropdown");
+                }
+            }, {
+                key: "_scrollTo",
+                value: function _scrollTo(element, middle) {
+                    var container = this.countryList;
+                    // windowTop from https://stackoverflow.com/a/14384091/217866
+                    var windowTop = window.pageYOffset || document.documentElement.scrollTop;
+                    var containerHeight = container.offsetHeight;
+                    var containerTop = container.getBoundingClientRect().top + windowTop;
+                    var containerBottom = containerTop + containerHeight;
+                    var elementHeight = element.offsetHeight;
+                    var elementTop = element.getBoundingClientRect().top + windowTop;
+                    var elementBottom = elementTop + elementHeight;
+                    var newScrollTop = elementTop - containerTop + container.scrollTop;
+                    var middleOffset = containerHeight / 2 - elementHeight / 2;
+                    if (elementTop < containerTop) {
+                        // scroll up
+                        if (middle) {
+                            newScrollTop -= middleOffset;
+                        }
+                        container.scrollTop = newScrollTop;
+                    } else if (elementBottom > containerBottom) {
+                        // scroll down
+                        if (middle) {
+                            newScrollTop += middleOffset;
+                        }
+                        var heightDifference = containerHeight - elementHeight;
+                        container.scrollTop = newScrollTop - heightDifference;
+                    }
+                }
+            }, {
+                key: "_updateDialCode",
+                value: function _updateDialCode(newDialCodeBare) {
+                    var inputVal = this.telInput.value;
+                    // save having to pass this every time
+                    var newDialCode = "+".concat(newDialCodeBare);
+                    var newNumber;
+                    if (inputVal.charAt(0) === "+") {
+                        // there's a plus so we're dealing with a replacement
+                        var prevDialCode = this._getDialCode(inputVal);
+                        if (prevDialCode) {
+                            // current number contains a valid dial code, so replace it
+                            newNumber = inputVal.replace(prevDialCode, newDialCode);
+                        } else {
+                            // current number contains an invalid dial code, so ditch it
+                            // (no way to determine where the invalid dial code ends and the rest of the number begins)
+                            newNumber = newDialCode;
+                        }
+                        this.telInput.value = newNumber;
+                    } else if (this.options.autoInsertDialCode) {
+                        if (inputVal) {
+                            // there is an existing value with no dial code: prefix the new dial code
+                            newNumber = newDialCode + inputVal;
+                        } else {
+                            newNumber = newDialCode;
+                        }
+                        this.telInput.value = newNumber;
+                    }
+                }
+            }, {
+                key: "_getDialCode",
+                value: function _getDialCode(number, includeAreaCode) {
+                    var dialCode = "";
+                    // only interested in international numbers (starting with a plus)
+                    if (number.charAt(0) === "+") {
+                        var numericChars = "";
+                        // iterate over chars
+                        for (var i = 0; i < number.length; i++) {
+                            var c = number.charAt(i);
+                            // if char is number (https://stackoverflow.com/a/8935649/217866)
+                            if (!isNaN(parseInt(c, 10))) {
+                                numericChars += c;
+                                // if current numericChars make a valid dial code
+                                if (includeAreaCode) {
+                                    if (this.countryCodes[numericChars]) {
+                                        // store the actual raw string (useful for matching later)
+                                        dialCode = number.substr(0, i + 1);
+                                    }
+                                } else {
+                                    if (this.dialCodes[numericChars]) {
+                                        dialCode = number.substr(0, i + 1);
+                                        // if we're just looking for a dial code, we can break as soon as we find one
+                                        break;
+                                    }
+                                }
+                                // stop searching as soon as we can - in this case when we hit max len
+                                if (numericChars.length === this.countryCodeMaxLen) {
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    return dialCode;
+                }
+            }, {
+                key: "_getFullNumber",
+                value: function _getFullNumber() {
+                    var val = this.telInput.value.trim();
+                    var dialCode = this.selectedCountryData.dialCode;
+                    var prefix;
+                    var numericVal = this._getNumeric(val);
+                    if (this.options.separateDialCode && val.charAt(0) !== "+" && dialCode && numericVal) {
+                        // when using separateDialCode, it is visible so is effectively part of the typed number
+                        prefix = "+".concat(dialCode);
+                    } else {
+                        prefix = "";
+                    }
+                    return prefix + val;
+                }
+            }, {
+                key: "_beforeSetNumber",
+                value: function _beforeSetNumber(originalNumber) {
+                    var number = originalNumber;
+                    if (this.options.separateDialCode) {
+                        var dialCode = this._getDialCode(number);
+                        // if there is a valid dial code
+                        if (dialCode) {
+                            // in case _getDialCode returned an area code as well
+                            dialCode = "+".concat(this.selectedCountryData.dialCode);
+                            // a lot of numbers will have a space separating the dial code and the main number, and
+                            // some NANP numbers will have a hyphen e.g. +1 684-733-1234 - in both cases we want to get
+                            // rid of it
+                            // NOTE: don't just trim all non-numerics as may want to preserve an open parenthesis etc
+                            var start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
+                            number = number.substr(start);
+                        }
+                    }
+                    return this._cap(number);
+                }
+            }, {
+                key: "_triggerCountryChange",
+                value: function _triggerCountryChange() {
+                    this._trigger("countrychange");
+                }
+            }, {
+                key: "handleAutoCountry",
+                value: function handleAutoCountry() {
+                    if (this.options.initialCountry === "auto") {
+                        // we must set this even if there is an initial val in the input: in case the initial val is
+                        // invalid and they delete it - they should see their auto country
+                        this.defaultCountry = window.intlTelInputGlobals.autoCountry;
+                        // if there's no initial value in the input, then update the flag
+                        if (!this.telInput.value) {
+                            this.setCountry(this.defaultCountry);
+                        }
+                        this.resolveAutoCountryPromise();
+                    }
+                }
+            }, {
+                key: "handleUtils",
+                value: function handleUtils() {
+                    // if the request was successful
+                    if (window.intlTelInputUtils) {
+                        // if there's an initial value in the input, then format it
+                        if (this.telInput.value) {
+                            this._updateValFromNumber(this.telInput.value);
+                        }
+                        this._updatePlaceholder();
+                    }
+                    this.resolveUtilsScriptPromise();
+                }
+            }, {
+                key: "destroy",
+                value: function destroy() {
+                    var form = this.telInput.form;
+                    if (this.options.allowDropdown) {
+                        // make sure the dropdown is closed (and unbind listeners)
+                        this._closeDropdown();
+                        this.selectedFlag.removeEventListener("click", this._handleClickSelectedFlag);
+                        this.flagsContainer.removeEventListener("keydown", this._handleFlagsContainerKeydown);
+                        // label click hack
+                        var label = this._getClosestLabel();
+                        if (label) {
+                            label.removeEventListener("click", this._handleLabelClick);
+                        }
+                    }
+                    // unbind hiddenInput listeners
+                    if (this.hiddenInput && form) {
+                        form.removeEventListener("submit", this._handleHiddenInputSubmit);
+                    }
+                    // unbind autoInsertDialCode listeners
+                    if (this.options.autoInsertDialCode) {
+                        if (form) {
+                            form.removeEventListener("submit", this._handleSubmitOrBlurEvent);
+                        }
+                        this.telInput.removeEventListener("blur", this._handleSubmitOrBlurEvent);
+                    }
+                    // unbind key events, and cut/paste events
+                    this.telInput.removeEventListener("keyup", this._handleKeyupEvent);
+                    this.telInput.removeEventListener("cut", this._handleClipboardEvent);
+                    this.telInput.removeEventListener("paste", this._handleClipboardEvent);
+                    // remove attribute of id instance: data-intl-tel-input-id
+                    this.telInput.removeAttribute("data-intl-tel-input-id");
+                    // remove markup (but leave the original input)
+                    var wrapper = this.telInput.parentNode;
+                    wrapper.parentNode.insertBefore(this.telInput, wrapper);
+                    wrapper.parentNode.removeChild(wrapper);
+                    delete window.intlTelInputGlobals.instances[this.id];
+                }
+            }, {
+                key: "getExtension",
+                value: function getExtension() {
+                    if (window.intlTelInputUtils) {
+                        return intlTelInputUtils.getExtension(this._getFullNumber(), this.selectedCountryData.iso2);
+                    }
+                    return "";
+                }
+            }, {
+                key: "getNumber",
+                value: function getNumber(format) {
+                    if (window.intlTelInputUtils) {
+                        var iso2 = this.selectedCountryData.iso2;
+                        return intlTelInputUtils.formatNumber(this._getFullNumber(), iso2, format);
+                    }
+                    return "";
+                }
+            }, {
+                key: "getNumberType",
+                value: function getNumberType() {
+                    if (window.intlTelInputUtils) {
+                        return intlTelInputUtils.getNumberType(this._getFullNumber(), this.selectedCountryData.iso2);
+                    }
+                    return -99;
+                }
+            }, {
+                key: "getSelectedCountryData",
+                value: function getSelectedCountryData() {
+                    return this.selectedCountryData;
+                }
+            }, {
+                key: "getValidationError",
+                value: function getValidationError() {
+                    if (window.intlTelInputUtils) {
+                        var iso2 = this.selectedCountryData.iso2;
+                        return intlTelInputUtils.getValidationError(this._getFullNumber(), iso2);
+                    }
+                    return -99;
+                }
+            }, {
+                key: "isValidNumber",
+                value: function isValidNumber() {
+                    var val = this._getFullNumber().trim();
+                    return window.intlTelInputUtils ? intlTelInputUtils.isValidNumber(val, this.selectedCountryData.iso2) : null;
+                }
+            }, {
+                key: "isPossibleNumber",
+                value: function isPossibleNumber() {
+                    var val = this._getFullNumber().trim();
+                    return window.intlTelInputUtils ? intlTelInputUtils.isPossibleNumber(val, this.selectedCountryData.iso2) : null;
+                }
+            }, {
+                key: "setCountry",
+                value: function setCountry(originalCountryCode) {
+                    var countryCode = originalCountryCode.toLowerCase();
+                    // check if already selected
+                    if (this.selectedCountryData.iso2 !== countryCode) {
+                        this._setFlag(countryCode);
+                        this._updateDialCode(this.selectedCountryData.dialCode);
+                        this._triggerCountryChange();
+                    }
+                }
+            }, {
+                key: "setNumber",
+                value: function setNumber(number) {
+                    // we must update the flag first, which updates this.selectedCountryData, which is used for
+                    // formatting the number before displaying it
+                    var flagChanged = this._updateFlagFromNumber(number);
+                    this._updateValFromNumber(number);
+                    if (flagChanged) {
+                        this._triggerCountryChange();
+                    }
+                }
+            }, {
+                key: "setPlaceholderNumberType",
+                value: function setPlaceholderNumberType(type) {
+                    this.options.placeholderNumberType = type;
+                    this._updatePlaceholder();
+                }
+            } ]);
+            return Iti;
+        }();
+        /********************
+ *  STATIC METHODS
+ ********************/
+        // get the country data object
+        intlTelInputGlobals.getCountryData = function() {
+            return allCountries;
+        };
+        // inject a <script> element to load utils.js
+        var injectScript = function injectScript(path, handleSuccess, handleFailure) {
+            // inject a new script element into the page
+            var script = document.createElement("script");
+            script.onload = function() {
+                forEachInstance("handleUtils");
+                if (handleSuccess) {
+                    handleSuccess();
+                }
+            };
+            script.onerror = function() {
+                forEachInstance("rejectUtilsScriptPromise");
+                if (handleFailure) {
+                    handleFailure();
+                }
+            };
+            script.className = "iti-load-utils";
+            script.async = true;
+            script.src = path;
+            document.body.appendChild(script);
+        };
+        // load the utils script
+        intlTelInputGlobals.loadUtils = function(path) {
+            // 2 options:
+            // 1) not already started loading (start)
+            // 2) already started loading (do nothing - just wait for the onload callback to fire, which will
+            // trigger handleUtils on all instances, invoking their resolveUtilsScriptPromise functions)
+            if (!window.intlTelInputUtils && !window.intlTelInputGlobals.startedLoadingUtilsScript) {
+                // only do this once
+                window.intlTelInputGlobals.startedLoadingUtilsScript = true;
+                // if we have promises, then return a promise
+                if (typeof Promise !== "undefined") {
+                    return new Promise(function(resolve, reject) {
+                        return injectScript(path, resolve, reject);
+                    });
+                }
+                injectScript(path);
+            }
+            return null;
+        };
+        // default options
+        intlTelInputGlobals.defaults = defaults;
+        // version
+        intlTelInputGlobals.version = "18.2.1";
+        // convenience wrapper
+        return function(input, options) {
+            var iti = new Iti(input, options);
+            iti._init();
+            input.setAttribute("data-intl-tel-input-id", iti.id);
+            window.intlTelInputGlobals.instances[iti.id] = iti;
+            return iti;
+        };
+    }();
+});
+});
+
+/**
+ * Exposing intl-tel-input as a component
+ */
+var intlTelInput = intlTelInput$1;
+
+const sasInputTelCss = ".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0 !important;margin-bottom:0 !important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0, 0, 0, 0.2);background-color:white;border:1px solid #ccc;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:rgba(0, 0, 0, 0.05)}.iti__flag-box,.iti__country-name{margin-right:6px}[dir=rtl] .iti__flag-box,[dir=rtl] .iti__country-name{margin-right:0;margin-left:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input,[dir=rtl] .iti--allow-dropdown input[type=text],[dir=rtl] .iti--allow-dropdown input[type=tel],[dir=rtl] .iti--separate-dial-code input,[dir=rtl] .iti--separate-dial-code input[type=text],[dir=rtl] .iti--separate-dial-code input[type=tel]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--separate-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:rgba(0, 0, 0, 0.05)}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:rgba(0, 0, 0, 0.05)}.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{top:30px;bottom:30px;left:30px;right:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:12px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cq{height:12px;background-position:-1115px 0px}.iti__flag.iti__cr{height:12px;background-position:-1137px 0px}.iti__flag.iti__cu{height:10px;background-position:-1159px 0px}.iti__flag.iti__cv{height:12px;background-position:-1181px 0px}.iti__flag.iti__cw{height:14px;background-position:-1203px 0px}.iti__flag.iti__cx{height:10px;background-position:-1225px 0px}.iti__flag.iti__cy{height:14px;background-position:-1247px 0px}.iti__flag.iti__cz{height:14px;background-position:-1269px 0px}.iti__flag.iti__de{height:12px;background-position:-1291px 0px}.iti__flag.iti__dg{height:10px;background-position:-1313px 0px}.iti__flag.iti__dj{height:14px;background-position:-1335px 0px}.iti__flag.iti__dk{height:15px;background-position:-1357px 0px}.iti__flag.iti__dm{height:10px;background-position:-1379px 0px}.iti__flag.iti__do{height:14px;background-position:-1401px 0px}.iti__flag.iti__dz{height:14px;background-position:-1423px 0px}.iti__flag.iti__ea{height:14px;background-position:-1445px 0px}.iti__flag.iti__ec{height:14px;background-position:-1467px 0px}.iti__flag.iti__ee{height:13px;background-position:-1489px 0px}.iti__flag.iti__eg{height:14px;background-position:-1511px 0px}.iti__flag.iti__eh{height:10px;background-position:-1533px 0px}.iti__flag.iti__er{height:10px;background-position:-1555px 0px}.iti__flag.iti__es{height:14px;background-position:-1577px 0px}.iti__flag.iti__et{height:10px;background-position:-1599px 0px}.iti__flag.iti__eu{height:14px;background-position:-1621px 0px}.iti__flag.iti__ez{height:14px;background-position:-1643px 0px}.iti__flag.iti__fi{height:12px;background-position:-1665px 0px}.iti__flag.iti__fj{height:10px;background-position:-1687px 0px}.iti__flag.iti__fk{height:10px;background-position:-1709px 0px}.iti__flag.iti__fm{height:11px;background-position:-1731px 0px}.iti__flag.iti__fo{height:15px;background-position:-1753px 0px}.iti__flag.iti__fr{height:14px;background-position:-1775px 0px}.iti__flag.iti__fx{height:14px;background-position:-1797px 0px}.iti__flag.iti__ga{height:15px;background-position:-1819px 0px}.iti__flag.iti__gb{height:10px;background-position:-1841px 0px}.iti__flag.iti__gd{height:12px;background-position:-1863px 0px}.iti__flag.iti__ge{height:14px;background-position:-1885px 0px}.iti__flag.iti__gf{height:14px;background-position:-1907px 0px}.iti__flag.iti__gg{height:14px;background-position:-1929px 0px}.iti__flag.iti__gh{height:14px;background-position:-1951px 0px}.iti__flag.iti__gi{height:10px;background-position:-1973px 0px}.iti__flag.iti__gl{height:14px;background-position:-1995px 0px}.iti__flag.iti__gm{height:14px;background-position:-2017px 0px}.iti__flag.iti__gn{height:14px;background-position:-2039px 0px}.iti__flag.iti__gp{height:14px;background-position:-2061px 0px}.iti__flag.iti__gq{height:14px;background-position:-2083px 0px}.iti__flag.iti__gr{height:14px;background-position:-2105px 0px}.iti__flag.iti__gs{height:10px;background-position:-2127px 0px}.iti__flag.iti__gt{height:13px;background-position:-2149px 0px}.iti__flag.iti__gu{height:11px;background-position:-2171px 0px}.iti__flag.iti__gw{height:10px;background-position:-2193px 0px}.iti__flag.iti__gy{height:12px;background-position:-2215px 0px}.iti__flag.iti__hk{height:14px;background-position:-2237px 0px}.iti__flag.iti__hm{height:10px;background-position:-2259px 0px}.iti__flag.iti__hn{height:10px;background-position:-2281px 0px}.iti__flag.iti__hr{height:10px;background-position:-2303px 0px}.iti__flag.iti__ht{height:12px;background-position:-2325px 0px}.iti__flag.iti__hu{height:10px;background-position:-2347px 0px}.iti__flag.iti__ic{height:14px;background-position:-2369px 0px}.iti__flag.iti__id{height:14px;background-position:-2391px 0px}.iti__flag.iti__ie{height:10px;background-position:-2413px 0px}.iti__flag.iti__il{height:15px;background-position:-2435px 0px}.iti__flag.iti__im{height:10px;background-position:-2457px 0px}.iti__flag.iti__in{height:14px;background-position:-2479px 0px}.iti__flag.iti__io{height:10px;background-position:-2501px 0px}.iti__flag.iti__iq{height:14px;background-position:-2523px 0px}.iti__flag.iti__ir{height:12px;background-position:-2545px 0px}.iti__flag.iti__is{height:15px;background-position:-2567px 0px}.iti__flag.iti__it{height:14px;background-position:-2589px 0px}.iti__flag.iti__je{height:12px;background-position:-2611px 0px}.iti__flag.iti__jm{height:10px;background-position:-2633px 0px}.iti__flag.iti__jo{height:10px;background-position:-2655px 0px}.iti__flag.iti__jp{height:14px;background-position:-2677px 0px}.iti__flag.iti__ke{height:14px;background-position:-2699px 0px}.iti__flag.iti__kg{height:12px;background-position:-2721px 0px}.iti__flag.iti__kh{height:13px;background-position:-2743px 0px}.iti__flag.iti__ki{height:10px;background-position:-2765px 0px}.iti__flag.iti__km{height:12px;background-position:-2787px 0px}.iti__flag.iti__kn{height:14px;background-position:-2809px 0px}.iti__flag.iti__kp{height:10px;background-position:-2831px 0px}.iti__flag.iti__kr{height:14px;background-position:-2853px 0px}.iti__flag.iti__kw{height:10px;background-position:-2875px 0px}.iti__flag.iti__ky{height:10px;background-position:-2897px 0px}.iti__flag.iti__kz{height:10px;background-position:-2919px 0px}.iti__flag.iti__la{height:14px;background-position:-2941px 0px}.iti__flag.iti__lb{height:14px;background-position:-2963px 0px}.iti__flag.iti__lc{height:10px;background-position:-2985px 0px}.iti__flag.iti__li{height:12px;background-position:-3007px 0px}.iti__flag.iti__lk{height:10px;background-position:-3029px 0px}.iti__flag.iti__lr{height:11px;background-position:-3051px 0px}.iti__flag.iti__ls{height:14px;background-position:-3073px 0px}.iti__flag.iti__lt{height:12px;background-position:-3095px 0px}.iti__flag.iti__lu{height:12px;background-position:-3117px 0px}.iti__flag.iti__lv{height:10px;background-position:-3139px 0px}.iti__flag.iti__ly{height:10px;background-position:-3161px 0px}.iti__flag.iti__ma{height:14px;background-position:-3183px 0px}.iti__flag.iti__mc{height:15px;background-position:-3205px 0px}.iti__flag.iti__md{height:10px;background-position:-3226px 0px}.iti__flag.iti__me{height:10px;background-position:-3248px 0px}.iti__flag.iti__mf{height:14px;background-position:-3270px 0px}.iti__flag.iti__mg{height:14px;background-position:-3292px 0px}.iti__flag.iti__mh{height:11px;background-position:-3314px 0px}.iti__flag.iti__mk{height:10px;background-position:-3336px 0px}.iti__flag.iti__ml{height:14px;background-position:-3358px 0px}.iti__flag.iti__mm{height:14px;background-position:-3380px 0px}.iti__flag.iti__mn{height:10px;background-position:-3402px 0px}.iti__flag.iti__mo{height:14px;background-position:-3424px 0px}.iti__flag.iti__mp{height:10px;background-position:-3446px 0px}.iti__flag.iti__mq{height:14px;background-position:-3468px 0px}.iti__flag.iti__mr{height:14px;background-position:-3490px 0px}.iti__flag.iti__ms{height:10px;background-position:-3512px 0px}.iti__flag.iti__mt{height:14px;background-position:-3534px 0px}.iti__flag.iti__mu{height:14px;background-position:-3556px 0px}.iti__flag.iti__mv{height:14px;background-position:-3578px 0px}.iti__flag.iti__mw{height:14px;background-position:-3600px 0px}.iti__flag.iti__mx{height:12px;background-position:-3622px 0px}.iti__flag.iti__my{height:10px;background-position:-3644px 0px}.iti__flag.iti__mz{height:14px;background-position:-3666px 0px}.iti__flag.iti__na{height:14px;background-position:-3688px 0px}.iti__flag.iti__nc{height:10px;background-position:-3710px 0px}.iti__flag.iti__ne{height:15px;background-position:-3732px 0px}.iti__flag.iti__nf{height:10px;background-position:-3752px 0px}.iti__flag.iti__ng{height:10px;background-position:-3774px 0px}.iti__flag.iti__ni{height:12px;background-position:-3796px 0px}.iti__flag.iti__nl{height:14px;background-position:-3818px 0px}.iti__flag.iti__no{height:15px;background-position:-3840px 0px}.iti__flag.iti__np{height:15px;background-position:-3862px 0px}.iti__flag.iti__nr{height:10px;background-position:-3877px 0px}.iti__flag.iti__nu{height:10px;background-position:-3899px 0px}.iti__flag.iti__nz{height:10px;background-position:-3921px 0px}.iti__flag.iti__om{height:10px;background-position:-3943px 0px}.iti__flag.iti__pa{height:14px;background-position:-3965px 0px}.iti__flag.iti__pe{height:14px;background-position:-3987px 0px}.iti__flag.iti__pf{height:14px;background-position:-4009px 0px}.iti__flag.iti__pg{height:15px;background-position:-4031px 0px}.iti__flag.iti__ph{height:10px;background-position:-4053px 0px}.iti__flag.iti__pk{height:14px;background-position:-4075px 0px}.iti__flag.iti__pl{height:13px;background-position:-4097px 0px}.iti__flag.iti__pm{height:14px;background-position:-4119px 0px}.iti__flag.iti__pn{height:10px;background-position:-4141px 0px}.iti__flag.iti__pr{height:14px;background-position:-4163px 0px}.iti__flag.iti__ps{height:10px;background-position:-4185px 0px}.iti__flag.iti__pt{height:14px;background-position:-4207px 0px}.iti__flag.iti__pw{height:13px;background-position:-4229px 0px}.iti__flag.iti__py{height:11px;background-position:-4251px 0px}.iti__flag.iti__qa{height:8px;background-position:-4273px 0px}.iti__flag.iti__re{height:14px;background-position:-4295px 0px}.iti__flag.iti__ro{height:14px;background-position:-4317px 0px}.iti__flag.iti__rs{height:14px;background-position:-4339px 0px}.iti__flag.iti__ru{height:14px;background-position:-4361px 0px}.iti__flag.iti__rw{height:14px;background-position:-4383px 0px}.iti__flag.iti__sa{height:14px;background-position:-4405px 0px}.iti__flag.iti__sb{height:10px;background-position:-4427px 0px}.iti__flag.iti__sc{height:10px;background-position:-4449px 0px}.iti__flag.iti__sd{height:10px;background-position:-4471px 0px}.iti__flag.iti__se{height:13px;background-position:-4493px 0px}.iti__flag.iti__sg{height:14px;background-position:-4515px 0px}.iti__flag.iti__sh{height:10px;background-position:-4537px 0px}.iti__flag.iti__si{height:10px;background-position:-4559px 0px}.iti__flag.iti__sj{height:15px;background-position:-4581px 0px}.iti__flag.iti__sk{height:14px;background-position:-4603px 0px}.iti__flag.iti__sl{height:14px;background-position:-4625px 0px}.iti__flag.iti__sm{height:15px;background-position:-4647px 0px}.iti__flag.iti__sn{height:14px;background-position:-4669px 0px}.iti__flag.iti__so{height:14px;background-position:-4691px 0px}.iti__flag.iti__sr{height:14px;background-position:-4713px 0px}.iti__flag.iti__ss{height:10px;background-position:-4735px 0px}.iti__flag.iti__st{height:10px;background-position:-4757px 0px}.iti__flag.iti__su{height:10px;background-position:-4779px 0px}.iti__flag.iti__sv{height:12px;background-position:-4801px 0px}.iti__flag.iti__sx{height:14px;background-position:-4823px 0px}.iti__flag.iti__sy{height:14px;background-position:-4845px 0px}.iti__flag.iti__sz{height:14px;background-position:-4867px 0px}.iti__flag.iti__ta{height:10px;background-position:-4889px 0px}.iti__flag.iti__tc{height:10px;background-position:-4911px 0px}.iti__flag.iti__td{height:14px;background-position:-4933px 0px}.iti__flag.iti__tf{height:14px;background-position:-4955px 0px}.iti__flag.iti__tg{height:13px;background-position:-4977px 0px}.iti__flag.iti__th{height:14px;background-position:-4999px 0px}.iti__flag.iti__tj{height:10px;background-position:-5021px 0px}.iti__flag.iti__tk{height:10px;background-position:-5043px 0px}.iti__flag.iti__tl{height:10px;background-position:-5065px 0px}.iti__flag.iti__tm{height:14px;background-position:-5087px 0px}.iti__flag.iti__tn{height:14px;background-position:-5109px 0px}.iti__flag.iti__to{height:10px;background-position:-5131px 0px}.iti__flag.iti__tr{height:14px;background-position:-5153px 0px}.iti__flag.iti__tt{height:12px;background-position:-5175px 0px}.iti__flag.iti__tv{height:10px;background-position:-5197px 0px}.iti__flag.iti__tw{height:14px;background-position:-5219px 0px}.iti__flag.iti__tz{height:14px;background-position:-5241px 0px}.iti__flag.iti__ua{height:14px;background-position:-5263px 0px}.iti__flag.iti__ug{height:14px;background-position:-5285px 0px}.iti__flag.iti__uk{height:10px;background-position:-5307px 0px}.iti__flag.iti__um{height:11px;background-position:-5329px 0px}.iti__flag.iti__un{height:14px;background-position:-5351px 0px}.iti__flag.iti__us{height:11px;background-position:-5373px 0px}.iti__flag.iti__uy{height:14px;background-position:-5395px 0px}.iti__flag.iti__uz{height:10px;background-position:-5417px 0px}.iti__flag.iti__va{height:15px;background-position:-5439px 0px}.iti__flag.iti__vc{height:14px;background-position:-5456px 0px}.iti__flag.iti__ve{height:14px;background-position:-5478px 0px}.iti__flag.iti__vg{height:10px;background-position:-5500px 0px}.iti__flag.iti__vi{height:14px;background-position:-5522px 0px}.iti__flag.iti__vn{height:14px;background-position:-5544px 0px}.iti__flag.iti__vu{height:12px;background-position:-5566px 0px}.iti__flag.iti__wf{height:14px;background-position:-5588px 0px}.iti__flag.iti__ws{height:10px;background-position:-5610px 0px}.iti__flag.iti__xk{height:15px;background-position:-5632px 0px}.iti__flag.iti__ye{height:14px;background-position:-5654px 0px}.iti__flag.iti__yt{height:14px;background-position:-5676px 0px}.iti__flag.iti__za{height:14px;background-position:-5698px 0px}.iti__flag.iti__zm{height:14px;background-position:-5720px 0px}.iti__flag.iti__zw{height:10px;background-position:-5742px 0px}.iti__flag{height:15px;box-shadow:0px 0px 1px 0px #888;background-image:url(\"../img/flags.png?1\");background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-image:url(\"../img/flags@2x.png?1\")}}.iti__flag.iti__np{background-color:transparent}:host{display:flex;flex-grow:1;padding-left:3px;padding-right:3px}:host .iti{flex-grow:1}:host .iti__flag{background-image:url(\"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/img/flags.png\")}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){:host .iti__flag{background-image:url(\"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/img/flags@2x.png\")}}:host .iti--allow-dropdown{display:inline-flex}:host .iti__flag-container{padding:0}:host .iti__flag-container .iti__selected-flag:focus{outline:none}:host #phone{border:none;flex-grow:1;box-sizing:border-box;color:var(--s-500);font-family:roboto, \"Font Awesome 5 Pro\";font-size:14px;text-overflow:ellipsis;width:100%}:host #phone2Container{display:none}:host #phone:focus-within{outline:none}:host ::-webkit-input-placeholder{color:var(--s-400)}:host :-ms-input-placeholder{color:var(--s-400)}:host ::placeholder{color:var(--s-400)}";
+
+let SasInputTel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inputTelUpdate = index.createEvent(this, "inputTelUpdate", 7);
+  }
+  componentDidLoad() {
+    var _a, _b, _c, _d;
+    const input = this.el.shadowRoot.querySelector("#phone");
+    const placeholder = this.el.getAttribute('data-placeholder');
+    if (Boolean(placeholder)) {
+      input.placeholder = placeholder;
+    }
+    this.iti = intlTelInput(input, {
+      initialCountry: (_a = this.el.getAttribute('data-country')) !== null && _a !== void 0 ? _a : 'au',
+      placeholderNumberType: (_b = this.el.getAttribute('data-placeholderNumberType')) !== null && _b !== void 0 ? _b : 'MOBILE',
+      preferredCountries: ['au', 'ca', 'gb', 'nz', 'us'],
+      utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js',
+    });
+    const thisClone = this;
+    this.iti.promise.then(() => {
+      if (Boolean(thisClone.el.getAttribute('data-value'))) {
+        thisClone.update(thisClone.el.getAttribute('data-value'));
+      }
+    });
+    input.addEventListener('countrychange', function () {
+      thisClone.update();
+    });
+    input.addEventListener('input', function () {
+      thisClone.update();
+    });
+    const input2 = this.el.shadowRoot.querySelector("#phone2");
+    this.iti2 = intlTelInput(input2, {
+      initialCountry: (_c = this.el.getAttribute('data-country')) !== null && _c !== void 0 ? _c : 'au',
+      nationalMode: false,
+      placeholderNumberType: (_d = this.el.getAttribute('data-placeholderNumberType')) !== null && _d !== void 0 ? _d : 'MOBILE',
+      preferredCountries: ['au', 'ca', 'gb', 'nz', 'us'],
+      utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js',
+    });
+  }
+  /**
+   * Check the componnet validity (only for components internal use)
+   */
+  async getValidity() {
+    return this.iti.isPossibleNumber();
+  }
+  /**
+   * Set country (only for components internal use)
+   */
+  async setCountry(country) {
+    this.iti.setCountry(country);
+  }
+  /**
+   * Set placeholder (only for components internal use)
+   */
+  async setPlaceholder(type) {
+    this.iti.setPlaceholderNumberType(type);
+  }
+  /**
+   * Set value and trigger inputTelUpdate event programmatically (only for components internal use)
+   */
+  async update(value = 'default value used internal') {
+    const input = this.el.shadowRoot.querySelector("#phone");
+    if (value != 'default value used internal') {
+      input.value = this.getFilteredValue(value);
+    }
+    else {
+      input.value = this.getFilteredValue(input.value);
+    }
+    let isValidNumber = false;
+    // only check format
+    // parent input component will check value missing or not
+    if (this.iti.isPossibleNumber() || input.value === '') {
+      this.iti.setNumber(input.value);
+      isValidNumber = true;
+    }
+    if (input.value.length === 3) {
+      isValidNumber = true;
+    }
+    const object = {
+      country: this.iti.getSelectedCountryData().iso2,
+      value: this.getFormatNumber(isValidNumber),
+      isValidNumber: isValidNumber,
+    };
+    this.inputTelUpdate.emit(object);
+  }
+  getFilteredValue(value) {
+    return value.replace(/[^0-9\+]/g, '');
+  }
+  getFormatNumber(isValidNumber) {
+    const input = this.el.shadowRoot.querySelector("#phone");
+    const input2 = this.el.shadowRoot.querySelector("#phone2");
+    if (isValidNumber) {
+      const internationalNumber = this.iti.getNumber();
+      this.iti2.setNumber(internationalNumber);
+      return input2.value;
+    }
+    return input.value;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("input", { id: "phone", type: "tel" }), index.h("div", { id: "phone2Container" }, index.h("input", { id: "phone2", type: "tel" }))));
+  }
+  get el() { return index.getElement(this); }
+};
+SasInputTel.style = sasInputTelCss;
+
+const sasInputTextareaCss = ":host{display:flex;flex-grow:1}:host .container{display:flex;flex-grow:1;position:relative}:host .container:after{content:attr(data-count);position:absolute;right:0;bottom:7px;color:var(--s-400);font-size:12px;line-height:24px}:host textarea{border:none;color:var(--s-500);font-family:roboto, \"Font Awesome 6 Pro\";font-size:14px;text-overflow:ellipsis;flex-grow:1;margin:5px 25px 5px 10px;resize:none;line-height:24px;position:relative}:host textarea:focus{outline:none}:host .hidden-textarea{position:absolute;opacity:0;box-sizing:border-box;left:0;bottom:0;width:calc(100% - 35px)}";
+
+let SasInputTextarea = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inputTextareaUpdate = index.createEvent(this, "inputTextareaUpdate", 7);
+    this.lineHeight = 24;
+    this.baseScrollHeight = -1;
+    /**
+     * Placeholder
+     */
+    this.placeholder = '';
+    /**
+     * Maximum number of characters allowed
+     */
+    this.maxlength = 1000;
+    /**
+      * Minimum number of characters allowed
+      */
+    this.minlength = 0;
+    /**
+     * Value
+     */
+    this.value = '';
+    this.handleInput = (event) => {
+      this.resize();
+      this.inputTextareaUpdate.emit(event.target.value);
+    };
+  }
+  watchHandler() {
+    const element = this.el.shadowRoot.querySelector('.textarea');
+    element.value = this.value;
+    this.resize();
+  }
+  componentDidLoad() {
+    this.resize();
+  }
+  resize() {
+    if (this.baseScrollHeight === -1) {
+      this.baseScrollHeight = this.getBaseScrollHeight();
+    }
+    const currentScrollHeight = this.getCurrentScrollHeight();
+    const rows = Math.ceil((currentScrollHeight - this.baseScrollHeight) / this.lineHeight) + 1;
+    const element = this.el.shadowRoot.querySelector('.textarea');
+    element.rows = rows;
+  }
+  getBaseScrollHeight() {
+    const element = this.el.shadowRoot.querySelector('.hidden-textarea');
+    element.rows = 1;
+    element.value = '';
+    return element.scrollHeight;
+  }
+  getCurrentScrollHeight() {
+    const element = this.el.shadowRoot.querySelector('.hidden-textarea');
+    element.value = this.value;
+    const currentScrollHeight = element.scrollHeight;
+    element.value = '';
+    return currentScrollHeight;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "container", "data-count": Boolean(this.maxlength) && Boolean(this.value) ? this.maxlength - this.value.length : '' }, index.h("textarea", { class: "hidden-textarea", rows: 1 }), index.h("textarea", { class: "textarea", rows: 1, placeholder: this.placeholder, maxlength: this.maxlength, minlength: this.minlength, value: this.value, onInput: this.handleInput }))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["watchHandler"]
+  }; }
+};
+SasInputTextarea.style = sasInputTextareaCss;
+
+exports.sas_form_input_template = SasFormInputTemplate;
+exports.sas_input = SasInput;
+exports.sas_input_tel = SasInputTel;
+exports.sas_input_textarea = SasInputTextarea;