@onemrvapublic/design-system 20.6.3-develop.4 → 20.7.0

package/fesm2022/onemrvapublic-design-system-mat-input-phone.mjs

@@ -1,88 +1,67 @@
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { HostListener, Directive, EventEmitter, inject, ViewChild, Output, Input, ViewEncapsulation, Component } from '@angular/core';
+import { inject, EventEmitter, ElementRef, ChangeDetectorRef, Input, Output, ViewChild, ViewEncapsulation, Component, HostListener, Directive } from '@angular/core';
 import * as i4 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormControl, FormBuilder, NgControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
 import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { Subject, debounceTime, startWith, combineLatestWith, map, takeUntil, zip } from 'rxjs';
+import { Subject, debounceTime, startWith, combineLatestWith, takeUntil, zip } from 'rxjs';
 import * as i3 from '@onemrvapublic/design-system/mat-select-search';
 import { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';
-import parsePhoneNumber from 'libphonenumber-js';
-import { FlagIconComponent } from '@onemrvapublic/design-system/flag-icon';
 import { OnemRvaCDNCountryService } from '@onemrvapublic/design-system/shared';
-
-class PhoneNumberDirective {
-    onKeyDown(event) {
-        const e = event;
-        const allowedKey = [
-            '0',
-            '1',
-            '2',
-            '3',
-            '4',
-            '5',
-            '6',
-            '7',
-            '8',
-            '9',
-            ' ',
-            'Backspace',
-            'Delete',
-            'Tab',
-            '+',
-            '-',
-            'Enter',
-            'ArrowLeft',
-            'ArrowRight',
-            'ArrowUp',
-            'ArrowDown',
-            'Home',
-            'End',
-        ];
-        if (allowedKey.indexOf(e.key) >= 0)
-            return;
-        const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
-        if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0)
-            return;
-        e.preventDefault();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PhoneNumberDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: PhoneNumberDirective, isStandalone: true, selector: "[phoneNumber]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PhoneNumberDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[phoneNumber]',
-                    standalone: true,
-                }]
-        }], propDecorators: { onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+import { map } from 'rxjs/operators';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { FlagIconComponent } from '@onemrvapublic/design-system/flag-icon';
+import parsePhoneNumber from 'libphonenumber-js';
 
 class OnemrvaMatInputPhoneComponent {
+    static { this.nextId = 0; }
+    get numberField() {
+        return this.parts.get('number');
+    }
+    get countryCodeField() {
+        return this.parts.get('countryCode');
+    }
     constructor() {
-        this.readonly = false;
-        this.label = 'Phone number';
+        this.cdn = inject(OnemRvaCDNCountryService);
+        this.countries$ = this.cdn.getCountries();
         this.noEntriesFoundLabel = 'Not found';
-        this.placeholder = '+32 475 12 34 56';
         this.placeholderLabel = 'Search';
+        this.searchAriaLabel = 'Search';
+        this.label = 'Phone number';
         this.defaultPrefix = '+32';
-        this.searchAriaLabel = '';
-        this.hint = '';
         this.getCountry = new EventEmitter();
-        this.countryCode = new FormControl('');
         this.filterCtrl = new FormControl('');
         this.destroyNotifier$ = new Subject();
-        this.cdn = inject(OnemRvaCDNCountryService);
-        this.countries$ = this.cdn.getCountries();
+        this.controlType = 'phone-input';
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.id = `phone-input-${OnemrvaMatInputPhoneComponent.nextId++}`;
+        this.touched = false;
+        this.focusMonitor = inject(FocusMonitor);
+        this.elementRef = inject((ElementRef));
+        this.cd = inject(ChangeDetectorRef);
+        this.formBuilder = inject(FormBuilder);
+        this.ngControl = inject(NgControl, { optional: true });
+        this.onChange = (_) => {
+            //console.log('---');
+        };
+        this.onTouched = () => {
+            if (!this.touched) {
+                this.touched = true;
+                this.stateChanges.next();
+            }
+        };
+        this.readonly = false;
+        this._disabled = false;
+        this._placeholder = '';
+        this._required = false;
         this.filteredCountries$ = this.filterCtrl.valueChanges.pipe(debounceTime(400), startWith(''), // Explicitly define type
         combineLatestWith(this.countries$), // Ensure correct tuple structure
         map(([search, countries]) => {
@@ -93,17 +72,122 @@ class OnemrvaMatInputPhoneComponent {
                 return country.name?.toLowerCase().includes(search.toLowerCase());
             });
         }));
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this; // ✅ Only assign if ngControl exists
+        }
+        this.parts = this.formBuilder.group({
+            countryCode: ['', [Validators.maxLength(2)]],
+            number: ['', []],
+        });
+    }
+    errors() {
+        return this.parts.errors;
+    }
+    get errorState() {
+        const control = this.ngControl?.control;
+        const externalErrors = !!(control &&
+            control.invalid &&
+            (control.dirty || control.touched));
+        // Also check internal form errors
+        const internalErrors = !!(this.parts &&
+            this.parts.invalid &&
+            (this.parts.dirty || this.parts.touched));
+        return externalErrors || internalErrors;
     }
