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

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

@@ -1,810 +0,0 @@
-import { __decorate } from 'tslib';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import * as i0 from '@angular/core';
-import { Directive, Optional, Inject, Self, HostBinding, Input, EventEmitter, InjectFlags, forwardRef, Component, ChangeDetectionStrategy, Output, ViewChild, HostListener, Pipe, NgModule } from '@angular/core';
-import * as i3 from '@angular/forms';
-import { UntypedFormControl, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } 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 i4 from '@theseam/ui-common/form-field';
-import { InputDirective, TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
-import * as i2 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-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 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 {
-    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;
-    }
-    constructor(_elementRef, _assetLoader, _ngZone, _document, _ngControl) {
-        this._elementRef = _elementRef;
-        this._assetLoader = _assetLoader;
-        this._ngZone = _ngZone;
-        this._document = _document;
-        this._ngControl = _ngControl;
-        this._ngUnsubscribe = new Subject();
-        this._loadedAssetRefs = [];
-        this._attrType = 'tel';
-        this._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();
-        };
-    }
-    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');
-                    }
-                }
-            }
-        }
-    }
-    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;
-    }
-}
-TheSeamTelInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTelInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.AssetLoaderService }, { token: i0.NgZone }, { token: DOCUMENT, optional: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-TheSeamTelInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: TheSeamTelInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[seamTelInput]',
-                    exportAs: 'seamTelInput',
-                    standalone: true,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.AssetLoaderService }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i3.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }]; }, propDecorators: { _attrType: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }], value: [{
-                type: Input
-            }] } });
-
-// TODO: Fix focus
-// TODO: Fix disabled
-class TheSeamTelInputComponent {
-    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();
-        }
-    }
-    /**
-     * 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; }
-    get _attrDisabled() { return this.disabled || null; }
-    get _attrTabIndex() { return this.disabled ? -1 : (this.tabIndex || 0); }
-    _onFocus() {
-        this._telInputDirective?.focus();
-    }
-    constructor(_changeDetectorRef, _injector, _elementRef, _focusMonitor) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._injector = _injector;
-        this._elementRef = _elementRef;
-        this._focusMonitor = _focusMonitor;
-        /** @ignore */
-        this._ngUnsubscribe = new Subject();
-        /** @ignore */
-        this._control = new UntypedFormControl();
-        this._focusOrigin = null;
-        this.required = false;
-        /** @ignore */
-        this._disabled = false;
-        this._tabIndex = -1;
-        /** Name value will be applied to the input element if present */
-        this.name = null;
-        /** Event emitted when the "tel" input value changes. */
-        // eslint-disable-next-line @angular-eslint/no-output-native
-        this.change = new EventEmitter();
-        /**
-         * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
-         * @ignore
-         */
-        this._onTouched = () => { };
-        /** @ignore */
-        this._controlValueAccessorChangeFn = () => { };
-        const telInputBlurEvent$ = this._telInputDirective
-            ? fromEvent(this._telInputDirective.getHostElement(), 'blur')
-            : of();
-        this._hasInvalidCss$ = defer(() => of((this._injector.get(NgControl, null, InjectFlags.Self)?.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;
-    }
-}
-TheSeamTelInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTelInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamTelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "directive", type: i4.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-__decorate([
-    InputBoolean()
-], TheSeamTelInputComponent.prototype, "required", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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, standalone: true, 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: function () { return [{ 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 {
-    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();
-    }
-}
-TheSeamPhoneNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamPhoneNumberPipe, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
-TheSeamPhoneNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamPhoneNumberPipe, name: "phoneNumber", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamPhoneNumberPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'phoneNumber',
-                    pure: false
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
-
-class TheSeamTelInputModule {
-}
-TheSeamTelInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTelInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheSeamTelInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTelInputModule, declarations: [TheSeamPhoneNumberPipe], imports: [CommonModule,
-        ReactiveFormsModule,
-        TheSeamFormFieldModule,
-        TheSeamTelInputDirective,
-        TheSeamTelInputComponent], exports: [TheSeamTelInputDirective,
-        TheSeamTelInputComponent,
-        TheSeamPhoneNumberPipe] });
-TheSeamTelInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTelInputModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        TheSeamFormFieldModule,
-        TheSeamTelInputComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TheSeamTelInputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        TheSeamPhoneNumberPipe
-                    ],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        TheSeamFormFieldModule,
-                        TheSeamTelInputDirective,
-                        TheSeamTelInputComponent,
-                    ],
-                    exports: [
-                        TheSeamTelInputDirective,
-                        TheSeamTelInputComponent,
-                        TheSeamPhoneNumberPipe
-                    ]
-                }]
-        }] });
-
-class TheSeamTelInputHarness extends ComponentHarness {
-    constructor() {
-        super(...arguments);
-        this._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);
-    }
-}
-TheSeamTelInputHarness.hostSelector = 'seam-tel-input';
-
-/**
- * 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