@theseam/ui-common 0.3.10 → 0.4.0-beta.0

package/fesm2015/theseam-ui-common-tel-input.js

@@ -1,733 +0,0 @@
-import { __decorate, __awaiter } from 'tslib';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { Directive, ElementRef, NgZone, Optional, Inject, Self, HostBinding, Input, EventEmitter, InjectFlags, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, Injector, Output, ViewChild, HostListener, Pipe, NgModule } from '@angular/core';
-import { NgControl, FormControl, 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 { InputDirective, TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import { AssetLoaderService } from '@theseam/ui-common/services';
-import { waitOnConditionAsync, notNullOrUndefined, toggleAttribute, getAttribute, hasAttribute } from '@theseam/ui-common/utils';
-import intlTelInput from 'intl-tel-input';
-
-//
-// 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
- */
-// tslint:disable-next-line: 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 (!data.countryCodes.hasOwnProperty(countryCode)) {
-        data.countryCodes[countryCode] = [];
-    }
-    // bail if we already have this country for this countryCode
-    for (let i = 0; i < data.countryCodes[countryCode].length; i++) {
-        if (data.countryCodes[countryCode][i] === 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 !== null && message !== void 0 ? 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 (let i = 0; i < countries.length; i++) {
-        const c = countries[i];
-        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 (let i = 0; i < countries.length; i++) {
-        const c = countries[i];
-        // area codes
-        if (c.areaCodes) {
-            const rootCountryCode = data.countryCodes[c.dialCode][0];
-            // for each area code
-            for (let j = 0; j < c.areaCodes.length; j++) {
-                const areaCode = c.areaCodes[j];
-                // 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 {
-    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();
-        };
-    }
-    set value(v) {
-        // console.log('set value', v, this._instance)
-        this._value = v;
-        if (this._instance) {
-            this._instance.setNumber(notNullOrUndefined(v) ? v : '');
-            this.updateValue();
-        }
-    }
-    get value() {
-        var _a;
-        if (this._instance) {
-            return (_a = this._instance) === null || _a === void 0 ? void 0 : _a.getNumber();
-        }
-        return this._value;
-    }
-    ngOnInit() {
-        merge(this._assetLoader.loadStyleSheet(TEL_INPUT_STYLESHEET_PATH), this._assetLoader.loadStyle(TEL_INPUT_STYLES)).pipe(
-        // tap(v => console.log('loaded', v)),
-        tap(v => this._loadedAssetRefs.push(v)), last(), 
-        // tap(v => console.log('StyleLoadingDone', v)),
-        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;
-        }), 
-        // tap(() => console.log('%c_instance ready', 'color:green', this._instance, this._elementRef.nativeElement.value)),
-        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() {
-        var _a;
-        (_a = this._instance) === null || _a === void 0 ? void 0 : _a.destroy();
-        for (const ref of this._loadedAssetRefs) {
-            ref.destroy();
-        }
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    ngDoCheck() {
-        this._tryUpdateDropdownAttributes();
-    }
-    _tryUpdateDropdownAttributes() {
-        var _a, _b, _c;
-        const control = this._ngControl;
-        if (control) {
-            const flagsContainer = (_a = this._instance) === null || _a === void 0 ? void 0 : _a.selectedFlag;
-            if (flagsContainer) {
-                toggleAttribute(flagsContainer, 'aria-disabled', (_b = control.disabled) !== null && _b !== void 0 ? _b : false);
-                const disabled = (_c = control.disabled) !== null && _c !== void 0 ? _c : false;
-                if (!disabled) {
-                    if (getAttribute(flagsContainer, 'tabindex') !== '0') {
-                        flagsContainer.setAttribute('tabindex', '0');
-                    }
-                }
-                else {
-                    if (hasAttribute(flagsContainer, 'tabindex')) {
-                        flagsContainer.removeAttribute('tabindex');
-                    }
-                }
-            }
-        }
-    }
-    updateValue() {
-        var _a, _b;
-        // console.log('%cupdateValue START', 'color:cyan', typeof intlTelInputUtils !== 'undefined')
-        if (typeof globalIntlTelInputUtils() !== 'undefined') {
-            const currentText = (_a = this._instance) === null || _a === void 0 ? void 0 : _a.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') {
-                (_b = this._instance) === null || _b === void 0 ? void 0 : _b.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(() => {
-            var _a;
-            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 = (_a = this._instance) === null || _a === void 0 ? void 0 : _a.selectedFlag;
-            if (flagsContainer) {
-                fromEvent(flagsContainer, 'keydown', { capture: true }).pipe(tap((e) => {
-                    var _a;
-                    const control = this._ngControl;
-                    if (control) {
-                        const disabled = (_a = control.disabled) !== null && _a !== void 0 ? _a : 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.decorators = [
-    { type: Directive, args: [{
-                selector: 'input[seamTelInput]',
-                exportAs: 'seamTelInput'
-            },] }
-];
-TheSeamTelInputDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: AssetLoaderService },
-    { type: NgZone },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
-];
-TheSeamTelInputDirective.propDecorators = {
-    _attrType: [{ type: HostBinding, args: ['attr.type',] }],
-    value: [{ type: Input }]
-};
-
-// TODO: Fix focus
-// TODO: Fix disabled
-class TheSeamTelInputComponent {
-    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 FormControl();
-        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. */
-        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(() => { var _a; return of(((_a = this._injector.get(NgControl, null, InjectFlags.Self)) === null || _a === void 0 ? void 0 : _a.control) || undefined); }).pipe(switchMap(control => {
-            if (control) {
-                return merge(control.valueChanges, control.statusChanges, telInputBlurEvent$).pipe(auditTime(0), map(() => {
-                    var _a;
-                    const inputControl = (_a = this._inputDirective) === null || _a === void 0 ? void 0 : _a.ngControl;
-                    return control.invalid && ((inputControl === null || inputControl === void 0 ? void 0 : inputControl.dirty) || (inputControl === null || inputControl === void 0 ? void 0 : inputControl.touched));
-                }));
-            }
-            return of(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();
-        }
-    }
-    /**
-     * 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() {
-        var _a;
-        (_a = this._telInputDirective) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /** @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 => {
-            var _a;
-            const value = (_a = this._telInputDirective) === null || _a === void 0 ? void 0 : _a.getFullNumber();
-            this.value = value;
-            if (this._controlValueAccessorChangeFn) {
-                this._controlValueAccessorChangeFn(value);
-            }
-        });
-    }
-    /** @ignore */
-    ngOnDestroy() {
-        this._focusMonitor.stopMonitoring(this._elementRef);
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    // Implemented as part of ControlValueAccessor.
-    /** @ignore */
-    writeValue(value) {
-        this.value = 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() {
-        var _a;
-        (_a = this._telInputDirective) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /** Unfocuses the input. */
-    blur() {
-        var _a;
-        (_a = this._telInputDirective) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    hasFocus() {
-        return this._focusOrigin !== null && this._focusOrigin !== undefined;
-    }
-}
-TheSeamTelInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-tel-input',
-                template: "<input seamTelInput seamInput\n  [formControl]=\"_control\"\n  [class.is-invalid]=\"_hasInvalidCss$ | async\" />\n",
-                providers: [{
-                        provide: NG_VALUE_ACCESSOR,
-                        // tslint:disable-next-line: no-use-before-declare
-                        useExisting: forwardRef(() => TheSeamTelInputComponent),
-                        multi: true
-                    }],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block}:host[disabled] ::ng-deep .iti--allow-dropdown .iti__flag-container:hover,: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,: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"]
-            },] }
-];
-TheSeamTelInputComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: Injector },
-    { type: ElementRef },
-    { type: FocusMonitor }
-];
-TheSeamTelInputComponent.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'],] }]
-};
-__decorate([
-    InputBoolean()
-], TheSeamTelInputComponent.prototype, "required", void 0);
-
-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;
-    }
-    _transform(phoneNumber, numberFormat) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // console.log('_transform', phoneNumber, numberFormat)
-            const utils = yield 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.decorators = [
-    { type: Pipe, args: [{
-                name: 'phoneNumber',
-                pure: false
-            },] }
-];
-TheSeamPhoneNumberPipe.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-
-class TheSeamTelInputModule {
-}
-TheSeamTelInputModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    TheSeamTelInputDirective,
-                    TheSeamTelInputComponent,
-                    TheSeamPhoneNumberPipe
-                ],
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    TheSeamFormFieldModule
-                ],
-                exports: [
-                    TheSeamTelInputDirective,
-                    TheSeamTelInputComponent,
-                    TheSeamPhoneNumberPipe
-                ]
-            },] }
-];
-
-/**
- * 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, TheSeamTelInputModule, VALIDATOR_CODE_MESSAGES, addCountryCode, coercePhoneNumberFormat, getCountryCode, getDialCode, getIntlTelInputUtils, getValidationErrorMessage, globalIntlTelInputGlobals, globalIntlTelInputUtils, intlTelInputUtils, processCountryCodes, telInputValidator };
-//# sourceMappingURL=theseam-ui-common-tel-input.js.map