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

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

@@ -107,15 +107,15 @@ function addCountryCode(data, iso2, countryCode, priority) {
         }
     }
     // check for undefined as 0 is falsy
-    const index = (priority !== undefined) ? priority : data.countryCodes[countryCode].length;
+    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
+    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;
@@ -123,7 +123,7 @@ function coercePhoneNumberFormat(format, defaultFormat = THESEAM_DEFAULT_PHONE_N
     let res = defaultFormat;
     if (typeof format === 'string') {
         const _format = TelInputNumberFormatName[`${format}`.trim().toUpperCase()];
-        res = (_format === undefined || _format === null) ? defaultFormat : _format;
+        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
@@ -144,7 +144,11 @@ function getNumeric(s) {
 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];
+    return _countryCodes === undefined ||
+        _countryCodes === null ||
+        _countryCodes.length === 0
+        ? 'us'
+        : _countryCodes[0];
 }
 
 /**
@@ -205,10 +209,10 @@ function getIntlTelInputUtils() {
         return Promise.resolve(globalIntlTelInputUtils());
     }
     if (globalIntlTelInputGlobals().startedLoadingUtilsScript) {
-        return waitOnConditionAsync(() => notNullOrUndefined(globalIntlTelInputUtils()), 5000)
-            .then(() => globalIntlTelInputUtils());
+        return waitOnConditionAsync(() => notNullOrUndefined(globalIntlTelInputUtils()), 5000).then(() => globalIntlTelInputUtils());
     }
-    return globalIntlTelInputGlobals().loadUtils(TEL_INPUT_UTILS_PATH)
+    return globalIntlTelInputGlobals()
+        .loadUtils(TEL_INPUT_UTILS_PATH)
         .then(() => waitOnConditionAsync(() => notNullOrUndefined(globalIntlTelInputUtils()), 5000))
         .then(() => globalIntlTelInputUtils());
 }
@@ -217,7 +221,7 @@ 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.'
+    [intlTelInputUtils.validationError.NOT_A_NUMBER]: 'Must be numbers only.',
 };
 function getValidationErrorMessage(code) {
     const message = VALIDATOR_CODE_MESSAGES[code];
@@ -235,7 +239,7 @@ function processCountryCodes(countries) {
         // here we store just dial codes
         dialCodes: {},
         // here we store "country codes" (both dial codes and their area codes)
-        countryCodes: {}
+        countryCodes: {},
     };
     // first: add dial codes
     for (const c of countries) {
@@ -301,9 +305,12 @@ class TheSeamTelInputDirective {
         this._ngControl = _ngControl;
     }
     ngOnInit() {
-        this._elementRef.nativeElement.value = this._ngControl ? this._ngControl.value : this.value ?? '';
+        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(() => {
+        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'],
@@ -316,11 +323,12 @@ class TheSeamTelInputDirective {
                 // initialCountry: 'auto'
             });
             this._tryUpdateDropdownAttributes();
-            return this._instance.promise.then(v => {
+            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();
+        }), 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();
@@ -397,9 +405,11 @@ class TheSeamTelInputDirective {
             const openDropdown$ = fromEvent(this._elementRef.nativeElement, 'open:countrydropdown');
             const closeDropdown$ = fromEvent(this._elementRef.nativeElement, 'close:countrydropdown');
             const instance = this._instance;
-            openDropdown$.pipe(switchMap(() => {
+            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)) {
+                    if (instance.countryList.contains(event.target) ||
+                        instance.selectedFlag.contains(event.target)) {
                         return;
                     }
                     instance._closeDropdown();
@@ -412,21 +422,25 @@ class TheSeamTelInputDirective {
                     instance._closeDropdown();
                 }));
                 return merge(pressDown$, flagBtnClick$).pipe(takeUntil(closeDropdown$));
-            }), takeUntil(this._ngUnsubscribe)).subscribe();
+            }), takeUntil(this._ngUnsubscribe))
+                .subscribe();
             const flagsContainer = this._instance?.selectedFlag;
             if (flagsContainer) {
-                fromEvent(flagsContainer, 'keydown', { capture: true }).pipe(tap((e) => {
+                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) {
+                        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();
+                }), takeUntil(this._ngUnsubscribe))
+                    .subscribe();
             }
         });
     }
@@ -448,10 +462,10 @@ class TheSeamTelInputDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", 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.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamTelInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[seamTelInput]',
@@ -490,7 +504,9 @@ class TheSeamTelInputComponent {
     _focusOrigin = null;
     _hasInvalidCss$;
     required = false;
-    get disabled() { return this._disabled; }
+    get disabled() {
+        return this._disabled;
+    }
     set disabled(value) {
         const newValue = coerceBooleanProperty(value);
         if (this._control.disabled !== newValue) {
@@ -513,11 +529,19 @@ class TheSeamTelInputComponent {
      * 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; }
+    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); }
+    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 */
@@ -558,11 +582,14 @@ class TheSeamTelInputComponent {
         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 => {
+        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 (control.invalid &&
+                        (inputControl?.dirty ||
+                            inputControl?.touched));
                 }));
             }
             return of(false);
