@theseam/ui-common 0.4.30 → 1.0.0-beta.0

package/fesm2022/theseam-ui-common-tel-input.mjs

@@ -0,0 +1,843 @@
+import { __decorate } from 'tslib';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { DOCUMENT, Input, HostBinding, Optional, Inject, Self, Directive, EventEmitter, forwardRef, HostListener, ViewChild, Output, ChangeDetectionStrategy, Component, Pipe, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { UntypedFormControl, NgControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subject, merge, fromEvent, of, defer } from 'rxjs';
+import { tap, last, switchMap, takeUntil, auditTime, map } from 'rxjs/operators';
+import { InputBoolean } from '@theseam/ui-common/core';
+import * as i3 from '@theseam/ui-common/form-field';
+import { TheSeamFormFieldModule, InputDirective } from '@theseam/ui-common/form-field';
+import { waitOnConditionAsync, notNullOrUndefined, toggleAttribute, getAttribute, hasAttribute } from '@theseam/ui-common/utils';
+import intlTelInput from 'intl-tel-input';
+import * as i1 from '@theseam/ui-common/services';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/cdk/a11y';
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+//
+// NOTE: These types are mainly for providing types to 'intl-tel-input', because
+// the only published types I could find were incomplete. Some types are
+// missing, because they were not necessary for this library. I don't indend
+// this to be a perfect types for 'intl-tel-input', so as long as they are
+// compatible they may be slightly altered or extended to fit this library
+// better.
+//
+/**
+ * Partial types for intl-tel-input-utils
+ */
+// eslint-disable-next-line @typescript-eslint/no-namespace
+var intlTelInputUtils;
+(function (intlTelInputUtils) {
+    let numberFormat;
+    (function (numberFormat) {
+        numberFormat[numberFormat["E164"] = 0] = "E164";
+        numberFormat[numberFormat["INTERNATIONAL"] = 1] = "INTERNATIONAL";
+        numberFormat[numberFormat["NATIONAL"] = 2] = "NATIONAL";
+        numberFormat[numberFormat["RFC3966"] = 3] = "RFC3966";
+    })(numberFormat = intlTelInputUtils.numberFormat || (intlTelInputUtils.numberFormat = {}));
+    let numberType;
+    (function (numberType) {
+        numberType[numberType["FIXED_LINE"] = 0] = "FIXED_LINE";
+        numberType[numberType["MOBILE"] = 1] = "MOBILE";
+        numberType[numberType["FIXED_LINE_OR_MOBILE"] = 2] = "FIXED_LINE_OR_MOBILE";
+        numberType[numberType["TOLL_FREE"] = 3] = "TOLL_FREE";
+        numberType[numberType["PREMIUM_RATE"] = 4] = "PREMIUM_RATE";
+        numberType[numberType["SHARED_COST"] = 5] = "SHARED_COST";
+        numberType[numberType["VOIP"] = 6] = "VOIP";
+        numberType[numberType["PERSONAL_NUMBER"] = 7] = "PERSONAL_NUMBER";
+        numberType[numberType["PAGER"] = 8] = "PAGER";
+        numberType[numberType["UAN"] = 9] = "UAN";
+        numberType[numberType["VOICEMAIL"] = 10] = "VOICEMAIL";
+        numberType[numberType["UNKNOWN"] = -1] = "UNKNOWN";
+    })(numberType = intlTelInputUtils.numberType || (intlTelInputUtils.numberType = {}));
+    let validationError;
+    (function (validationError) {
+        validationError[validationError["IS_POSSIBLE"] = 0] = "IS_POSSIBLE";
+        validationError[validationError["INVALID_COUNTRY_CODE"] = 1] = "INVALID_COUNTRY_CODE";
+        validationError[validationError["TOO_SHORT"] = 2] = "TOO_SHORT";
+        validationError[validationError["TOO_LONG"] = 3] = "TOO_LONG";
+        validationError[validationError["NOT_A_NUMBER"] = 4] = "NOT_A_NUMBER";
+    })(validationError = intlTelInputUtils.validationError || (intlTelInputUtils.validationError = {}));
+})(intlTelInputUtils || (intlTelInputUtils = {}));
+/**
+ * Initialise the plugin with optional options.
+ * @param options options that can be provided during initialization.
+ */
+function IntlTelInputFn(node, options) {
+    return intlTelInput(node, options);
+}
+
+const TEL_INPUT_ASSETS_PATH = 'assets/vendor/intl-tel-input';
+const TEL_INPUT_STYLES = `
+  .iti { width: 100%; }
+
+  .iti__flag {background-image: url("${TEL_INPUT_ASSETS_PATH}/img/flags.png");}
+
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .iti__flag {background-image: url("${TEL_INPUT_ASSETS_PATH}/img/flags@2x.png");}
+  }
+
+  .iti__country-list {
+    /* There is a bug that is causing the 'z-index: 2' from ng-select to conflict with this dropdown container. */
+    z-index: 3;
+  }
+`;
+const TEL_INPUT_STYLESHEET_PATH = `${TEL_INPUT_ASSETS_PATH}/css/intlTelInput.min.css`;
+const TEL_INPUT_UTILS_PATH = `${TEL_INPUT_ASSETS_PATH}/js/utils.js`;
+
+/**
+ * Add a country code to this.countryCodes.
+ *
+ * Based on: https://github.com/jackocnr/intl-tel-input/blob/4fe25fcf142c341a85b7b15cc307d66afb8573a3/src/js/intlTelInput.js#L197
+ */
+function addCountryCode(data, iso2, countryCode, priority) {
+    if (countryCode.length > data.countryCodeMaxLen) {
+        data.countryCodeMaxLen = countryCode.length;
+    }
+    if (!Object.prototype.hasOwnProperty.call(data.countryCodes, countryCode)) {
+        data.countryCodes[countryCode] = [];
+    }
+    // bail if we already have this country for this countryCode
+    for (const code of data.countryCodes[countryCode]) {
+        if (code === iso2) {
+            return;
+        }
+    }
+    // check for undefined as 0 is falsy
+    const index = (priority !== undefined) ? priority : data.countryCodes[countryCode].length;
+    data.countryCodes[countryCode][index] = iso2;
+}
+
+const TelInputNumberFormatName = {
+    'E164': intlTelInputUtils.numberFormat.E164,
+    'INTERNATIONAL': intlTelInputUtils.numberFormat.INTERNATIONAL,
+    'NATIONAL': intlTelInputUtils.numberFormat.NATIONAL,
+    'RFC3966': intlTelInputUtils.numberFormat.RFC3966
+};
+
+const THESEAM_DEFAULT_PHONE_NUMBER_FORMAT = intlTelInputUtils.numberFormat.INTERNATIONAL;
+function coercePhoneNumberFormat(format, defaultFormat = THESEAM_DEFAULT_PHONE_NUMBER_FORMAT) {
+    let res = defaultFormat;
+    if (typeof format === 'string') {
+        const _format = TelInputNumberFormatName[`${format}`.trim().toUpperCase()];
+        res = (_format === undefined || _format === null) ? defaultFormat : _format;
+    }
+    else if (typeof format === 'number') {
+        // We could check for a number range, but I think it is safer to assume it's
+        // valid if a number was provided. A number most likely means the value came
+        // from using the enum and I don't want to accidentaly exclude a format that
+        // we don't have documented.
+        //
+        // NOTE: We may want to limit it to specific numbers though and assume that
+        // potentialy excluded formats are not intended to be used by this library.
+        res = format;
+    }
+    return res;
+}
+
+function getNumeric(s) {
+    return s.replace(/\D/g, '');
+}
+function getCountryCode(data, dialCode) {
+    const _countryCodes = data.countryCodes[getNumeric(dialCode)];
+    // Refer to `_setInitialState` to get libraries default logic
+    return (_countryCodes === undefined || _countryCodes === null || _countryCodes.length === 0) ? 'us' : _countryCodes[0];
+}
+
+/**
+ * Try and extract a valid international dial code from a full telephone number.
+ *
+ * NOTE: returns the raw string inc plus character and any whitespace/dots etc.
+ *
+ * Based on: https://github.com/jackocnr/intl-tel-input/blob/4fe25fcf142c341a85b7b15cc307d66afb8573a3/src/js/intlTelInput.js#L1161
+ */
+function getDialCode(data, number, includeAreaCode = false) {
+    // console.log('getDialCode', number, includeAreaCode)
+    // const data = processCountryCodes(globalIntlTelInputGlobals().getCountryData() as TelInputCountryData[])
+    let dialCode = '';
+    // only interested in international numbers (starting with a plus)
+    if (number.charAt(0) === '+') {
+        let numericChars = '';
+        // iterate over chars
+        for (let i = 0; i < number.length; i++) {
+            const 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 (data.countryCodes[numericChars]) {
+                        // store the actual raw string (useful for matching later)
+                        dialCode = number.substr(0, i + 1);
+                    }
+                }
+                else {
+                    if (data.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 === data.countryCodeMaxLen) {
+                    break;
+                }
+            }
+        }
+    }
+    // console.log('getDialCode return', dialCode)
+    return dialCode;
+}
+
+function globalIntlTelInputGlobals() {
+    return window.intlTelInputGlobals;
+}
+
+function globalIntlTelInputUtils() {
+    return window.intlTelInputUtils;
+}
+
+function getIntlTelInputUtils() {
+    if (globalIntlTelInputUtils()) {
+        return Promise.resolve(globalIntlTelInputUtils());
+    }
+    if (globalIntlTelInputGlobals().startedLoadingUtilsScript) {
+        return waitOnConditionAsync(() => notNullOrUndefined(globalIntlTelInputUtils()), 5000)
+            .then(() => globalIntlTelInputUtils());
+    }
+    return globalIntlTelInputGlobals().loadUtils(TEL_INPUT_UTILS_PATH)
+        .then(() => waitOnConditionAsync(() => notNullOrUndefined(globalIntlTelInputUtils()), 5000))
+        .then(() => globalIntlTelInputUtils());
+}
+
+const VALIDATOR_CODE_MESSAGES = {
+    [intlTelInputUtils.validationError.INVALID_COUNTRY_CODE]: 'Country code is invalid.',
+    [intlTelInputUtils.validationError.TOO_SHORT]: 'Number is too short.',
+    [intlTelInputUtils.validationError.TOO_LONG]: 'Number is too long.',
+    [intlTelInputUtils.validationError.NOT_A_NUMBER]: 'Must be numbers only.'
+};
+function getValidationErrorMessage(code) {
+    const message = VALIDATOR_CODE_MESSAGES[code];
+    return message ?? 'Invalid number.';
+}
+
+/**
+ * Process the countryCodes map.
+ *
+ * Based on: https://github.com/jackocnr/intl-tel-input/blob/4fe25fcf142c341a85b7b15cc307d66afb8573a3/src/js/intlTelInput.js#L252
+ */
+function processCountryCodes(countries) {
+    const data = {
+        countryCodeMaxLen: 0,
+        // here we store just dial codes
+        dialCodes: {},
+        // here we store "country codes" (both dial codes and their area codes)
+        countryCodes: {}
+    };
+    // first: add dial codes
+    for (const c of countries) {
+        if (!data.dialCodes[c.dialCode]) {
+            data.dialCodes[c.dialCode] = true;
+        }
+        addCountryCode(data, 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 (const c of countries) {
+        // area codes
+        if (c.areaCodes) {
+            const rootCountryCode = data.countryCodes[c.dialCode][0];
+            // for each area code
+            for (const areaCode of c.areaCodes) {
+                // for each digit in the area code to add all partial matches as well
+                for (let k = 1; k < areaCode.length; k++) {
+                    const partialDialCode = c.dialCode + areaCode.substr(0, k);
+                    // start with the root country, as that also matches this dial code
+                    addCountryCode(data, rootCountryCode, partialDialCode);
+                    addCountryCode(data, c.iso2, partialDialCode);
+                }
+                // add the full area code
+                addCountryCode(data, c.iso2, c.dialCode + areaCode);
+            }
+        }
+    }
+    return data;
+}
+
+class TheSeamTelInputDirective {
+    _elementRef;
+    _assetLoader;
+    _ngZone;
+    _document;
+    _ngControl;
+    _ngUnsubscribe = new Subject();
+    _instance;
+    _loadedAssetRefs = [];
+    _attrType = 'tel';
+    set value(v) {
+        this._value = v;
+        if (this._instance) {
+            this._instance.setNumber(notNullOrUndefined(v) ? v : '');
+            this.updateValue();
+        }
+    }
+    get value() {
+        if (this._instance) {
+            return this._instance?.getNumber();
+        }
+        return this._value;
+    }
+    _value;
+    constructor(_elementRef, _assetLoader, _ngZone, _document, _ngControl) {
+        this._elementRef = _elementRef;
+        this._assetLoader = _assetLoader;
+        this._ngZone = _ngZone;
+        this._document = _document;
+        this._ngControl = _ngControl;
+    }
+    ngOnInit() {
+        this._elementRef.nativeElement.value = this._ngControl ? this._ngControl.value : this.value ?? '';
+        this._elementRef.nativeElement.setAttribute('instance-loading', '');
+        merge(this._assetLoader.loadStyleSheet(TEL_INPUT_STYLESHEET_PATH), this._assetLoader.loadStyle(TEL_INPUT_STYLES)).pipe(tap(v => this._loadedAssetRefs.push(v)), last(), switchMap(() => {
+            this._instance = IntlTelInputFn(this._elementRef.nativeElement, {
+                utilsScript: TEL_INPUT_UTILS_PATH,
+                preferredCountries: ['US'],
+                nationalMode: false,
+                formatOnDisplay: true,
+                autoPlaceholder: 'off',
+                separateDialCode: false,
+                autoHideDialCode: false,
+                // TODO: Add initialCountry support.
+                // initialCountry: 'auto'
+            });
+            this._tryUpdateDropdownAttributes();
+            return this._instance.promise.then(v => {
+                this._elementRef.nativeElement.removeAttribute('instance-loading');
+                return v;
+            });
+        }), tap(() => this._initDropdownListener()), tap(() => this.value = this._value), tap(this._formatIntlTelInput), switchMap(() => merge(fromEvent(this._elementRef.nativeElement, 'keyup'), fromEvent(this._elementRef.nativeElement, 'change'))), tap(this._formatIntlTelInput), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    ngOnDestroy() {
+        this._instance?.destroy();
+        for (const ref of this._loadedAssetRefs) {
+            ref.destroy();
+        }
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    ngDoCheck() {
+        this._tryUpdateDropdownAttributes();
+    }
+    _tryUpdateDropdownAttributes() {
+        const control = this._ngControl;
+        if (control) {
+            const flagsContainer = this._instance?.selectedFlag;
+            if (flagsContainer) {
+                toggleAttribute(flagsContainer, 'aria-disabled', control.disabled ?? false);
+                const disabled = control.disabled ?? false;
+                if (!disabled) {
+                    if (getAttribute(flagsContainer, 'tabindex') !== '0') {
+                        flagsContainer.setAttribute('tabindex', '0');
+                    }
+                }
+                else {
+                    if (hasAttribute(flagsContainer, 'tabindex')) {
+                        flagsContainer.removeAttribute('tabindex');
+                    }
+                }
+            }
+        }
+    }
+    _formatIntlTelInput = () => {
+        // if (typeof intlTelInputUtils !== 'undefined') {
+        //   const currentText = this._instance?.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL)
+        //   console.log('currentText', currentText, this._instance?.getSelectedCountryData())
+        //   console.log(this._instance?.getValidationError())
+        //   if (typeof currentText === 'string') {
+        //     this._instance?.setNumber(currentText)
+        //   }
+        // }
+        this.updateValue();
+    };
+    updateValue() {
+        // console.log('%cupdateValue START', 'color:cyan', typeof intlTelInputUtils !== 'undefined')
+        if (typeof globalIntlTelInputUtils() !== 'undefined') {
+            const currentText = this._instance?.getNumber(intlTelInputUtils.numberFormat.E164);
+            // console.log('currentText', currentText, this._instance?.getSelectedCountryData())
+            // console.log('fullNumber', (this._instance as any)._getFullNumber())
+            // console.log('E164', this._instance?.getNumber(intlTelInputUtils.numberFormat.E164))
+            // console.log('INTERNATIONAL', this._instance?.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL))
+            // console.log('NATIONAL', this._instance?.getNumber(intlTelInputUtils.numberFormat.NATIONAL))
+            // console.log('RFC3966', this._instance?.getNumber(intlTelInputUtils.numberFormat.RFC3966))
+            // console.log('getValidationError', this._instance?.getValidationError())
+            if (typeof currentText === 'string') {
+                this._instance?.setNumber(currentText);
+            }
+        }
+        // console.log('%cupdateValue END', 'color:cyan')
+    }
+    getFullNumber() {
+        if (typeof globalIntlTelInputUtils() !== 'undefined' && this._instance) {
+            // return (this._instance as any)._getFullNumber()
+            return this._instance.getNumber(intlTelInputUtils.numberFormat.E164);
+        }
+        return this.value;
+    }
+    _initDropdownListener() {
+        const doc = this._document;
+        if (!doc) {
+            return;
+        }
+        this._ngZone.runOutsideAngular(() => {
+            const openDropdown$ = fromEvent(this._elementRef.nativeElement, 'open:countrydropdown');
+            const closeDropdown$ = fromEvent(this._elementRef.nativeElement, 'close:countrydropdown');
+            const instance = this._instance;
+            openDropdown$.pipe(switchMap(() => {
+                const pressDown$ = merge(fromEvent(doc, 'touchstart', { capture: true }), fromEvent(doc, 'mousedown', { capture: true })).pipe(auditTime(0), tap((event) => {
+                    if (instance.countryList.contains(event.target) || instance.selectedFlag.contains(event.target)) {
+                        return;
+                    }
+                    instance._closeDropdown();
+                }));
+                const flagBtnClick$ = fromEvent(instance.selectedFlag, 'click').pipe(tap((event) => {
+                    if (!this.isDropdownVisible()) {
+                        return;
+                    }
+                    event.preventDefault();
+                    instance._closeDropdown();
+                }));
+                return merge(pressDown$, flagBtnClick$).pipe(takeUntil(closeDropdown$));
+            }), takeUntil(this._ngUnsubscribe)).subscribe();
+            const flagsContainer = this._instance?.selectedFlag;
+            if (flagsContainer) {
+                fromEvent(flagsContainer, 'keydown', { capture: true }).pipe(tap((e) => {
+                    const control = this._ngControl;
+                    if (control) {
+                        const disabled = control.disabled ?? false;
+                        if (disabled && ['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();
+                        }
+                    }
+                }), takeUntil(this._ngUnsubscribe)).subscribe();
+            }
+        });
+    }
+    isDropdownVisible() {
+        if (!this._instance) {
+            return false;
+        }
+        const instance = this._instance;
+        return !instance.countryList.classList.contains('iti__hide');
+    }
+    /** Focuses the input. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** Unfocuses the input. */
+    blur() {
+        this._elementRef.nativeElement.blur();
+    }
+    getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.AssetLoaderService }, { token: i0.NgZone }, { token: DOCUMENT, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTelInputDirective, isStandalone: true, selector: "input[seamTelInput]", inputs: { value: "value" }, host: { properties: { "attr.type": "this._attrType" } }, exportAs: ["seamTelInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[seamTelInput]',
+                    exportAs: 'seamTelInput',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.AssetLoaderService }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { _attrType: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], value: [{
+                type: Input
+            }] } });
+
+// TODO: Fix focus
+// TODO: Fix disabled
+class TheSeamTelInputComponent {
+    _changeDetectorRef;
+    _injector;
+    _elementRef;
+    _focusMonitor;
+    static ngAcceptInputType_required;
+    static ngAcceptInputType_disabled;
+    /** @ignore */
+    _ngUnsubscribe = new Subject();
+    /** @ignore */
+    _control = new UntypedFormControl();
+    _focusOrigin = null;
+    _hasInvalidCss$;
+    required = false;
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (this._control.disabled !== newValue) {
+            if (newValue) {
+                this._control.disable();
+            }
+            else {
+                this._control.enable();
+            }
+        }
+        if (newValue !== this.disabled) {
+            this._disabled = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    /** @ignore */
+    _disabled = false;
+    /**
+     * Set the tab index to `-1` to allow the root element of the
+     * component to receive `focus` event from javascript, but not get focused by
+     * keyboard navigation.
+     */
+    set tabIndex(value) { this._tabIndex = coerceNumberProperty(value); }
+    get tabIndex() { return this._tabIndex; }
+    _tabIndex = -1;
+    get _attrDisabled() { return this.disabled || null; }
+    get _attrTabIndex() { return this.disabled ? -1 : (this.tabIndex || 0); }
+    /** Name value will be applied to the input element if present */
+    name = null;
+    /** The value attribute of the native input element */
+    value;
+    /** Event emitted when the "tel" input value changes. */
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    change = new EventEmitter();
+    /**
+     * The telInput directive
+     * @ignore
+     */
+    _telInputDirective;
+    /**
+     * The telInput directive
+     * @ignore
+     */
+    _inputDirective;
+    /**
+     * The native `<input type="tel">` element
+     * @ignore
+     */
+    _inputElementRef;
+    _onFocus() {
+        this._telInputDirective?.focus();
+    }
+    /**
+     * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
+     * @ignore
+     */
+    _onTouched = () => { };
+    /** @ignore */
+    _controlValueAccessorChangeFn = () => { };
+    constructor(_changeDetectorRef, _injector, _elementRef, _focusMonitor) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._injector = _injector;
+        this._elementRef = _elementRef;
+        this._focusMonitor = _focusMonitor;
+        const telInputBlurEvent$ = this._telInputDirective
+            ? fromEvent(this._telInputDirective.getHostElement(), 'blur')
+            : of();
+        this._hasInvalidCss$ = defer(() => of((this._injector.get(NgControl, null, { self: true })?.control) || undefined)).pipe(switchMap(control => {
+            if (control) {
+                return merge(control.valueChanges, control.statusChanges, telInputBlurEvent$).pipe(auditTime(0), map(() => {
+                    const inputControl = this._inputDirective?.ngControl;
+                    return control.invalid && (inputControl?.dirty || inputControl?.touched);
+                }));
+            }
+            return of(false);
+        }));
+    }
+    /** @ignore */
+    ngOnInit() {
+        this._focusMonitor.monitor(this._elementRef, true).pipe(takeUntil(this._ngUnsubscribe)).subscribe(origin => this._focusOrigin = origin);
+        this._control.valueChanges.pipe(takeUntil(this._ngUnsubscribe)).subscribe(v => {
+            const value = this._telInputDirective?.getFullNumber();
+            // console.log('valueChanges', v, value)
+            this.value = value;
+            if (this._controlValueAccessorChangeFn) {
+                this._controlValueAccessorChangeFn(value);
+                this.change.emit(value);
+            }
+        });
+        this._control.setValue(this.value ?? '');
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef);
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    // Implemented as part of ControlValueAccessor.
+    /** @ignore */
+    writeValue(value) {
+        // console.log('writeValue', value, this._telInputDirective?.getFullNumber(), this._control.value)
+        this.value = value;
+        if (this._control.value !== value) {
+            this._control.setValue(value);
+        }
+        if (this._telInputDirective) {
+            this._telInputDirective.value = value;
+            this._telInputDirective.updateValue();
+        }
+    }
+    // Implemented as part of ControlValueAccessor.
+    /** @ignore */
+    registerOnChange(fn) {
+        this._controlValueAccessorChangeFn = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    /** @ignore */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    /** @ignore */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /** Focuses the input. */
+    focus() {
+        this._telInputDirective?.focus();
+    }
+    /** Unfocuses the input. */
+    blur() {
+        this._telInputDirective?.blur();
+    }
+    hasFocus() {
+        return this._focusOrigin !== null && this._focusOrigin !== undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTelInputComponent, isStandalone: true, selector: "seam-tel-input", inputs: { required: "required", disabled: "disabled", tabIndex: "tabIndex", name: "name", value: "value" }, outputs: { change: "change" }, host: { listeners: { "focus": "_onFocus($event)" }, properties: { "attr.disabled": "this._attrDisabled", "attr.tabindex": "this._attrTabIndex" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TheSeamTelInputComponent),
+                multi: true
+            }], viewQueries: [{ propertyName: "_telInputDirective", first: true, predicate: TheSeamTelInputDirective, descendants: true, static: true }, { propertyName: "_inputDirective", first: true, predicate: InputDirective, descendants: true, static: true }, { propertyName: "_inputElementRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input seamTelInput seamInput\n  [formControl]=\"_control\"\n  [class.is-invalid]=\"_hasInvalidCss$ | async\"\n  [required]=\"required\"/>\n", styles: [":host{display:block}:host[disabled] ::ng-deep .iti--allow-dropdown .iti__flag-container:hover{cursor:default}:host[disabled] ::ng-deep .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:transparent}:host[disabled] ::ng-deep .iti--allow-dropdown .iti__arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: TheSeamTelInputDirective, selector: "input[seamTelInput]", inputs: ["value"], exportAs: ["seamTelInput"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+__decorate([
+    InputBoolean()
+], TheSeamTelInputComponent.prototype, "required", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-tel-input', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TheSeamTelInputComponent),
+                            multi: true
+                        }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TheSeamFormFieldModule,
+                        TheSeamTelInputDirective,
+                    ], template: "<input seamTelInput seamInput\n  [formControl]=\"_control\"\n  [class.is-invalid]=\"_hasInvalidCss$ | async\"\n  [required]=\"required\"/>\n", styles: [":host{display:block}:host[disabled] ::ng-deep .iti--allow-dropdown .iti__flag-container:hover{cursor:default}:host[disabled] ::ng-deep .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:transparent}:host[disabled] ::ng-deep .iti--allow-dropdown .iti__arrow{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i1$1.FocusMonitor }], propDecorators: { required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], _attrDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], _attrTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], _telInputDirective: [{
+                type: ViewChild,
+                args: [TheSeamTelInputDirective, { static: true }]
+            }], _inputDirective: [{
+                type: ViewChild,
+                args: [InputDirective, { static: true }]
+            }], _inputElementRef: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], _onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }] } });
+
+function telInputValidator(control) {
+    const value = control.value;
+    // This validator doesn't need to do anything if there isn't a value.
+    if (typeof value !== 'string' || value.length === 0) {
+        return Promise.resolve(null);
+    }
+    return getIntlTelInputUtils().then(utils => {
+        const data = processCountryCodes(globalIntlTelInputGlobals().getCountryData());
+        const dialCode = getDialCode(data, value);
+        const countryCode = getCountryCode(data, dialCode);
+        let number = value;
+        if (number.charAt(0) !== '+') {
+            if (number.charAt(0) !== '1') {
+                number = `1${number}`;
+            }
+            number = `+${number}`;
+        }
+        if (!utils.isValidNumber(number, countryCode)) {
+            const code = utils.getValidationError(number, countryCode);
+            const message = getValidationErrorMessage(code);
+            return { 'telInput': { code, message } };
+        }
+        return null;
+    });
+}
+
+class TheSeamPhoneNumberPipe {
+    _cdr;
+    _latestPhoneNumber;
+    _latestNumberFormat;
+    _latestValue;
+    constructor(_cdr) {
+        this._cdr = _cdr;
+    }
+    transform(phoneNumber, numberFormat = intlTelInputUtils.numberFormat.INTERNATIONAL) {
+        // console.log('transform', phoneNumber, numberFormat)
+        if (this._latestPhoneNumber !== phoneNumber || this._latestNumberFormat !== numberFormat) {
+            this._transform(phoneNumber, numberFormat);
+        }
+        this._latestPhoneNumber = phoneNumber;
+        this._latestNumberFormat = numberFormat;
+        // console.log('return', this._latestValue)
+        return this._latestValue;
+    }
+    async _transform(phoneNumber, numberFormat) {
+        // console.log('_transform', phoneNumber, numberFormat)
+        const utils = await getIntlTelInputUtils();
+        // console.log('utils', utils)
+        const _format = coercePhoneNumberFormat(numberFormat);
+        const data = processCountryCodes(globalIntlTelInputGlobals().getCountryData());
+        const dialCode = getDialCode(data, phoneNumber);
+        const countryCode = getCountryCode(data, dialCode);
+        const number = phoneNumber;
+        // if (number.charAt(0) !== '+') {
+        //   if (number.charAt(0) !== '1') { number = `1${number}` }
+        //   number = `+${number}`
+        // }
+        const n = utils.formatNumber(number, countryCode, _format);
+        // console.log('n', n)
+        this._latestValue = n;
+        // this._cdr.markForCheck()
+        this._cdr.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamPhoneNumberPipe, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamPhoneNumberPipe, isStandalone: false, name: "phoneNumber", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamPhoneNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'phoneNumber',
+                    pure: false,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class TheSeamTelInputModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputModule, declarations: [TheSeamPhoneNumberPipe], imports: [CommonModule,
+            ReactiveFormsModule,
+            TheSeamFormFieldModule,
+            TheSeamTelInputDirective,
+            TheSeamTelInputComponent], exports: [TheSeamTelInputDirective,
+            TheSeamTelInputComponent,
+            TheSeamPhoneNumberPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            TheSeamFormFieldModule,
+            TheSeamTelInputComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TheSeamPhoneNumberPipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TheSeamFormFieldModule,
+                        TheSeamTelInputDirective,
+                        TheSeamTelInputComponent,
+                    ],
+                    exports: [
+                        TheSeamTelInputDirective,
+                        TheSeamTelInputComponent,
+                        TheSeamPhoneNumberPipe
+                    ]
+                }]
+        }] });
+
+class TheSeamTelInputHarness extends ComponentHarness {
+    static hostSelector = 'seam-tel-input';
+    _input = this.locatorFor('input');
+    /** Creates a `HarnessPredicate` used to locate a particular `TheSeamTelInputHarness`. */
+    static with(options) {
+        return new HarnessPredicate(TheSeamTelInputHarness, options)
+            .addOption('field name', options.name, (harness, name) => HarnessPredicate.stringMatches(harness.getName(), name));
+    }
+    async getName() {
+        return (await this._input()).getAttribute('name');
+    }
+    async getValue() {
+        return (await this._input()).getProperty('value');
+    }
+    async isDisabled() {
+        return (await this._input()).getProperty('disabled');
+    }
+    async isRequired() {
+        return (await this._input()).getProperty('required');
+    }
+    async click() {
+        return (await this._input()).click();
+    }
+    async setValue(value) {
+        await this._waitOnInstance();
+        // TODO: Find out why setInputValue() doesn't update the FormControl.
+        // return (await this._input()).setInputValue(value)
+        await (await this._input()).click();
+        await this._input().then(x => x.setInputValue(''));
+        return (await this._input()).sendKeys(value);
+    }
+    async _waitOnInstance() {
+        const input = document.querySelector('input');
+        const isInstanceReady = () => {
+            const instLoading = input?.getAttribute('instance-loading');
+            return instLoading === null;
+        };
+        if (isInstanceReady()) {
+            return true;
+        }
+        await waitOnConditionAsync(isInstanceReady, 10000);
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IntlTelInputFn, TEL_INPUT_ASSETS_PATH, TEL_INPUT_STYLES, TEL_INPUT_STYLESHEET_PATH, TEL_INPUT_UTILS_PATH, THESEAM_DEFAULT_PHONE_NUMBER_FORMAT, TelInputNumberFormatName, TheSeamPhoneNumberPipe, TheSeamTelInputComponent, TheSeamTelInputDirective, TheSeamTelInputHarness, TheSeamTelInputModule, VALIDATOR_CODE_MESSAGES, addCountryCode, coercePhoneNumberFormat, getCountryCode, getDialCode, getIntlTelInputUtils, getValidationErrorMessage, globalIntlTelInputGlobals, globalIntlTelInputUtils, intlTelInputUtils, processCountryCodes, telInputValidator };
+//# sourceMappingURL=theseam-ui-common-tel-input.mjs.map