@ascentgl/ads-ui 0.0.169 → 0.0.170

package/fesm2022/ascentgl-ads-ui.mjs

@@ -7556,17 +7556,19 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
         this.dropdownControl = new FormControl(this.countryOptions[0]);
         /** @ignore */
         this.inputControl = new FormControl();
-        /** @ignore */
-        this.validatePhoneNumber = () => {
-            const value = (this.inputControl.value || '').trim();
+        this.validateMask = (control) => {
+            const value = (control.value || '').trim();
             /**
              * do not validate empty values (use required validator instead)
              */
             if (!value) {
-                return;
+                return null;
             }
-            const digitCount = value.replace(/\D/g, '').length; // Count actual digits
-            this.valueControl.setErrors(digitCount === 10 ? null : { mask: true });
+            /**
+             * get value minus code length
+             */
+            const digitCount = value.length - this.dropdownControl.value.code.length;
+            return digitCount === 10 ? null : { mask: true };
         };
     }
     /** @ignore */
@@ -7581,6 +7583,7 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
     }
     /** @ignore */
     ngOnInit() {
+        this.valueControl.addValidators(this.validateMask);
         const value = this.valueControl.value;
         if (value && !value.startsWith('+') && /^\d+$/.test(value)) {
             this.valueControl.setValue(`+${value}`);
@@ -7637,7 +7640,7 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
         const code = this.dropdownControl.value.code;
         const phone = this.inputControl.value;
         this.valueControl.setValue(phone ? code + phone : null);
-        this.validatePhoneNumber();
+        this.inputControl.markAsTouched({ emitEvent: false });
     }
     /** @ignore */
     canShowError() {