ngx-eiffage-material 0.1.4 → 0.1.6

package/fesm2022/ngx-eiffage-material.mjs

@@ -7,7 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3$1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NgControl, Validators, FormArray, FormGroup, FormBuilder, FormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm, Validators, FormArray, FormGroup, FormBuilder, FormsModule } from '@angular/forms';
 import * as i11 from '@angular/common';
 import { CommonModule, DatePipe, isPlatformBrowser, LowerCasePipe } from '@angular/common';
 import * as i2$1 from '@angular/material/chips';
@@ -597,6 +597,10 @@ class NgxBasicSelect {
      * y para no fallar cuando el componente se usa sin formulario.
      */
     _ngControl = inject(NgControl, { self: true, optional: true });
+    /** Formulario contenedor, para saber si ya se intentó enviar (reactive o template-driven). */
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
+    _parentForm = inject(NgForm, { optional: true });
+    _changeDetectorRef = inject(ChangeDetectorRef);
     // ─── Inputs ──────────────────────────────────────────────────────────────
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -673,9 +677,15 @@ class NgxBasicSelect {
         const count = this.resolvedOptions().filter(o => o.visible).length;
         return this.intl.getSearchResultsCountMessage(count);
     }, ...(ngDevMode ? [{ debugName: "searchAnnouncement" }] : []));
-    /** ErrorStateMatcher que refleja el estado del control del formulario. */
+    /**
+     * ErrorStateMatcher que refleja el estado del control del formulario.
+     * Replica el criterio por defecto de Material: se muestra el error si el
+     * control es inválido y además ha sido tocado O ya se ha enviado el
+     * formulario. Sin la parte de `submitted`, al pulsar "Guardar" los campos
+     * obligatorios que el usuario no llegó a tocar no se marcaban en rojo.
+     */
     errorStateMatcher = {
-        isErrorState: () => !!(this._ngControl?.invalid && this._ngControl?.touched),
+        isErrorState: () => !!(this._ngControl?.invalid && (this._ngControl?.touched || this._isParentFormSubmitted())),
     };
     /**
      * Obligatorio si el control del formulario tiene el validador `required`.
@@ -685,6 +695,10 @@ class NgxBasicSelect {
     isRequired() {
         return this._ngControl?.control?.hasValidator(Validators.required) ?? false;
     }
+    /** true cuando el formulario contenedor ya ha intentado enviarse. */
+    _isParentFormSubmitted() {
+        return this._parentFormGroup?.submitted || this._parentForm?.submitted || false;
+    }
     constructor() {
         // Auto-registro como CVA (evita el provider NG_VALUE_ACCESSOR y su DI circular).
         if (this._ngControl)
@@ -705,6 +719,17 @@ class NgxBasicSelect {
             this.onChange(value);
             this.selectionChange.emit(value);
         });
+        /**
+         * `submitted` del formulario padre es una propiedad normal, no una señal:
+         * al enviar, nada marca este componente (OnPush) para revisión, así que el
+         * mat-select no reevaluaba su errorStateMatcher y el campo no se pintaba en
+         * rojo. Al enviarse el formulario se fuerza la revisión.
+         */
+        const parentSubmit = this._parentFormGroup?.ngSubmit ?? this._parentForm?.ngSubmit;
+        parentSubmit?.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.innerControl.markAsTouched();
+            this._changeDetectorRef.markForCheck();
+        });
     }
     // ─── ControlValueAccessor ─────────────────────────────────────────────────
     writeValue(value) {
@@ -3503,6 +3528,10 @@ class NgxPaginatedSelect {
     _bottomSheet = inject(MatBottomSheet);
     /** Se auto-registra como CVA (self/optional para leer validación y no fallar sin form). */
     _ngControl = inject(NgControl, { self: true, optional: true });
+    /** Formulario contenedor, para saber si ya se intento enviar (reactive o template-driven). */
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
+    _parentForm = inject(NgForm, { optional: true });
+    _changeDetectorRef = inject(ChangeDetectorRef);
     intl = inject(NgxTablesIntl);
     // ─── Inputs ────────────────────────────────────────────────────────────────
     /** Label that floats on the form field */
@@ -3594,8 +3623,12 @@ class NgxPaginatedSelect {
     remainingChipsCount = computed(() => Math.max(0, this._selectedItems().length - this.maxChipsDisplayed()), ...(ngDevMode ? [{ debugName: "remainingChipsCount" }] : []));
     /** ErrorStateMatcher que refleja el estado del control del formulario. */
     errorStateMatcher = {
-        isErrorState: () => !!(this._ngControl?.invalid && this._ngControl?.touched),
+        isErrorState: () => !!(this._ngControl?.invalid && (this._ngControl?.touched || this._isParentFormSubmitted())),
     };
+    /** true cuando el formulario contenedor ya ha intentado enviarse. */
+    _isParentFormSubmitted() {
+        return this._parentFormGroup?.submitted || this._parentForm?.submitted || false;
+    }
     /**
      * Obligatorio si el control del formulario tiene el validador `required`.
      * Se propaga al input interno para que el mat-form-field pinte el asterisco,
@@ -3633,6 +3666,16 @@ class NgxPaginatedSelect {
             }
             untracked(() => this.emitChange(items));
         });
+        /**
+         * `submitted` del formulario padre es una propiedad normal, no una senal:
+         * al enviar, nada marca este componente (OnPush) para revision, asi que el
+         * control interno no reevaluaba su errorStateMatcher y el campo no se
+         * pintaba en rojo. Al enviarse el formulario se fuerza la revision.
+         */
+        const parentSubmit = this._parentFormGroup?.ngSubmit ?? this._parentForm?.ngSubmit;
+        parentSubmit?.pipe(takeUntilDestroyed()).subscribe(() => {
+            this._changeDetectorRef.markForCheck();
+        });
     }
     // ─── ControlValueAccessor ───────────────────────────────────────────────────
     writeValue(value) {