@@ -570,8 +597,13 @@ class TheSeamTelInputComponent {
     }
     /** @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 => {
+        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;
@@ -627,28 +659,32 @@ class TheSeamTelInputComponent {
     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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", 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.7", 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 });
+                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\n  seamTelInput\n  seamInput\n  [formControl]=\"_control\"\n  [class.is-invalid]=\"_hasInvalidCss$ | async\"\n  [required]=\"required\"\n/>\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamTelInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-tel-input', providers: [{
+            args: [{ selector: 'seam-tel-input', providers: [
+                        {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TheSeamTelInputComponent),
-                            multi: true
-                        }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                            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"] }]
+                    ], template: "<input\n  seamTelInput\n  seamInput\n  [formControl]=\"_control\"\n  [class.is-invalid]=\"_hasInvalidCss$ | async\"\n  [required]=\"required\"\n/>\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: [{
@@ -687,7 +723,7 @@ function telInputValidator(control) {
     if (typeof value !== 'string' || value.length === 0) {
         return Promise.resolve(null);
     }
-    return getIntlTelInputUtils().then(utils => {
+    return getIntlTelInputUtils().then((utils) => {
         const data = processCountryCodes(globalIntlTelInputGlobals().getCountryData());
         const dialCode = getDialCode(data, value);
         const countryCode = getCountryCode(data, dialCode);
@@ -701,7 +737,7 @@ function telInputValidator(control) {
         if (!utils.isValidNumber(number, countryCode)) {
             const code = utils.getValidationError(number, countryCode);
             const message = getValidationErrorMessage(code);
-            return { 'telInput': { code, message } };
+            return { telInput: { code, message } };
         }
         return null;
     });
@@ -715,9 +751,11 @@ class TheSeamPhoneNumberPipe {
     constructor(_cdr) {
         this._cdr = _cdr;
     }
-    transform(phoneNumber, numberFormat = intlTelInputUtils.numberFormat.INTERNATIONAL) {
+    transform(phoneNumber, numberFormat = intlTelInputUtils.numberFormat
+        .INTERNATIONAL) {
         // console.log('transform', phoneNumber, numberFormat)
-        if (this._latestPhoneNumber !== phoneNumber || this._latestNumberFormat !== numberFormat) {
+        if (this._latestPhoneNumber !== phoneNumber ||
+            this._latestNumberFormat !== numberFormat) {
             this._transform(phoneNumber, numberFormat);
         }
         this._latestPhoneNumber = phoneNumber;
@@ -744,38 +782,36 @@ class TheSeamPhoneNumberPipe {
         // 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPhoneNumberPipe, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPhoneNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'phoneNumber',
                     pure: false,
-                    standalone: 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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamTelInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", 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,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamTelInputModule, imports: [CommonModule,
             ReactiveFormsModule,
             TheSeamFormFieldModule,
             TheSeamTelInputComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTelInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamTelInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        TheSeamPhoneNumberPipe
-                    ],
+                    declarations: [TheSeamPhoneNumberPipe],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
@@ -786,8 +822,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     exports: [
                         TheSeamTelInputDirective,
                         TheSeamTelInputComponent,
-                        TheSeamPhoneNumberPipe
-                    ]
+                        TheSeamPhoneNumberPipe,
+                    ],
                 }]
         }] });
 
@@ -796,8 +832,7 @@ class TheSeamTelInputHarness extends ComponentHarness {
     _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));
+        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');
@@ -819,7 +854,7 @@ class TheSeamTelInputHarness extends ComponentHarness {
         // 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(''));
+        await this._input().then((x) => x.setInputValue(''));
         return (await this._input()).sendKeys(value);
     }
     async _waitOnInstance() {