@praxisui/dynamic-fields 3.0.0-beta.2 → 3.0.0-beta.3

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -869,6 +869,11 @@ class SimpleBaseInputComponent {
         const componentState = this.componentState();
         const ngControl = this.getNgControl();
         const parentInvalid = !!ngControl?.invalid;
+        const parentTouched = !!ngControl?.touched;
+        const parentDirty = !!ngControl?.dirty;
+        const controlState = this.control();
+        const controlTouched = !!controlState.touched;
+        const controlDirty = !!controlState.dirty;
         const errors = ngControl?.errors ?? this.control().errors;
         const meta = this.metadata();
         const trig = meta?.validators?.validationTrigger;
@@ -883,13 +888,19 @@ class SimpleBaseInputComponent {
             case 'immediate':
                 return true;
             case 'blur':
-                return componentState.touched;
+                return componentState.touched || parentTouched || controlTouched;
             case 'submit':
                 // Praxis onSubmit marca todos como touched; usamos esse sinal
-                return componentState.touched;
+                return componentState.touched || parentTouched || controlTouched;
             case 'change':
             default:
-                return (componentState.dirty || componentState.touched) && this.errorDisplayReady();
+                return (componentState.dirty
+                    || componentState.touched
+                    || parentDirty
+                    || parentTouched
+                    || controlDirty
+                    || controlTouched)
+                    && this.errorDisplayReady();
         }
     }, ...(ngDevMode ? [{ debugName: "hasValidationError" }] : []));
     /** CSS classes básicas do componente */
@@ -1492,10 +1503,12 @@ class SimpleBaseInputComponent {
     // =============================================================================
     setupFormControlIntegration() {
         const control = this.control();
+        this.syncComponentStateFromControl(control);
         control.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
             this.fieldState.update((state) => ({ ...state, value }));
+            this.syncComponentStateFromControl(control);
         });
         control.statusChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -1505,6 +1518,7 @@ class SimpleBaseInputComponent {
                 valid: status === 'VALID',
                 errors: control.errors,
             }));
+            this.syncComponentStateFromControl(control);
             this.refreshErrorTooltip();
         });
         // Sincronizar erros/estado do controle pai apenas quando usando controle interno
@@ -1520,35 +1534,51 @@ class SimpleBaseInputComponent {
                     errors: errs,
                     valid: !errs,
                 }));
+                this.syncComponentStateFromControl(control);
                 this.refreshErrorTooltip();
                 this.cdr.markForCheck();
             });
         }
     }
+    syncComponentStateFromControl(control) {
+        this.componentState.update((state) => ({
+            ...state,
+            touched: !!control.touched,
+            dirty: !!control.dirty,
+            disabled: !!control.disabled,
+        }));
+    }
     // Atualiza tooltip/atributos de erro quando erros mudam e quando inline errors estiverem desabilitados
     refreshErrorTooltip() {
         if (!this.nativeElement)
             return;
-        // Só aplica tooltip nativo quando errorPosition === 'tooltip' e não houver MatTooltip no template
-        // Força avaliação de tooltipPosition para evitar aviso de membro não utilizado
-        void this.tooltipPosition();
-        if (!this.tooltipEnabled()) {
-            this.nativeElement.removeAttribute('title');
-            this.nativeElement.removeAttribute('aria-invalid');
-            return;
-        }
         const hasErrors = !!(this.getNgControl()?.errors ?? this.control().errors);
         if (hasErrors) {
-            const msg = this.errorMessage();
-            if (msg)
-                this.nativeElement.setAttribute('title', msg);
             this.nativeElement.setAttribute('aria-invalid', 'true');
+            if (this.tooltipEnabled()) {
+                // Força avaliação de tooltipPosition para evitar aviso de membro não utilizado
+                void this.tooltipPosition();
+                const msg = this.errorMessage();
+                if (msg) {
+                    this.nativeElement.setAttribute('title', msg);
+                }
+                else {
+                    this.nativeElement.removeAttribute('title');
+                }
+            }
+            else {
+                this.nativeElement.removeAttribute('title');
+            }
         }
         else {
             this.nativeElement.removeAttribute('title');
             this.nativeElement.removeAttribute('aria-invalid');
         }
     }
+    ariaInvalidAttribute() {
+        const hasErrors = !!(this.getNgControl()?.errors ?? this.control().errors);
+        return hasErrors ? 'true' : null;
+    }
     tDynamicFields(keySuffix, fallback, params) {
         return this.i18n.t(`praxis.dynamicFields.${keySuffix}`, params, fallback, 'dynamicFields');
     }
@@ -7725,6 +7755,7 @@ class TextInputComponent extends SimpleBaseInputComponent {
         [minlength]="metadata()?.minLength || null"
         [attr.aria-label]="!label && placeholder ? placeholder : null"
         [attr.aria-required]="metadata()?.required ? 'true' : 'false'"
+        [attr.aria-invalid]="ariaInvalidAttribute()"
         [matTooltip]="tooltipEnabled() ? errorMessage() : null"
         [matTooltipDisabled]="!(tooltipEnabled() && !!errorMessage())"
         [matTooltipPosition]="tooltipPosition()"
@@ -7816,6 +7847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         [minlength]="metadata()?.minLength || null"
         [attr.aria-label]="!label && placeholder ? placeholder : null"
         [attr.aria-required]="metadata()?.required ? 'true' : 'false'"
+        [attr.aria-invalid]="ariaInvalidAttribute()"
         [matTooltip]="tooltipEnabled() ? errorMessage() : null"
         [matTooltipDisabled]="!(tooltipEnabled() && !!errorMessage())"
         [matTooltipPosition]="tooltipPosition()"
@@ -47981,7 +48013,13 @@ const DYNAMIC_FIELD_ERROR_STATE_RECIPE = {
     state: 'error',
     label: 'Error',
     supported: true,
-    metadataPatch: { required: true },
+    metadataPatch: {
+        required: true,
+        validators: {
+            requiredMessage: 'Governed sample error state for playground preview.',
+            validationTrigger: 'immediate',
+        },
+    },
     errorMessage: 'Governed sample error state for playground preview.',
 };
 const DYNAMIC_FIELD_BASE_STATE_RECIPES = [