@tekus/kiosks-design-system 3.10.0 → 3.11.0

package/fesm2022/tekus-kiosks-design-system.mjs

@@ -2932,13 +2932,24 @@ class TkKioskTextFieldComponent {
         this.focusOut = new EventEmitter();
         this.cursorPositionChange = new EventEmitter();
         this._statusFocus = 'iddle';
+        this.VALIDATION_PATTERNS = {
+            ID_NUMBER: /^[a-zA-Z0-9]+$/,
+            PHONE_NUMBER: /^[\d\s+()-]+$/,
+            EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/,
+            AGE: /^\d+$/,
+        };
+        this.KEYBOARD_TYPE_MAP = {
+            email: keyboardEmailType,
+            'only-text': keyboardTypeText,
+            'text-number': keyboardTypeTextNumbers,
+        };
         this.numericTypes = ['number', 'tel'];
         this.keyboardType = keyboardType;
         this.cursorPosition = 0;
     }
     set statusFocus(value) {
         this._statusFocus = value;
-        const control = this.formGroup?.get(this.controlName);
+        const control = this.getControl();
         if (control) {
             value === 'desactive' ? control.disable() : control.enable();
         }
@@ -2946,75 +2957,80 @@ class TkKioskTextFieldComponent {
     get statusFocus() {
         return this._statusFocus;
     }
+    getControl() {
+        return this.formGroup?.get(this.controlName);
+    }
     get showError() {
-        const control = this.formGroup?.get(this.controlName);
-        return !!(control?.invalid && control?.touched);
+        const control = this.getControl();
+        return !!(control?.invalid && (control?.touched || control?.dirty));
     }
     get displayErrorMessage() {
         if (!this.showError)
             return '';
-        if (this.errorMessage)
-            return this.errorMessage;
-        const control = this.formGroup?.get(this.controlName);
+        const control = this.getControl();
         if (!control?.errors)
             return '';
-        if (control.errors['required'])
+        if (this.isEmptyAndRequired(control))
             return 'Este campo es requerido';
-        if (control.errors['email'])
+        if (this.errorMessage)
+            return this.errorMessage;
+        return this.getDefaultErrorMessage(control);
+    }
+    isEmptyAndRequired(control) {
+        const isEmpty = !control.value || control.value.toString().trim() === '';
+        return isEmpty && !!control.errors?.['required'];
+    }
+    getDefaultErrorMessage(control) {
+        const errors = control.errors;
+        if (errors?.['email'])
             return 'Formato de correo inválido';
-        if (control.errors['pattern'])
+        if (errors?.['pattern'])
             return 'Formato inválido';
-        if (control.errors['minlength'])
-            return `Mínimo ${control.errors['minlength'].requiredLength} caracteres`;
-        if (control.errors['maxlength'])
-            return `Máximo ${control.errors['maxlength'].requiredLength} caracteres`;
-        if (control.errors['min'])
-            return `Valor mínimo es ${control.errors['min'].min}`;
-        if (control.errors['max'])
-            return `Valor máximo es ${control.errors['max'].max}`;
+        if (errors?.['minlength'])
+            return `Mínimo ${errors['minlength'].requiredLength} caracteres`;
+        if (errors?.['maxlength'])
+            return `Máximo ${errors['maxlength'].requiredLength} caracteres`;
+        if (errors?.['min'])
+            return `Valor mínimo es ${errors['min'].min}`;
+        if (errors?.['max'])
+            return `Valor máximo es ${errors['max'].max}`;
         return 'Valor inválido';
     }
     ngOnInit() {
+        this.initializeKeyboardType();
+        this.applyValidations();
+    }
+    initializeKeyboardType() {
         this.keyboardType = this.numericTypes.includes(this.type)
             ? keyboardTypeNumeric
-            : this.type === 'email'
-                ? keyboardEmailType
-                : this.type === 'only-text'
-                    ? keyboardTypeText
-                    : this.type === 'text-number'
-                        ? keyboardTypeTextNumbers
-                        : keyboardType;
-        this.applyValidations();
+            : this.KEYBOARD_TYPE_MAP[this.type] || keyboardType;
     }
     applyValidations() {
-        const control = this.formGroup?.get(this.controlName);
+        const control = this.getControl();
         if (!control || !this.formFieldValidationType)
             return;
-        const validators = [];
+        const validators = this.buildValidators(control);
+        control.setValidators(validators);
+        control.updateValueAndValidity();
+    }
+    buildValidators(control) {
+        const existingValidators = control.validator ? [control.validator] : [];
+        const validators = [...existingValidators];
         switch (this.formFieldValidationType) {
             case FormFieldValidationType.ID_NUMBER:
-                validators.push(Validators.minLength(this.minLenght));
-                validators.push(Validators.maxLength(this.maxLenght));
-                validators.push(Validators.pattern(/^[a-zA-Z0-9]+$/));
+                validators.push(Validators.minLength(this.minLenght), Validators.maxLength(this.maxLenght), Validators.pattern(this.VALIDATION_PATTERNS.ID_NUMBER));
                 break;
             case FormFieldValidationType.PHONE_NUMBER:
-                validators.push(Validators.minLength(this.minLenght));
-                validators.push(Validators.maxLength(this.maxLenght));
-                validators.push(Validators.pattern(/^[\d\s+()-]+$/));
+                validators.push(Validators.minLength(this.minLenght), Validators.maxLength(this.maxLenght), Validators.pattern(this.VALIDATION_PATTERNS.PHONE_NUMBER));
                 break;
             case FormFieldValidationType.EMAIL:
-                validators.push(Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/));
+                validators.push(Validators.pattern(this.VALIDATION_PATTERNS.EMAIL));
                 break;
             case FormFieldValidationType.AGE:
-                validators.push(Validators.minLength(this.minLenght));
-                validators.push(Validators.maxLength(this.maxLenght));
-                validators.push(Validators.pattern(/^\d+$/));
-                validators.push(Validators.min(1));
-                validators.push(Validators.max(100));
+                validators.push(Validators.minLength(this.minLenght), Validators.maxLength(this.maxLenght), Validators.pattern(this.VALIDATION_PATTERNS.AGE), Validators.min(1), Validators.max(100));
                 break;
         }
-        control.setValidators(validators);
-        control.updateValueAndValidity();
+        return validators;
     }
     handleInputClick(event) {
         if (this.statusFocus === 'desactive')
@@ -3028,14 +3044,14 @@ class TkKioskTextFieldComponent {
     }
     changeValue(value) {
         if (value.length <= this.maxLenght) {
-            const control = this.formGroup?.controls[this.controlName];
+            const control = this.getControl();
             control?.patchValue(value);
             control?.markAsTouched();
             control?.markAsDirty();
         }
     }
     closeKeyboard() {
-        const control = this.formGroup?.controls[this.controlName];
+        const control = this.getControl();
         control?.markAsTouched();
         control?.markAsDirty();
         this.focusOut.emit();