@firestitch/form 18.0.28 → 18.0.29

package/fesm2022/firestitch-form.mjs

@@ -263,6 +263,9 @@ class FsFormBaseDirective {
             ...this._buttons.toArray(),
             button,
         ]);
+        // QueryList.reset() does not emit `changes`; notify so subscribers (e.g. the
+        // form's dirty-submit-button tracking) react to buttons being registered.
+        this._buttons.notifyOnChanges();
     }
     removeButton(button) {
         if (this._activeSubmitButton === button) {
@@ -272,6 +275,7 @@ class FsFormBaseDirective {
             ...this._buttons.toArray()
                 .filter((item) => (button !== item)),
         ]);
+        this._buttons.notifyOnChanges();
     }
     _registerConfirmTabs() {
         this._registerConfirmTabGroups(this._tabGroups.toArray());
@@ -823,10 +827,20 @@ class FsFormDirective extends FsFormBaseDirective {
             .buttons.changes
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
-            this._updateDirtySubmitButtons();
+            // Buttons (de)register during change detection (their ngOnInit/ngOnDestroy),
+            // so defer to a microtask to update the disabled state outside that pass and
+            // avoid ExpressionChangedAfterItHasBeenChecked on the button's disabled binding.
+            Promise.resolve().then(() => this._updateDirtySubmitButtons());
         });
+        // The initial content buttons register (addButton) before the subscription above
+        // exists, so their `changes` emission is missed. Apply the initial pristine/dirty
+        // disabled state once, deferred so it runs after the current change-detection pass.
+        Promise.resolve().then(() => this._updateDirtySubmitButtons());
     }
     _updateDirtySubmitButtons() {
+        if (!this.ngForm) {
+            return;
+        }
         this._getFormGroup()
             .buttons
             .filter((button) => button.submit)
@@ -957,8 +971,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 class FsButtonDirective {
     name;
     dirtySubmit = true;
+    set submitDisabled(value) {
+        this._submitDisabled = value;
+        this._applyDisabled();
+    }
+    get submitDisabled() {
+        return this._submitDisabled;
+    }
     transitionStyle = null;
     submit = false;
+    _submitDisabled = false;
+    _formDisabled = false;
     _previousDisabled = false;
     _destroy$ = new Subject();
     _formGroup = inject(FsFormGroupDirective, { optional: true });
@@ -969,7 +992,12 @@ class FsButtonDirective {
     _formBase;
     ngOnInit() {
         this.submit = this._elementRef.nativeElement.getAttribute('type') === 'submit';
-        this._formBase = this._form || this._formGroup;
+        // Prefer the enclosing form group over the form: the form's own button
+        // management (dirty-submit tracking, activeSubmitButton, reset) resolves its
+        // registry via `_formGroup || this`, so buttons must register with the same
+        // owner. Registering with the form while the form reads the group leaves the
+        // group's button list empty and the submit button never gets dirty-disabled.
+        this._formBase = this._formGroup || this._form;
         if (this._formBase) {
             this._formBase.addButton(this);
             if (this.submit) {
@@ -991,16 +1019,16 @@ class FsButtonDirective {
     disable() {
         if (this._matButton && !this._formBase.activeSubmitButton) {
             this._previousDisabled = this._matButton.disabled;
-            this._matButton.disabled = true;
+            this._formDisabled = true;
             this._matButton.disableRipple = true;
-            this._cdRef.markForCheck();
+            this._applyDisabled();
         }
     }
     enable() {
         if (this._matButton) {
-            this._matButton.disabled = false;
+            this._formDisabled = false;
             this._matButton.disableRipple = true;
-            this._cdRef.markForCheck();
+            this._applyDisabled();
         }
     }
     process() {
@@ -1048,6 +1076,15 @@ class FsButtonDirective {
         this._destroy$.complete();
         this._formBase?.removeButton(this);
     }
+    // Effective disabled combines the consumer-controlled submitDisabled input with
+    // the form's submit-lifecycle state, so form enable/disable never clobbers an
+    // explicit [submitDisabled] and the two channels stay independent.
+    _applyDisabled() {
+        if (this._matButton) {
+            this._matButton.disabled = this._submitDisabled || this._formDisabled;
+            this._cdRef.markForCheck();
+        }
+    }
     _resetClass() {
         this.element.classList
             .remove('fs-form-submit-button-success', 'fs-form-submit-button-error', 'fs-form-submit-button-process');
@@ -1078,7 +1115,7 @@ class FsButtonDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsButtonDirective, isStandalone: true, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: { name: "name", dirtySubmit: "dirtySubmit" }, host: { properties: { "style.transition": "this.transitionStyle" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsButtonDirective, isStandalone: true, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: { name: "name", dirtySubmit: "dirtySubmit", submitDisabled: "submitDisabled" }, host: { properties: { "style.transition": "this.transitionStyle" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsButtonDirective, decorators: [{
             type: Directive,
@@ -1090,6 +1127,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], dirtySubmit: [{
                 type: Input
+            }], submitDisabled: [{
+                type: Input
             }], transitionStyle: [{
                 type: HostBinding,
                 args: ['style.transition']
@@ -1174,7 +1213,7 @@ class FsFormDialogActionsComponent {
         this._destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsFormDialogActionsComponent, isStandalone: true, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", done: "done", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div\n  class=\"form-buttons\"\n  [ngClass]=\"{ 'save-create': save || create }\">\n  @if (save || create) {\n    <button\n      mat-button\n      type=\"submit\"\n      color=\"primary\"\n      [name]=\"name\">\n      {{ create ? 'Create' : 'Save' }}\n    </button>\n    <button\n      mat-button\n      type=\"button\"\n      class=\"cancel-button\"\n      [disabled]=\"close && !dirty && !create\"\n      [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  }\n  @if (done) {\n    <button\n      mat-button\n      type=\"button\"\n      color=\"primary\"\n      [mat-dialog-close]=\"null\">\n      Done\n    </button>\n  }\n  @if (save || create) {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  }\n  @if (close) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"close-button\"\n      fsFormDialogClose\n      [closeData]=\"closeData\"\n      [color]=\"dirty ? 'basic' : 'primary'\">\n      Close\n    </button>\n  }\n  @if (!(save || create)) {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  }\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{width:100%}.form-buttons.save-create .close-button{float:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: ["closeData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsFormDialogActionsComponent, isStandalone: true, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", done: "done", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div\n  class=\"form-buttons\"\n  [ngClass]=\"{ 'save-create': save || create }\">\n  @if (save || create) {\n    <button\n      mat-button\n      type=\"submit\"\n      color=\"primary\"\n      [name]=\"name\">\n      {{ create ? 'Create' : 'Save' }}\n    </button>\n    <button\n      mat-button\n      type=\"button\"\n      class=\"cancel-button\"\n      [disabled]=\"close && !dirty && !create\"\n      [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  }\n  @if (done) {\n    <button\n      mat-button\n      type=\"button\"\n      color=\"primary\"\n      [mat-dialog-close]=\"null\">\n      Done\n    </button>\n  }\n  @if (save || create) {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  }\n  @if (close) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"close-button\"\n      fsFormDialogClose\n      [closeData]=\"closeData\"\n      [color]=\"dirty ? 'basic' : 'primary'\">\n      Close\n    </button>\n  }\n  @if (!(save || create)) {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  }\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{width:100%}.form-buttons.save-create .close-button{float:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "submitDisabled"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: ["closeData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogActionsComponent, decorators: [{
             type: Component,