-    get number() {
-        return this.phoneNumber;
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get empty() {
+        const { value: { countryCode, number }, } = this.parts;
+        // Consider empty if both fields are truly empty or just contain whitespace
+        const countryCodeEmpty = !countryCode || countryCode.trim() === '';
+        const numberEmpty = !number || number.trim() === '';
+        return countryCodeEmpty && numberEmpty;
+    }
+    get value() {
+        const { value: { countryCode, number }, } = this.parts;
+        // Return empty string if both are empty
+        if ((!countryCode || countryCode.trim() === '') &&
+            (!number || number.trim() === '')) {
+            return '';
+        }
+        // Return the number as is (since it should already contain the full international number)
+        return number || '';
+    }
+    set value(phoneNumber) {
+        // If empty, clear both fields
+        if (!phoneNumber || phoneNumber.trim() === '') {
+            this.parts.setValue({
+                countryCode: null,
+                number: null,
+            });
+        }
+        else {
+            // Keep existing logic for parsing the phone number
+            this.parts.setValue({
+                countryCode: this.countryCodeField.getRawValue() || null,
+                number: phoneNumber || null,
+            });
+        }
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this._disabled ? this.parts.disable() : this.parts.enable();
+        this.stateChanges.next();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.stateChanges.next();
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
     }
     ngOnInit() {
-        this.number.valueChanges
-            .pipe(startWith(this.number.getRawValue()), takeUntil(this.destroyNotifier$))
+        // Add focus monitoring
+        this.focusMonitor.monitor(this.elementRef, true).subscribe(origin => {
+            this.focused = !!origin;
+            if (!this.focused && !this.touched) {
+                this.touched = true;
+                this.onTouched();
+            }
+            this.stateChanges.next();
+        });
+        // Monitor internal form changes and notify parent form
+        this.parts.valueChanges
+            .pipe(takeUntil(this.destroyNotifier$))
+            .subscribe(() => {
+            this.onChange(this.value);
+            this.stateChanges.next();
+        });
+        this.focusMonitor.monitor(this.elementRef, true).subscribe(origin => {
+            this.focused = !!origin;
+            if (!this.focused) {
+                this.onTouched();
+            }
+            this.stateChanges.next();
+        });
+        this.numberField.valueChanges
+            .pipe(startWith(this.numberField.getRawValue()), takeUntil(this.destroyNotifier$))
             .subscribe(number => {
-            if (number !== '') {
+            if (number && number !== '') {
                 if (number.substring(0, 1) !== '+')
-                    this.countryCode.setValue('', { emitEvent: false });
+                    this.countryCodeField.setValue('', { emitEvent: false });
                 if (number === '0') {
                     this.cdn
                         .findCountryFromPrefix(this.defaultPrefix)
@@ -111,13 +195,15 @@ class OnemrvaMatInputPhoneComponent {
                         .subscribe(country => {
                         if (country) {
                             //this.getCountry.next(country);
-                            this.number.setValue(this.defaultPrefix, {
+                            this.numberField.setValue(this.defaultPrefix, {
+                                emitEvent: false,
+                            });
+                            this.countryCodeField.setValue(country.code, {
                                 emitEvent: false,
                             });
-                            this.countryCode.setValue(country.code, { emitEvent: false });
                         }
                         else {
-                            this.countryCode.setValue('');
+                            this.countryCodeField.setValue('');
                         }
                         this.formatPhoneNumber();
                     });
@@ -129,20 +215,20 @@ class OnemrvaMatInputPhoneComponent {
                         .subscribe(country => {
                         if (country) {
                             //this.getCountry.next(country);
-                            this.countryCode.setValue(country.code);
+                            this.countryCodeField.setValue(country.code);
                         }
                         else {
-                            this.countryCode.setValue('');
+                            this.countryCodeField.setValue('');
                         }
                         this.formatPhoneNumber();
                     });
                 }
             }
         });
-        this.countryCode.valueChanges
+        this.countryCodeField.valueChanges
             .pipe(takeUntil(this.destroyNotifier$))
             .subscribe(value => {
-            let number = this.number.getRawValue();
+            let number = this.numberField.getRawValue() ?? '';
             zip(this.cdn.findCountryFromPrefix(number), this.cdn.findCountryFromCode(value)).subscribe(([countryFromVies, countryFromCode]) => {
                 // Perform your action here using countryFromVies and countryFromCode
                 if (countryFromVies) {
@@ -154,11 +240,11 @@ class OnemrvaMatInputPhoneComponent {
                         number = number.replace('+', '');
                     }
                     number = countryFromCode.dial_code + number;
-                    this.number.setValue(number, { emitEvent: false });
+                    this.numberField.setValue(number, { emitEvent: false });
                     this.formatPhoneNumber();
                 }
                 setTimeout(() => {
-                    this.numberInput.nativeElement.focus();
+                    this.number.nativeElement.focus();
                 }, 200);
             });
         });
@@ -166,81 +252,74 @@ class OnemrvaMatInputPhoneComponent {
     handleClick(e) {
         e.stopPropagation();
     }
-    clearValidators() {
-        let required = false;
-        if (this.number.hasValidator(Validators.required)) {
-            required = true;
+    ngOnDestroy() {
+        this.destroyNotifier$.next();
+        this.destroyNotifier$.complete();
+    }
+    autoFocusNext(control, nextElement) {
+        if (!control.errors && nextElement) {
+            this.focusMonitor.focusVia(nextElement, 'program');
         }
-        this.number.clearValidators();
-        if (required) {
-            this.number.addValidators(Validators.required);
+    }
+    onContainerClick(event) {
+        if (event.target.tagName.toLowerCase() != 'input') {
+            this.elementRef.nativeElement.querySelector('input')?.focus();
         }
     }
-    formatPhoneNumber() {
-        this.clearValidators();
-        if (this.countryCode.getRawValue() !== '') {
-            this.number.addValidators([
-                this.phoneNumberValidator(this.countryCode.getRawValue()),
-            ]);
+    setDescribedByIds(ids) {
+        const controlElement = this.elementRef.nativeElement.querySelector('.phone-fields');
+        controlElement.setAttribute('aria-describedby', ids.join(' '));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(number) {
+        this.value = number;
+    }
+    _handleInput(control, nextElement) {
+        this.autoFocusNext(control, nextElement);
+        this.onChange(this.value);
+        // Mark as touched when user interacts
+        if (!this.touched) {
+            this.touched = true;
+            this.onTouched();
         }
+        this.stateChanges.next();
+    }
+    formatPhoneNumber() {
         try {
-            const parsedPhone = parsePhoneNumber(this.number.getRawValue());
+            const parsedPhone = parsePhoneNumber(this.numberField.getRawValue());
             const code = parsedPhone?.country;
             if (code) {
-                this.countryCode.setValue(code, { emitEvent: false });
-                this.clearValidators();
-                this.number.addValidators([this.phoneNumberValidator(code)]);
-                this.number.setValue(parsedPhone?.format('INTERNATIONAL'), {
+                this.countryCodeField.setValue(code, { emitEvent: false });
+                this.numberField.setValue(parsedPhone?.format('INTERNATIONAL'), {
                     emitEvent: false,
                 });
             }
-            else {
-                this.number.addValidators([genericValidator('input.phone.invalid')]);
-            }
         }
         catch (e) {
-            this.number.addValidators([genericValidator(e.message)]);
+            console.warn(e);
         }
     }
-    ngOnDestroy() {
-        this.destroyNotifier$.next();
-        this.destroyNotifier$.complete();
-    }
-    errors() {
-        for (const k in this.number.errors) {
-            if (k === 'required') {
-                return 'input.phone.required';
-            }
-            else {
-                return 'input.phone.invalid';
-            }
+    onKeyup(event) {
+        // Clear country when backspace on empty number
+        if (this.numberField.value === '' && event.key === 'Backspace') {
+            this.countryCodeField.setValue(null);
+            //     this.parts.clearValidators();
         }
-        return 'input.phone.unknown.error';
     }
-    phoneNumberValidator(code) {
-        return (_control) => {
-            let number = code + _control.getRawValue();
-            if (number === '') {
-                return null;
-            }
-            try {
-                number = number.replace(code, '');
-                const parsedNumber = parsePhoneNumber(number);
-                if (parsedNumber?.isValid()) {
-                    return null;
-                }
-            }
-            catch (e) {
-                console.warn(e.message);
-                return { phoneNumber: { value: 'input.phone.invalid' } };
-            }
-            return { phoneNumber: { value: 'input.phone.invalid' } };
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatInputPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatInputPhoneComponent, isStandalone: true, selector: "onemrva-mat-input-phone", inputs: { readonly: "readonly", phoneNumber: "phoneNumber", label: "label", noEntriesFoundLabel: "noEntriesFoundLabel", placeholder: "placeholder", placeholderLabel: "placeholderLabel", defaultPrefix: "defaultPrefix", searchAriaLabel: "searchAriaLabel", hint: "hint" }, outputs: { getCountry: "getCountry" }, viewQueries: [{ propertyName: "numberInput", first: true, predicate: ["numberInput"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <mat-form-field class=\"onemrva-input-phone-number\">\n    <mat-label>{{ label }}</mat-label>\n\n    <input\n      (click)=\"handleClick($event)\"\n      type=\"tel\"\n      matInput\n      phoneNumber\n      #numberInput\n      [placeholder]=\"placeholder\"\n      [formControl]=\"phoneNumber\"\n      class=\"onemrva-text-number\"\n      [readOnly]=\"readonly\"\n    />\n    <mat-select\n      matTextPrefix\n      class=\"onemrva-phone-number-select\"\n      [formControl]=\"countryCode\"\n    >\n      <mat-select-trigger>\n        <flag-icon [countryCode]=\"countryCode.getRawValue()\" />\n      </mat-select-trigger>\n      <mat-option>\n        <mat-select-search\n          [formControl]=\"filterCtrl\"\n          [ariaLabel]=\"searchAriaLabel\"\n          [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n          [placeholderLabel]=\"placeholderLabel\"\n        ></mat-select-search>\n      </mat-option>\n      @for (country of filteredCountries$ | async; track country.code) {\n        <mat-option [value]=\"country.code\">\n          <flag-icon [countryCode]=\"country.code\" />\n          &nbsp;&nbsp;&nbsp;\n          {{ country.name }}\n          &nbsp;&nbsp;&nbsp;\n          <span class=\"dialcode\">\n            {{ country.dial_code }}\n          </span>\n        </mat-option>\n      }\n    </mat-select>\n    @if (hint !== '') {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n    @if (number.invalid) {\n      <mat-error>{{ errors() | translate }}</mat-error>\n    }\n  </mat-form-field>\n</ng-container>\n", styles: [".onemrva-input-phone-number mat-select .mat-mdc-select-placeholder{width:1em!important;display:block!important}.onemrva-input-phone-number mat-select .mat-mdc-select-placeholder:before{width:1em!important;height:1em!important;background:#eee!important;visibility:visible!important;margin:10px 0!important}.onemrva-input-phone-number mat-select .mat-mdc-select-value{padding-right:8px}.onemrva-input-phone-number .onemrva-text-number{padding-left:12px!important;vertical-align:middle}.onemrva-input-phone-number .mat-mdc-form-field-text-prefix mat-select{line-height:14px!important}.onemrva-input-phone-number span.dialcode{color:#acaab2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.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: i2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectSearchModule }, { kind: "component", type: i3.MatSelectSearchComponent, selector: "mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: PhoneNumberDirective, selector: "[phoneNumber]" }, { kind: "component", type: FlagIconComponent, selector: "flag-icon", inputs: ["countryCode", "mode", "width"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OnemrvaMatInputPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: OnemrvaMatInputPhoneComponent, isStandalone: true, selector: "onemrva-mat-input-phone", inputs: { noEntriesFoundLabel: "noEntriesFoundLabel", placeholderLabel: "placeholderLabel", searchAriaLabel: "searchAriaLabel", label: "label", defaultPrefix: "defaultPrefix", value: "value", readonly: "readonly", disabled: "disabled", placeholder: "placeholder", required: "required" }, outputs: { getCountry: "getCountry" }, providers: [
+            {
+                provide: MatFormFieldControl,
+                useExisting: OnemrvaMatInputPhoneComponent,
+            },
+        ], viewQueries: [{ propertyName: "countryCode", first: true, predicate: ["countryCode"], descendants: true }, { propertyName: "number", first: true, predicate: ["number"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"parts\">\n  <div class=\"phone-fields\">\n    <div class=\"phone-prefix\">\n      <mat-select\n        #countryCode\n        matTextPrefix\n        class=\"onemrva-phone-number-select\"\n        [formControl]=\"countryCodeField\"\n      >\n        <mat-select-trigger>\n          <flag-icon [countryCode]=\"countryCodeField.getRawValue()\" />\n        </mat-select-trigger>\n        <mat-option>\n          <mat-select-search\n            [formControl]=\"filterCtrl\"\n            [ariaLabel]=\"searchAriaLabel\"\n            [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n            [placeholderLabel]=\"placeholderLabel\"\n          ></mat-select-search>\n        </mat-option>\n        @for (country of filteredCountries$ | async; track $index) {\n          <mat-option [value]=\"country.code\">\n            <flag-icon [countryCode]=\"country.code\" />\n            &nbsp;&nbsp;&nbsp;\n            {{ country.name }}\n            &nbsp;&nbsp;&nbsp;\n            <span class=\"dialcode\">\n              {{ country.dial_code }}\n            </span>\n          </mat-option>\n        }\n      </mat-select>\n    </div>\n    <input\n      (click)=\"handleClick($event)\"\n      type=\"tel\"\n      matInput\n      #number\n      [placeholder]=\"placeholder\"\n      [formControl]=\"numberField\"\n      class=\"onemrva-text-number\"\n      [readOnly]=\"readonly\"\n    />\n  </div>\n</ng-container>\n", styles: ["onemrva-mat-input-phone{width:100%}onemrva-mat-input-phone .phone-fields{display:flex}onemrva-mat-input-phone .phone-fields .phone-prefix{width:48px;margin-right:8px}onemrva-mat-input-phone span.dialcode{color:var(--mat-sys-outline-variant)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.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: i2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectSearchModule }, { kind: "component", type: i3.MatSelectSearchComponent, selector: "mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: FlagIconComponent, selector: "flag-icon", inputs: ["countryCode", "mode", "width"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatInputPhoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OnemrvaMatInputPhoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-mat-input-phone', standalone: true, imports: [
                         CommonModule,
@@ -250,38 +329,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         MatSelectSearchModule,
                         ReactiveFormsModule,
                         TranslateModule,
-                        PhoneNumberDirective,
                         FlagIconComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container>\n  <mat-form-field class=\"onemrva-input-phone-number\">\n    <mat-label>{{ label }}</mat-label>\n\n    <input\n      (click)=\"handleClick($event)\"\n      type=\"tel\"\n      matInput\n      phoneNumber\n      #numberInput\n      [placeholder]=\"placeholder\"\n      [formControl]=\"phoneNumber\"\n      class=\"onemrva-text-number\"\n      [readOnly]=\"readonly\"\n    />\n    <mat-select\n      matTextPrefix\n      class=\"onemrva-phone-number-select\"\n      [formControl]=\"countryCode\"\n    >\n      <mat-select-trigger>\n        <flag-icon [countryCode]=\"countryCode.getRawValue()\" />\n      </mat-select-trigger>\n      <mat-option>\n        <mat-select-search\n          [formControl]=\"filterCtrl\"\n          [ariaLabel]=\"searchAriaLabel\"\n          [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n          [placeholderLabel]=\"placeholderLabel\"\n        ></mat-select-search>\n      </mat-option>\n      @for (country of filteredCountries$ | async; track country.code) {\n        <mat-option [value]=\"country.code\">\n          <flag-icon [countryCode]=\"country.code\" />\n          &nbsp;&nbsp;&nbsp;\n          {{ country.name }}\n          &nbsp;&nbsp;&nbsp;\n          <span class=\"dialcode\">\n            {{ country.dial_code }}\n          </span>\n        </mat-option>\n      }\n    </mat-select>\n    @if (hint !== '') {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n    @if (number.invalid) {\n      <mat-error>{{ errors() | translate }}</mat-error>\n    }\n  </mat-form-field>\n</ng-container>\n", styles: [".onemrva-input-phone-number mat-select .mat-mdc-select-placeholder{width:1em!important;display:block!important}.onemrva-input-phone-number mat-select .mat-mdc-select-placeholder:before{width:1em!important;height:1em!important;background:#eee!important;visibility:visible!important;margin:10px 0!important}.onemrva-input-phone-number mat-select .mat-mdc-select-value{padding-right:8px}.onemrva-input-phone-number .onemrva-text-number{padding-left:12px!important;vertical-align:middle}.onemrva-input-phone-number .mat-mdc-form-field-text-prefix mat-select{line-height:14px!important}.onemrva-input-phone-number span.dialcode{color:#acaab2}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { readonly: [{
+                    ], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: OnemrvaMatInputPhoneComponent,
+                        },
+                    ], template: "<ng-container [formGroup]=\"parts\">\n  <div class=\"phone-fields\">\n    <div class=\"phone-prefix\">\n      <mat-select\n        #countryCode\n        matTextPrefix\n        class=\"onemrva-phone-number-select\"\n        [formControl]=\"countryCodeField\"\n      >\n        <mat-select-trigger>\n          <flag-icon [countryCode]=\"countryCodeField.getRawValue()\" />\n        </mat-select-trigger>\n        <mat-option>\n          <mat-select-search\n            [formControl]=\"filterCtrl\"\n            [ariaLabel]=\"searchAriaLabel\"\n            [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n            [placeholderLabel]=\"placeholderLabel\"\n          ></mat-select-search>\n        </mat-option>\n        @for (country of filteredCountries$ | async; track $index) {\n          <mat-option [value]=\"country.code\">\n            <flag-icon [countryCode]=\"country.code\" />\n            &nbsp;&nbsp;&nbsp;\n            {{ country.name }}\n            &nbsp;&nbsp;&nbsp;\n            <span class=\"dialcode\">\n              {{ country.dial_code }}\n            </span>\n          </mat-option>\n        }\n      </mat-select>\n    </div>\n    <input\n      (click)=\"handleClick($event)\"\n      type=\"tel\"\n      matInput\n      #number\n      [placeholder]=\"placeholder\"\n      [formControl]=\"numberField\"\n      class=\"onemrva-text-number\"\n      [readOnly]=\"readonly\"\n    />\n  </div>\n</ng-container>\n", styles: ["onemrva-mat-input-phone{width:100%}onemrva-mat-input-phone .phone-fields{display:flex}onemrva-mat-input-phone .phone-fields .phone-prefix{width:48px;margin-right:8px}onemrva-mat-input-phone span.dialcode{color:var(--mat-sys-outline-variant)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { countryCode: [{
+                type: ViewChild,
+                args: ['countryCode']
+            }], number: [{
+                type: ViewChild,
+                args: ['number']
+            }], noEntriesFoundLabel: [{
                 type: Input
-            }], phoneNumber: [{
+            }], placeholderLabel: [{
+                type: Input
+            }], searchAriaLabel: [{
                 type: Input
             }], label: [{
                 type: Input
-            }], noEntriesFoundLabel: [{
+            }], defaultPrefix: [{
                 type: Input
-            }], placeholder: [{
+            }], getCountry: [{
+                type: Output
+            }], value: [{
                 type: Input
-            }], placeholderLabel: [{
+            }], readonly: [{
                 type: Input
-            }], defaultPrefix: [{
+            }], disabled: [{
                 type: Input
-            }], searchAriaLabel: [{
+            }], placeholder: [{
                 type: Input
-            }], hint: [{
+            }], required: [{
                 type: Input
-            }], getCountry: [{
-                type: Output
-            }], numberInput: [{
-                type: ViewChild,
-                args: ['numberInput']
             }] } });
-function genericValidator(message) {
-    return (_control) => {
-        return { phoneNumber: { value: message } };
-    };
+
+class PhoneNumberDirective {
+    onKeyDown(event) {
+        const e = event;
+        const allowedKey = [
+            '0',
+            '1',
+            '2',
+            '3',
+            '4',
+            '5',
+            '6',
+            '7',
+            '8',
+            '9',
+            ' ',
+            'Backspace',
+            'Delete',
+            'Tab',
+            '+',
+            '-',
+            'Enter',
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+        ];
+        if (allowedKey.indexOf(e.key) >= 0)
+            return;
+        const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
+        if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0)
+            return;
+        e.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PhoneNumberDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: PhoneNumberDirective, isStandalone: true, selector: "[phoneNumber]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PhoneNumberDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[phoneNumber]',
+                    standalone: true,
+                }]
+        }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
 
 /*
  * Public API Surface of mat-bank-account-input