@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-phone-input.mjs

@@ -1,445 +1,731 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { NgClass, NgStyle, AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Pipe, inject, ChangeDetectorRef, DestroyRef, ElementRef, HostBinding, ViewChild, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
-import { NgControl, UntypedFormBuilder, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
-import { ErrorStateMatcher } from '@angular/material/core';
-import { MatFormField, MatLabel, MatPrefix, MatHint } from '@angular/material/form-field';
-import { MatInput, MatInputModule } from '@angular/material/input';
-import { MatSelect, MatSelectTrigger, MatOption, MatSelectModule } from '@angular/material/select';
-import { parsePhoneNumber } from 'libphonenumber-js';
-import { MatSelectSearchComponent, MatSelectSearchClearDirective, NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import { BehaviorSubject, Subject, combineLatest, debounceTime, take, filter, first, map, startWith, tap, delay } from 'rxjs';
-import { UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';
-import { IconComponent, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { ValidationErrorComponent, ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';
-
-class JoinStringsPipe {
-    transform(value, separator) {
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty separator falls back to the default separator
-        return value.filter(Boolean).join(separator ? separator : ' - ');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JoinStringsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: JoinStringsPipe, isStandalone: true, name: "joinStrings" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JoinStringsPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'joinStrings' }]
-        }] });
-
-class PhoneInputComponent {
-    /**
-     * Phone number
-     *
-     * @type {string}
-     * @memberof PhoneInputComponent
-     */
-    set value(value) {
-        this.initialValue = this.initialValue || value;
-        try {
-            // eslint-disable-next-line @typescript-eslint/no-deprecated -- parsePhoneNumber is deprecated by libphonenumber-js (renamed export); swapping the API is behaviour-sensitive and out of scope for this lint pass
-            const parsed = parsePhoneNumber(value);
-            const formatted = parsed.formatInternational();
-            this.selectedCountry = this.getCountryByAlpha2Code(parsed.country) ?? this.selectedCountry;
-            this.form.patchValue({ phone_number: formatted.replace(this.selectedCountry.callingCode, '') });
-        }
-        catch {
-            if (value?.length <= 4) {
-                this.selectedCountry = this.getCountryByCallingCode(value) ?? this.selectedCountry;
-            }
-            this.form.patchValue({ phone_number: value?.replace(this.selectedCountry?.callingCode, '') });
-        }
-        this.stateChanges.next();
-    }
-    get value() {
-        return this.getNumberWithCountryCode();
-    }
-    /**
-     * Country list for select
-     *
-     * @type {UICountry[]}
-     * @memberof PhoneInputComponent
-     */
-    set countryList(countryList) {
-        this.loadCountries$.next(countryList);
-        this.selectedCountry = this.selectedCountry ?? countryList[0];
-    }
-    /**
-     * Placeholder input
-     *
-     * @type {text}
-     * @memberof PhoneInputComponent
-     */
-    set placeholder(value) {
-        this.internalPlaceholder = value;
-        this.stateChanges.next();
-    }
-    get placeholder() {
-        return this.internalPlaceholder;
-    }
-    get countrySelectTestId() {
-        return this.testId ? `${this.testId}-country` : null;
-    }
-    /**
-     * Input field errors
-     *
-     * @type {string}
-     * @memberof PhoneInputComponent
-     */
-    set errors(errors) {
-        if (errors) {
-            this._errors = errors?.filter(Boolean) ?? [];
-            this.errorsLength = this.setErrorsLength();
-        }
-    }
-    static { this.nextId = 0; }
-    get shouldLabelFloat() {
-        return true;
-    }
-    get empty() {
-        return Boolean(this.form.value);
-    }
-    get errorState() {
-        return this.errorMatcher.isErrorState(this.ngControl?.control, null);
-    }
-    constructor() {
-        this.testId = null;
-        // Empty by default: the library ships no copy for it, so apps pass an already-translated string.
-        this.countryAriaLabel = '';
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof PhoneInputComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * Indicator of the phone input width
-         * @property fullWidth
-         * @type {boolean}
-         * @memberof PhoneInputComponent
-         */
-        this.fullWidth = false;
-        /**
-         * Hide in build errors for Reactive Forms
-         *
-         * @type {number}
-         * @memberof PhoneInputComponent
-         */
-        this.hideBuiltInErrors = false;
-        /**
-         * Hide label in errors
-         *
-         * @type {number}
-         * @memberof PhoneInputComponent
-         */
-        this.hideLabelInErrors = false;
-        this.countries = new BehaviorSubject([]);
-        this.countries$ = this.countries.asObservable();
-        this.ngControl = inject(NgControl, { optional: true, self: true });
-        this.errorMatcher = inject(ErrorStateMatcher);
-        this.fb = inject(UntypedFormBuilder);
-        this.focusMonitor = inject(FocusMonitor);
-        this.ref = inject(ChangeDetectorRef);
-        this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
-            optional: true,
-        });
-        this.form = this.fb.group({
-            phone_number: new UntypedFormControl(),
-        });
-        this.controlType = 'phone-number';
-        this.loadCountries$ = new BehaviorSubject([]);
-        this.countryCode = new BehaviorSubject('US');
-        this.stateChanges = new Subject();
-        this.selectFilterCtrl = new UntypedFormControl('');
-        this.countryFlagSrc = 'assets/svg-country-flags/';
-        this.id = `phone-number${PhoneInputComponent.nextId++}`;
-        this.describedBy = '';
-        this.DEFAULT_COUNTRY_CODE = 'US';
-        this.destroyRef = inject(DestroyRef);
-        this.trackByFn = (index, value) => value;
-        if (this.ngControl !== null) {
-            this.ngControl.valueAccessor = this;
-        }
-        if (this.defaultAppTheme) {
-            this.applicationTheme = this.defaultAppTheme;
-        }
-    }
-    /**
-     * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
-     * to display validation errors that might happen (e.g. required)
-     */
-    ngDoCheck() {
-        if (this.ngControl?.touched || this.ngControl?.errors) {
-            this.ref.markForCheck();
-        }
-    }
-    ngOnInit() {
-        this.loadCountries();
-        this.preSelectCountry();
-        this.subscribeToFocusEvents();
-    }
-    setErrorsLength() {
-        if (this._errors) {
-            return this._errors.filter(err => Boolean(err)).length > 0;
-        }
-        return false;
-    }
-    setDescribedByIds(ids) {
-        this.userAriaDescribedBy = ids.join(' ');
-    }
-    writeValue(phoneNumber) {
-        if (phoneNumber) {
-            this.value = phoneNumber;
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.form.disable();
-        }
-        else {
-            this.form.enable();
-        }
-        this.disabled = isDisabled;
-        this.stateChanges.next();
-        this.ref.markForCheck();
-    }
-    ngOnDestroy() {
-        this.focusMonitor.stopMonitoring(this.input);
-        this.focusMonitor.stopMonitoring(this.select);
-        this.stateChanges.complete();
-    }
-    onOptionsSelected(value) {
-        this.setCountry(value);
-    }
-    onInput(value) {
-        this.value = (this.selectedCountry?.callingCode ?? '') + value;
-        this.onChange(this.value);
-    }
-    filteredCountryTrackByMethod(index, el) {
-        return el.alpha2Code;
-    }
-    setCountry(country) {
-        if (country) {
-            this.selectedCountry = country;
-        }
-        this.value = this.getNumberWithCountryCode();
-        this.onChange(this.value);
-    }
-    getNumberWithCountryCode() {
-        const nationalNumber = this.form.value?.phone_number;
-        return nationalNumber ? (this.selectedCountry?.callingCode ?? '') + nationalNumber : '';
-    }
-    subscribeToFocusEvents() {
-        const selectAndInputFocus$ = combineLatest([
-            this.focusMonitor.monitor(this.select),
-            this.focusMonitor.monitor(this.input),
-        ]).pipe(debounceTime(10));
-        selectAndInputFocus$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(([selectFocus, inputFocus]) => {
-            this.focused = Boolean(selectFocus) || Boolean(inputFocus);
-            this.stateChanges.next();
-        });
-        selectAndInputFocus$.pipe(take(1)).subscribe(() => {
-            this.onTouch();
-        });
-    }
-    preSelectCountry() {
-        this.setDisabledState(true);
-        combineLatest([
-            this.countries$.pipe(filter(countries => countries.length > 0), first()),
-            this.countryCode,
-        ])
-            .pipe(map(([_countries, selectedCountry]) => {
-            if (!this.initialValue) {
-                const country = this.getCountryByAlpha2Code(selectedCountry) ?? this.getCountryByAlpha2Code(this.DEFAULT_COUNTRY_CODE);
-                this.setCountry(country);
-            }
-            else {
-                this.value = this.initialValue;
-            }
-            this.setDisabledState(false);
-            this.ref.markForCheck();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    getCountryByAlpha2Code(alpha2Code) {
-        return this.countries.value.find(country => country.alpha2Code === alpha2Code);
-    }
-    getCountryByCallingCode(callingCode) {
-        return this.countries.value.find(country => country.callingCode === callingCode);
-    }
-    loadCountries() {
-        const searchText$ = this.selectFilterCtrl.valueChanges.pipe(debounceTime(100), startWith(''));
-        combineLatest([this.loadCountries$, searchText$])
-            .pipe(tap(([countries, searchText]) => {
-            const searchTextLowerCase = searchText.toLowerCase();
-            const filteredCountries = countries
-                .filter(option => option.name.toLowerCase().includes(searchTextLowerCase) ||
-                option.alpha2Code.toLowerCase().includes(searchTextLowerCase) ||
-                option.callingCode.toLowerCase().includes(searchTextLowerCase))
-                .sort((optionA, optionB) => (optionB.name.startsWith(searchText) ? 1 : -1));
-            this.countries.next(filteredCountries);
-        }), delay(1), tap(() => {
-            const countryFound = this.getCountryByAlpha2Code(this.selectedCountry?.alpha2Code);
-            this.selectedCountry = countryFound ?? this.selectedCountry;
-            this.ref.markForCheck();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    disableClick(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PhoneInputComponent, isStandalone: true, selector: "ui-phone-input", inputs: { value: "value", countryList: "countryList", placeholder: "placeholder", disabled: "disabled", required: "required", testId: "testId", countryAriaLabel: "countryAriaLabel", applicationTheme: "applicationTheme", fullWidth: "fullWidth", errors: "errors", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors" }, host: { properties: { "attr.disabled": "this.disabled", "attr.theme": "this.applicationTheme", "id": "this.id", "class.floated": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
-            {
-                provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
-                useValue: { overlayPanelClass: 'phone-number-autocomplete' },
-            },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"form\"\n  appearance=\"outline\"\n  [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n  [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n  <mat-label\n    >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n    @if (required) {\n      <span>*</span>\n    }\n  </mat-label>\n\n  <div matPrefix class=\"country\">\n    @if (selectedCountry) {\n      <button class=\"selected-flag\" matPrefix type=\"button\" tabindex=\"-1\" aria-hidden=\"true\">\n        <img\n          [height]=\"20\"\n          [width]=\"24\"\n          [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n          [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n        />\n      </button>\n    }\n    <mat-select\n      #select\n      (selectionChange)=\"onOptionsSelected($event.value)\"\n      [value]=\"selectedCountry\"\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n      [ngClass]=\"{ opened: select.panelOpen }\"\n      [aria-label]=\"countryAriaLabel\"\n      [attr.data-testid]=\"countrySelectTestId\"\n    >\n      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"selectFilterCtrl\"\n          ngDefaultControl\n          placeholderLabel=\"\"\n          noEntriesFoundLabel=\"\"\n        >\n          <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n        </ngx-mat-select-search>\n      </mat-option>\n      @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n        <mat-option [value]=\"country\">\n          <div class=\"country-option\">\n            <img\n              [height]=\"20\"\n              [width]=\"24\"\n              [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n              [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n            />\n            <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n          </div>\n        </mat-option>\n      }\n    </mat-select>\n  </div>\n\n  <input\n    [attr.data-testid]=\"testId ?? 'phone-input-number'\"\n    (input)=\"onInput(form.get('phone_number')!.value)\"\n    formControlName=\"phone_number\"\n    (click)=\"disableClick($event)\"\n    [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n    [required]=\"required\"\n    matInput\n    type=\"text\"\n  />\n\n  @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n    <mat-hint class=\"error\">\n      @if (errorsLength) {\n        @for (error of _errors; track trackByFn($index, error)) {\n          <div class=\"errors\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        }\n      }\n      @if (ngControl && !hideBuiltInErrors) {\n        <ui-validation-error\n          [ngControl]=\"ngControl\"\n          [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n        ></ui-validation-error>\n      }\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width:599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PhoneInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-phone-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
-                            useValue: { overlayPanelClass: 'phone-number-autocomplete' },
-                        },
-                    ], imports: [
-                        MatFormField,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        NgClass,
-                        MatLabel,
-                        MatPrefix,
-                        MatSelect,
-                        MatSelectTrigger,
-                        MatOption,
-                        MatSelectSearchComponent,
-                        IconComponent,
-                        MatSelectSearchClearDirective,
-                        MatInput,
-                        NgStyle,
-                        MatHint,
-                        ValidationErrorComponent,
-                        AsyncPipe,
-                        UiTranslatePipe,
-                        HasValidationErrorPipe,
-                        JoinStringsPipe,
-                    ], template: "<mat-form-field\n  [formGroup]=\"form\"\n  appearance=\"outline\"\n  [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n  [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n  <mat-label\n    >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n    @if (required) {\n      <span>*</span>\n    }\n  </mat-label>\n\n  <div matPrefix class=\"country\">\n    @if (selectedCountry) {\n      <button class=\"selected-flag\" matPrefix type=\"button\" tabindex=\"-1\" aria-hidden=\"true\">\n        <img\n          [height]=\"20\"\n          [width]=\"24\"\n          [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n          [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n        />\n      </button>\n    }\n    <mat-select\n      #select\n      (selectionChange)=\"onOptionsSelected($event.value)\"\n      [value]=\"selectedCountry\"\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n      [ngClass]=\"{ opened: select.panelOpen }\"\n      [aria-label]=\"countryAriaLabel\"\n      [attr.data-testid]=\"countrySelectTestId\"\n    >\n      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"selectFilterCtrl\"\n          ngDefaultControl\n          placeholderLabel=\"\"\n          noEntriesFoundLabel=\"\"\n        >\n          <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n        </ngx-mat-select-search>\n      </mat-option>\n      @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n        <mat-option [value]=\"country\">\n          <div class=\"country-option\">\n            <img\n              [height]=\"20\"\n              [width]=\"24\"\n              [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n              [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n            />\n            <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n          </div>\n        </mat-option>\n      }\n    </mat-select>\n  </div>\n\n  <input\n    [attr.data-testid]=\"testId ?? 'phone-input-number'\"\n    (input)=\"onInput(form.get('phone_number')!.value)\"\n    formControlName=\"phone_number\"\n    (click)=\"disableClick($event)\"\n    [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n    [required]=\"required\"\n    matInput\n    type=\"text\"\n  />\n\n  @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n    <mat-hint class=\"error\">\n      @if (errorsLength) {\n        @for (error of _errors; track trackByFn($index, error)) {\n          <div class=\"errors\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        }\n      }\n      @if (ngControl && !hideBuiltInErrors) {\n        <ui-validation-error\n          [ngControl]=\"ngControl\"\n          [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n        ></ui-validation-error>\n      }\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width:599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
-                type: Input
-            }], countryList: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }, {
-                type: Input
-            }], required: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], countryAriaLabel: [{
-                type: Input
-            }], applicationTheme: [{
-                type: HostBinding,
-                args: ['attr.theme']
-            }, {
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], hideBuiltInErrors: [{
-                type: Input
-            }], hideLabelInErrors: [{
-                type: Input
-            }], input: [{
-                type: ViewChild,
-                args: [MatInput, { read: ElementRef, static: true }]
-            }], select: [{
-                type: ViewChild,
-                args: [MatSelect, { read: ElementRef, static: true }]
-            }], id: [{
-                type: HostBinding
-            }], shouldLabelFloat: [{
-                type: HostBinding,
-                args: ['class.floated']
-            }], describedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
-            }] } });
-
-class PhoneInputComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PhoneInputComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: PhoneInputComponentModule, imports: [CommonModule,
-            MatProgressSpinnerModule,
-            ReactiveFormsModule,
-            MatSelectModule,
-            MatIconModule,
-            MatInputModule,
-            NgxMatSelectSearchModule,
-            IconComponentModule,
-            SpinnerComponentModule,
-            UiTranslatePipe,
-            ValidationErrorModule,
-            HasValidationErrorPipe,
-            PhoneInputComponent,
-            JoinStringsPipe], exports: [PhoneInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PhoneInputComponentModule, imports: [CommonModule,
-            MatProgressSpinnerModule,
-            ReactiveFormsModule,
-            MatSelectModule,
-            MatIconModule,
-            MatInputModule,
-            NgxMatSelectSearchModule,
-            IconComponentModule,
-            SpinnerComponentModule,
-            ValidationErrorModule,
-            PhoneInputComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PhoneInputComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [PhoneInputComponent],
-                    imports: [
-                        CommonModule,
-                        MatProgressSpinnerModule,
-                        ReactiveFormsModule,
-                        MatSelectModule,
-                        MatIconModule,
-                        MatInputModule,
-                        NgxMatSelectSearchModule,
-                        IconComponentModule,
-                        SpinnerComponentModule,
-                        UiTranslatePipe,
-                        ValidationErrorModule,
-                        HasValidationErrorPipe,
-                        PhoneInputComponent,
-                        JoinStringsPipe,
-                    ],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { FocusMonitor } from "@angular/cdk/a11y";
+import { AsyncPipe, CommonModule, NgClass, NgStyle } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, ElementRef, HostBinding, Input, NgModule, Pipe, ViewChild, inject } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormsModule, NgControl, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl } from "@angular/forms";
+import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from "@angular/material/autocomplete";
+import { ErrorStateMatcher } from "@angular/material/core";
+import { MatFormField, MatHint, MatLabel, MatPrefix } from "@angular/material/form-field";
+import { MatInput, MatInputModule } from "@angular/material/input";
+import { MatOption, MatSelect, MatSelectModule, MatSelectTrigger } from "@angular/material/select";
+import { parsePhoneNumber } from "libphonenumber-js";
+import { MatSelectSearchClearDirective, MatSelectSearchComponent, NgxMatSelectSearchModule } from "ngx-mat-select-search";
+import { BehaviorSubject, Subject, combineLatest, debounceTime, delay, filter, first, map, startWith, take, tap } from "rxjs";
+import { HasValidationErrorPipe, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import { IconComponent, IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { ValidationErrorComponent, ValidationErrorModule } from "@testgorilla/tgo-ui/components/validation-error";
+import { MatIconModule } from "@angular/material/icon";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { SpinnerComponentModule } from "@testgorilla/tgo-ui/components/spinner";
+var JoinStringsPipe = class JoinStringsPipe {
+	transform(value, separator) {
+		return value.filter(Boolean).join(separator ? separator : " - ");
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: JoinStringsPipe,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Pipe
+		});
+	}
+	static {
+		this.ɵpipe = i0.ɵɵngDeclarePipe({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: JoinStringsPipe,
+			isStandalone: true,
+			name: "joinStrings"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: JoinStringsPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "joinStrings" }]
+	}]
+});
+var PhoneInputComponent = class PhoneInputComponent {
+	set value(value) {
+		this.initialValue = this.initialValue || value;
+		try {
+			const parsed = parsePhoneNumber(value);
+			const formatted = parsed.formatInternational();
+			this.selectedCountry = this.getCountryByAlpha2Code(parsed.country) ?? this.selectedCountry;
+			this.form.patchValue({ phone_number: formatted.replace(this.selectedCountry.callingCode, "") });
+		} catch {
+			if (value?.length <= 4) this.selectedCountry = this.getCountryByCallingCode(value) ?? this.selectedCountry;
+			this.form.patchValue({ phone_number: value?.replace(this.selectedCountry?.callingCode, "") });
+		}
+		this.stateChanges.next();
+	}
+	get value() {
+		return this.getNumberWithCountryCode();
+	}
+	set countryList(countryList) {
+		this.loadCountries$.next(countryList);
+		this.selectedCountry = this.selectedCountry ?? countryList[0];
+	}
+	set placeholder(value) {
+		this.internalPlaceholder = value;
+		this.stateChanges.next();
+	}
+	get placeholder() {
+		return this.internalPlaceholder;
+	}
+	get countrySelectTestId() {
+		return this.testId ? `${this.testId}-country` : null;
+	}
+	set errors(errors) {
+		if (errors) {
+			this._errors = errors?.filter(Boolean) ?? [];
+			this.errorsLength = this.setErrorsLength();
+		}
+	}
+	static {
+		this.nextId = 0;
+	}
+	get shouldLabelFloat() {
+		return true;
+	}
+	get empty() {
+		return Boolean(this.form.value);
+	}
+	get errorState() {
+		return this.errorMatcher.isErrorState(this.ngControl?.control, null);
+	}
+	constructor() {
+		this.testId = null;
+		this.countryAriaLabel = "";
+		this.applicationTheme = "light";
+		this.fullWidth = false;
+		this.hideBuiltInErrors = false;
+		this.hideLabelInErrors = false;
+		this.countries = new BehaviorSubject([]);
+		this.countries$ = this.countries.asObservable();
+		this.ngControl = inject(NgControl, {
+			optional: true,
+			self: true
+		});
+		this.errorMatcher = inject(ErrorStateMatcher);
+		this.fb = inject(UntypedFormBuilder);
+		this.focusMonitor = inject(FocusMonitor);
+		this.ref = inject(ChangeDetectorRef);
+		this.defaultAppTheme = inject("CANOPYUI_DEFAULT_APPLICATION_THEME", { optional: true });
+		this.form = this.fb.group({ phone_number: new UntypedFormControl() });
+		this.controlType = "phone-number";
+		this.loadCountries$ = new BehaviorSubject([]);
+		this.countryCode = new BehaviorSubject("US");
+		this.stateChanges = new Subject();
+		this.selectFilterCtrl = new UntypedFormControl("");
+		this.countryFlagSrc = "assets/svg-country-flags/";
+		this.id = `phone-number${PhoneInputComponent.nextId++}`;
+		this.describedBy = "";
+		this.DEFAULT_COUNTRY_CODE = "US";
+		this.destroyRef = inject(DestroyRef);
+		this.trackByFn = (index, value) => value;
+		if (this.ngControl !== null) this.ngControl.valueAccessor = this;
+		if (this.defaultAppTheme) this.applicationTheme = this.defaultAppTheme;
+	}
+	ngDoCheck() {
+		if (this.ngControl?.touched || this.ngControl?.errors) this.ref.markForCheck();
+	}
+	ngOnInit() {
+		this.loadCountries();
+		this.preSelectCountry();
+		this.subscribeToFocusEvents();
+	}
+	setErrorsLength() {
+		if (this._errors) return this._errors.filter((err) => Boolean(err)).length > 0;
+		return false;
+	}
+	setDescribedByIds(ids) {
+		this.userAriaDescribedBy = ids.join(" ");
+	}
+	writeValue(phoneNumber) {
+		if (phoneNumber) this.value = phoneNumber;
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouch = fn;
+	}
+	setDisabledState(isDisabled) {
+		if (isDisabled) this.form.disable();
+		else this.form.enable();
+		this.disabled = isDisabled;
+		this.stateChanges.next();
+		this.ref.markForCheck();
+	}
+	ngOnDestroy() {
+		this.focusMonitor.stopMonitoring(this.input);
+		this.focusMonitor.stopMonitoring(this.select);
+		this.stateChanges.complete();
+	}
+	onOptionsSelected(value) {
+		this.setCountry(value);
+	}
+	onInput(value) {
+		this.value = (this.selectedCountry?.callingCode ?? "") + value;
+		this.onChange(this.value);
+	}
+	filteredCountryTrackByMethod(index, el) {
+		return el.alpha2Code;
+	}
+	setCountry(country) {
+		if (country) this.selectedCountry = country;
+		this.value = this.getNumberWithCountryCode();
+		this.onChange(this.value);
+	}
+	getNumberWithCountryCode() {
+		const nationalNumber = this.form.value?.phone_number;
+		return nationalNumber ? (this.selectedCountry?.callingCode ?? "") + nationalNumber : "";
+	}
+	subscribeToFocusEvents() {
+		const selectAndInputFocus$ = combineLatest([this.focusMonitor.monitor(this.select), this.focusMonitor.monitor(this.input)]).pipe(debounceTime(10));
+		selectAndInputFocus$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(([selectFocus, inputFocus]) => {
+			this.focused = Boolean(selectFocus) || Boolean(inputFocus);
+			this.stateChanges.next();
+		});
+		selectAndInputFocus$.pipe(take(1)).subscribe(() => {
+			this.onTouch();
+		});
+	}
+	preSelectCountry() {
+		this.setDisabledState(true);
+		combineLatest([this.countries$.pipe(filter((countries) => countries.length > 0), first()), this.countryCode]).pipe(map(([_countries, selectedCountry]) => {
+			if (!this.initialValue) {
+				const country = this.getCountryByAlpha2Code(selectedCountry) ?? this.getCountryByAlpha2Code(this.DEFAULT_COUNTRY_CODE);
+				this.setCountry(country);
+			} else this.value = this.initialValue;
+			this.setDisabledState(false);
+			this.ref.markForCheck();
+		}), takeUntilDestroyed(this.destroyRef)).subscribe();
+	}
+	getCountryByAlpha2Code(alpha2Code) {
+		return this.countries.value.find((country) => country.alpha2Code === alpha2Code);
+	}
+	getCountryByCallingCode(callingCode) {
+		return this.countries.value.find((country) => country.callingCode === callingCode);
+	}
+	loadCountries() {
+		const searchText$ = this.selectFilterCtrl.valueChanges.pipe(debounceTime(100), startWith(""));
+		combineLatest([this.loadCountries$, searchText$]).pipe(tap(([countries, searchText]) => {
+			const searchTextLowerCase = searchText.toLowerCase();
+			const filteredCountries = countries.filter((option) => option.name.toLowerCase().includes(searchTextLowerCase) || option.alpha2Code.toLowerCase().includes(searchTextLowerCase) || option.callingCode.toLowerCase().includes(searchTextLowerCase)).sort((optionA, optionB) => optionB.name.startsWith(searchText) ? 1 : -1);
+			this.countries.next(filteredCountries);
+		}), delay(1), tap(() => {
+			const countryFound = this.getCountryByAlpha2Code(this.selectedCountry?.alpha2Code);
+			this.selectedCountry = countryFound ?? this.selectedCountry;
+			this.ref.markForCheck();
+		}), takeUntilDestroyed(this.destroyRef)).subscribe();
+	}
+	disableClick(ev) {
+		ev.preventDefault();
+		ev.stopPropagation();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: PhoneInputComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: PhoneInputComponent,
+			isStandalone: true,
+			selector: "ui-phone-input",
+			inputs: {
+				value: "value",
+				countryList: "countryList",
+				placeholder: "placeholder",
+				disabled: "disabled",
+				required: "required",
+				testId: "testId",
+				countryAriaLabel: "countryAriaLabel",
+				applicationTheme: "applicationTheme",
+				fullWidth: "fullWidth",
+				errors: "errors",
+				hideBuiltInErrors: "hideBuiltInErrors",
+				hideLabelInErrors: "hideLabelInErrors"
+			},
+			host: { properties: {
+				"attr.disabled": "this.disabled",
+				"attr.theme": "this.applicationTheme",
+				"id": "this.id",
+				"class.floated": "this.shouldLabelFloat",
+				"attr.aria-describedby": "this.describedBy"
+			} },
+			providers: [{
+				provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+				useValue: { overlayPanelClass: "phone-number-autocomplete" }
+			}],
+			viewQueries: [{
+				propertyName: "input",
+				first: true,
+				predicate: MatInput,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}, {
+				propertyName: "select",
+				first: true,
+				predicate: MatSelect,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}],
+			ngImport: i0,
+			template: "<mat-form-field\n  [formGroup]=\"form\"\n  appearance=\"outline\"\n  [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n  [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n  <mat-label\n    >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n    @if (required) {\n      <span>*</span>\n    }\n  </mat-label>\n\n  <div matPrefix class=\"country\">\n    @if (selectedCountry) {\n      <button class=\"selected-flag\" matPrefix type=\"button\" tabindex=\"-1\" aria-hidden=\"true\">\n        <img\n          [height]=\"20\"\n          [width]=\"24\"\n          [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n          [alt]=\"'Country flag ' + $safeNavigationMigration(selectedCountry?.alpha2Code?.toLowerCase())\"\n        />\n      </button>\n    }\n    <mat-select\n      #select\n      (selectionChange)=\"onOptionsSelected($event.value)\"\n      [value]=\"selectedCountry\"\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n      [ngClass]=\"{ opened: select.panelOpen }\"\n      [aria-label]=\"countryAriaLabel\"\n      [attr.data-testid]=\"countrySelectTestId\"\n    >\n      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"selectFilterCtrl\"\n          ngDefaultControl\n          placeholderLabel=\"\"\n          noEntriesFoundLabel=\"\"\n        >\n          <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n        </ngx-mat-select-search>\n      </mat-option>\n      @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n        <mat-option [value]=\"country\">\n          <div class=\"country-option\">\n            <img\n              [height]=\"20\"\n              [width]=\"24\"\n              [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n              [alt]=\"'Country flag ' + $safeNavigationMigration(country?.alpha2Code?.toLowerCase())!\"\n            />\n            <small>{{\n              $any([\n                $safeNavigationMigration(country?.name),\n                '(' + $safeNavigationMigration(country?.callingCode) + ')',\n              ]) | joinStrings: ' '\n            }}</small>\n          </div>\n        </mat-option>\n      }\n    </mat-select>\n  </div>\n\n  <input\n    [attr.data-testid]=\"testId ?? 'phone-input-number'\"\n    (input)=\"onInput(form.get('phone_number')!.value)\"\n    formControlName=\"phone_number\"\n    (click)=\"disableClick($event)\"\n    [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n    [required]=\"required\"\n    matInput\n    type=\"text\"\n  />\n\n  @if (errorsLength || ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) {\n    <mat-hint class=\"error\">\n      @if (errorsLength) {\n        @for (error of _errors; track trackByFn($index, error)) {\n          <div class=\"errors\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        }\n      }\n      @if (ngControl && !hideBuiltInErrors) {\n        <ui-validation-error\n          [ngControl]=\"ngControl\"\n          [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n        ></ui-validation-error>\n      }\n    </mat-hint>\n  }\n</mat-form-field>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width:599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.DefaultValueAccessor,
+					selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatusGroup,
+					selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+				},
+				{
+					kind: "directive",
+					type: i1.RequiredValidator,
+					selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",
+					inputs: ["required"]
+				},
+				{
+					kind: "ngmodule",
+					type: ReactiveFormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.FormControlDirective,
+					selector: "[formControl]",
+					inputs: [
+						"formControl",
+						"disabled",
+						"ngModel"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngForm"]
+				},
+				{
+					kind: "directive",
+					type: i1.FormGroupDirective,
+					selector: "[formGroup]",
+					inputs: ["formGroup"],
+					outputs: ["ngSubmit"],
+					exportAs: ["ngForm"]
+				},
+				{
+					kind: "directive",
+					type: i1.FormControlName,
+					selector: "[formControlName]",
+					inputs: [
+						"formControlName",
+						"disabled",
+						"ngModel"
+					],
+					outputs: ["ngModelChange"]
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "directive",
+					type: MatPrefix,
+					selector: "[matPrefix], [matIconPrefix], [matTextPrefix]",
+					inputs: ["matTextPrefix"]
+				},
+				{
+					kind: "component",
+					type: MatSelect,
+					selector: "mat-select",
+					inputs: [
+						"aria-describedby",
+						"panelClass",
+						"disabled",
+						"disableRipple",
+						"tabIndex",
+						"hideSingleSelectionIndicator",
+						"placeholder",
+						"required",
+						"multiple",
+						"disableOptionCentering",
+						"compareWith",
+						"value",
+						"aria-label",
+						"aria-labelledby",
+						"errorStateMatcher",
+						"typeaheadDebounceInterval",
+						"sortComparator",
+						"id",
+						"panelWidth",
+						"canSelectNullableOptions"
+					],
+					outputs: [
+						"openedChange",
+						"opened",
+						"closed",
+						"selectionChange",
+						"valueChange"
+					],
+					exportAs: ["matSelect"]
+				},
+				{
+					kind: "directive",
+					type: MatSelectTrigger,
+					selector: "mat-select-trigger"
+				},
+				{
+					kind: "component",
+					type: MatOption,
+					selector: "mat-option",
+					inputs: [
+						"value",
+						"id",
+						"disabled"
+					],
+					outputs: ["onSelectionChange"],
+					exportAs: ["matOption"]
+				},
+				{
+					kind: "component",
+					type: MatSelectSearchComponent,
+					selector: "ngx-mat-select-search",
+					inputs: [
+						"placeholderLabel",
+						"type",
+						"closeIcon",
+						"closeSvgIcon",
+						"noEntriesFoundLabel",
+						"clearSearchInput",
+						"searching",
+						"disableInitialFocus",
+						"enableClearOnEscapePressed",
+						"preventHomeEndKeyPropagation",
+						"disableScrollToActiveOnOptionsChanged",
+						"ariaLabel",
+						"showToggleAllCheckbox",
+						"toggleAllCheckboxChecked",
+						"toggleAllCheckboxIndeterminate",
+						"toggleAllCheckboxTooltipMessage",
+						"toggleAllCheckboxTooltipPosition",
+						"hideClearSearchButton",
+						"alwaysRestoreSelectedOptionsMulti",
+						"recreateValuesArray"
+					],
+					outputs: ["toggleAll"]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatSelectSearchClearDirective,
+					selector: "[ngxMatSelectSearchClear]"
+				},
+				{
+					kind: "directive",
+					type: MatInput,
+					selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+					inputs: [
+						"disabled",
+						"id",
+						"placeholder",
+						"name",
+						"required",
+						"type",
+						"errorStateMatcher",
+						"aria-describedby",
+						"value",
+						"readonly",
+						"disabledInteractive"
+					],
+					exportAs: ["matInput"]
+				},
+				{
+					kind: "directive",
+					type: NgStyle,
+					selector: "[ngStyle]",
+					inputs: ["ngStyle"]
+				},
+				{
+					kind: "directive",
+					type: MatHint,
+					selector: "mat-hint",
+					inputs: ["align", "id"]
+				},
+				{
+					kind: "component",
+					type: ValidationErrorComponent,
+					selector: "ui-validation-error",
+					inputs: [
+						"ngControl",
+						"touchedOn",
+						"errorMessage",
+						"label",
+						"applicationTheme",
+						"customErrors"
+					]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: HasValidationErrorPipe,
+					name: "hasValidationError"
+				},
+				{
+					kind: "pipe",
+					type: JoinStringsPipe,
+					name: "joinStrings"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: PhoneInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-phone-input",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+				useValue: { overlayPanelClass: "phone-number-autocomplete" }
+			}],
+			imports: [
+				MatFormField,
+				FormsModule,
+				ReactiveFormsModule,
+				NgClass,
+				MatLabel,
+				MatPrefix,
+				MatSelect,
+				MatSelectTrigger,
+				MatOption,
+				MatSelectSearchComponent,
+				IconComponent,
+				MatSelectSearchClearDirective,
+				MatInput,
+				NgStyle,
+				MatHint,
+				ValidationErrorComponent,
+				AsyncPipe,
+				UiTranslatePipe,
+				HasValidationErrorPipe,
+				JoinStringsPipe
+			],
+			template: "<mat-form-field\n  [formGroup]=\"form\"\n  appearance=\"outline\"\n  [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n  [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n  <mat-label\n    >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n    @if (required) {\n      <span>*</span>\n    }\n  </mat-label>\n\n  <div matPrefix class=\"country\">\n    @if (selectedCountry) {\n      <button class=\"selected-flag\" matPrefix type=\"button\" tabindex=\"-1\" aria-hidden=\"true\">\n        <img\n          [height]=\"20\"\n          [width]=\"24\"\n          [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n          [alt]=\"'Country flag ' + $safeNavigationMigration(selectedCountry?.alpha2Code?.toLowerCase())\"\n        />\n      </button>\n    }\n    <mat-select\n      #select\n      (selectionChange)=\"onOptionsSelected($event.value)\"\n      [value]=\"selectedCountry\"\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n      [ngClass]=\"{ opened: select.panelOpen }\"\n      [aria-label]=\"countryAriaLabel\"\n      [attr.data-testid]=\"countrySelectTestId\"\n    >\n      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"selectFilterCtrl\"\n          ngDefaultControl\n          placeholderLabel=\"\"\n          noEntriesFoundLabel=\"\"\n        >\n          <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n        </ngx-mat-select-search>\n      </mat-option>\n      @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n        <mat-option [value]=\"country\">\n          <div class=\"country-option\">\n            <img\n              [height]=\"20\"\n              [width]=\"24\"\n              [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n              [alt]=\"'Country flag ' + $safeNavigationMigration(country?.alpha2Code?.toLowerCase())!\"\n            />\n            <small>{{\n              $any([\n                $safeNavigationMigration(country?.name),\n                '(' + $safeNavigationMigration(country?.callingCode) + ')',\n              ]) | joinStrings: ' '\n            }}</small>\n          </div>\n        </mat-option>\n      }\n    </mat-select>\n  </div>\n\n  <input\n    [attr.data-testid]=\"testId ?? 'phone-input-number'\"\n    (input)=\"onInput(form.get('phone_number')!.value)\"\n    formControlName=\"phone_number\"\n    (click)=\"disableClick($event)\"\n    [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n    [required]=\"required\"\n    matInput\n    type=\"text\"\n  />\n\n  @if (errorsLength || ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) {\n    <mat-hint class=\"error\">\n      @if (errorsLength) {\n        @for (error of _errors; track trackByFn($index, error)) {\n          <div class=\"errors\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        }\n      }\n      @if (ngControl && !hideBuiltInErrors) {\n        <ui-validation-error\n          [ngControl]=\"ngControl\"\n          [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n        ></ui-validation-error>\n      }\n    </mat-hint>\n  }\n</mat-form-field>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width:599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{ type: Input }],
+		countryList: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		disabled: [{
+			type: HostBinding,
+			args: ["attr.disabled"]
+		}, { type: Input }],
+		required: [{ type: Input }],
+		testId: [{ type: Input }],
+		countryAriaLabel: [{ type: Input }],
+		applicationTheme: [{
+			type: HostBinding,
+			args: ["attr.theme"]
+		}, { type: Input }],
+		fullWidth: [{ type: Input }],
+		errors: [{ type: Input }],
+		hideBuiltInErrors: [{ type: Input }],
+		hideLabelInErrors: [{ type: Input }],
+		input: [{
+			type: ViewChild,
+			args: [MatInput, {
+				read: ElementRef,
+				static: true
+			}]
+		}],
+		select: [{
+			type: ViewChild,
+			args: [MatSelect, {
+				read: ElementRef,
+				static: true
+			}]
+		}],
+		id: [{ type: HostBinding }],
+		shouldLabelFloat: [{
+			type: HostBinding,
+			args: ["class.floated"]
+		}],
+		describedBy: [{
+			type: HostBinding,
+			args: ["attr.aria-describedby"]
+		}]
+	}
+});
+var PhoneInputComponentModule = class PhoneInputComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: PhoneInputComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: PhoneInputComponentModule,
+			imports: [
+				CommonModule,
+				MatProgressSpinnerModule,
+				ReactiveFormsModule,
+				MatSelectModule,
+				MatIconModule,
+				MatInputModule,
+				NgxMatSelectSearchModule,
+				IconComponentModule,
+				SpinnerComponentModule,
+				UiTranslatePipe,
+				ValidationErrorModule,
+				HasValidationErrorPipe,
+				PhoneInputComponent,
+				JoinStringsPipe
+			],
+			exports: [PhoneInputComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: PhoneInputComponentModule,
+			imports: [
+				CommonModule,
+				MatProgressSpinnerModule,
+				ReactiveFormsModule,
+				MatSelectModule,
+				MatIconModule,
+				MatInputModule,
+				NgxMatSelectSearchModule,
+				IconComponentModule,
+				SpinnerComponentModule,
+				ValidationErrorModule,
+				PhoneInputComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: PhoneInputComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			exports: [PhoneInputComponent],
+			imports: [
+				CommonModule,
+				MatProgressSpinnerModule,
+				ReactiveFormsModule,
+				MatSelectModule,
+				MatIconModule,
+				MatInputModule,
+				NgxMatSelectSearchModule,
+				IconComponentModule,
+				SpinnerComponentModule,
+				UiTranslatePipe,
+				ValidationErrorModule,
+				HasValidationErrorPipe,
+				PhoneInputComponent,
+				JoinStringsPipe
+			]
+		}]
+	}]
+});
 export { JoinStringsPipe, PhoneInputComponent, PhoneInputComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-phone-input.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-phone-input.mjs.map