@firestitch/form 18.0.29 → 18.0.30

package/fesm2022/firestitch-form.mjs

@@ -1,6 +1,6 @@
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Component, ChangeDetectionStrategy, Injectable, NgZone, ChangeDetectorRef, QueryList, Directive, Input, ContentChildren, ElementRef, EventEmitter, Output, HostBinding, HostListener, InjectionToken, Renderer2, Injector, ViewContainerRef, NgModule } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, Injectable, NgZone, ChangeDetectorRef, ElementRef, QueryList, Directive, Input, ContentChildren, EventEmitter, Output, HostBinding, HostListener, InjectionToken, Renderer2, Injector, ViewContainerRef, NgModule } from '@angular/core';
 import { UntypedFormGroup, NgForm, NgControl, Validators, NgModel, FormsModule } from '@angular/forms';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';
@@ -8,13 +8,13 @@ import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog, MatDialogClose } from '@angular/material/dialog';
 import * as i2 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import { Subject, of, BehaviorSubject, throwError, fromEvent, iif, defer, from, isObservable } from 'rxjs';
-import { switchMap, map, catchError, takeUntil, filter, tap, take, mergeMap, delay, first, startWith, mapTo } from 'rxjs/operators';
-import { ActivatedRoute } from '@angular/router';
+import { Subject, of, fromEvent, iif, defer, EMPTY, BehaviorSubject, concat, throwError, combineLatest, from, isObservable } from 'rxjs';
+import { switchMap, map, catchError, filter, takeUntil, tap, startWith, toArray, take, mergeMap, delay, first, mapTo } from 'rxjs/operators';
 import { guid, email, isEmpty, isNumeric, phone, url } from '@firestitch/common';
-import { DrawerRef } from '@firestitch/drawer';
 import { FsMessage, MessageMode } from '@firestitch/message';
+import { ActivatedRoute } from '@angular/router';
 import { MatTabGroup } from '@angular/material/tabs';
+import { DrawerRef } from '@firestitch/drawer';
 import { values, keys, isObject } from 'lodash-es';
 import { isValid } from 'date-fns';
 
@@ -59,6 +59,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    {{ title }}\n  </h1>\n  <mat-dialog-content>\n    {{ message }}\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"save()\"\n        mat-button>\n      {{ saveLabel }}\n    </button>\n    <button\n        type=\"button\"\n        (click)=\"discard()\"\n        mat-button>\n      {{ discardLabel }}\n    </button>\n    <button\n        type=\"button\"\n        (click)=\"cancel()\"\n        mat-button>\n      {{ cancelLabel }}\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>", styles: [":host{width:100%}.form-buttons.save-create .close-button:not(.cancel-button){float:right}\n"] }]
         }] });
 
+function getFormErrors(control, key) {
+    let errors = null;
+    if (control.invalid && control.errors) {
+        errors = {
+            [key]: { ...control.errors },
+        };
+    }
+    if (control instanceof UntypedFormGroup) {
+        Object.entries(control.controls)
+            .forEach(([name, childControl]) => {
+            const childErrors = getFormErrors(childControl, name);
+            if (childErrors) {
+                if (!errors) {
+                    errors = { ...childErrors };
+                }
+                else {
+                    Object.assign(errors, childErrors);
+                }
+            }
+        });
+    }
+    return errors;
+}
+
 var ConfirmResult;
 (function (ConfirmResult) {
     ConfirmResult["Save"] = "save";
@@ -68,6 +92,18 @@ var ConfirmResult;
     ConfirmResult["NoChanges"] = "noChanges";
 })(ConfirmResult || (ConfirmResult = {}));
 
+var FormStatus;
+(function (FormStatus) {
+    FormStatus["Valid"] = "valid";
+    FormStatus["Invalid"] = "invalid";
+    FormStatus["Validating"] = "validating";
+    FormStatus["Submitting"] = "submitting";
+    FormStatus["Submitted"] = "submitted";
+    FormStatus["Error"] = "error";
+    FormStatus["Success"] = "success";
+    FormStatus["Completing"] = "completing";
+})(FormStatus || (FormStatus = {}));
+
 function confirmResultContinue(result) {
     return (result === ConfirmResult.Discard ||
         result === ConfirmResult.Save ||
@@ -81,18 +117,6 @@ function getActiveRoute(route) {
     return route;
 }
 
-var FormStatus;
-(function (FormStatus) {
-    FormStatus["Valid"] = "valid";
-    FormStatus["Invalid"] = "invalid";
-    FormStatus["Validating"] = "validating";
-    FormStatus["Submitting"] = "submitting";
-    FormStatus["Submitted"] = "submitted";
-    FormStatus["Error"] = "error";
-    FormStatus["Success"] = "success";
-    FormStatus["Completing"] = "completing";
-})(FormStatus || (FormStatus = {}));
-
 class FsForm {
     // value is array for future possibilities of extension
     _formDirectiveStore = new WeakMap();
@@ -109,11 +133,13 @@ class FsForm {
         this._formDirectiveStore.delete(routeComponent);
     }
     hasChanges(form) {
-        return Object.keys(form.ngForm.control.controls)
-            .some((key) => {
-            const control = form.ngForm.control.controls[key];
-            return control.dirty;
-        });
+        // Spans the linked set, so a dialog whose fields live in a nested tab form
+        // still knows it has changes. A form linked out with `[link]="false"` is
+        // absent from that set and never triggers the prompt - which is the point of
+        // an instant-save panel: it has nothing outstanding to warn about.
+        return form.linkedForms
+            .some((linkedForm) => Object.keys(linkedForm.ngForm.control.controls)
+            .some((key) => linkedForm.ngForm.control.controls[key].dirty));
     }
     confirmUnsaved(form) {
         if (!form.confirm || !this.hasChanges(form)) {
@@ -152,7 +178,8 @@ class FsForm {
                 return of(ConfirmResult.Discard);
             }
             if (result === 'save') {
-                form.ngForm.control.markAsPristine();
+                form.linkedForms
+                    .forEach((linkedForm) => linkedForm.ngForm.control.markAsPristine());
                 return form.submit$({ confirmed: true })
                     .pipe(map((submitEvent) => {
                     if (submitEvent.error) {
@@ -205,46 +232,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 }]
         }] });
 
-function getFormErrors(control, key) {
-    let errors = null;
-    if (control.invalid && control.errors) {
-        errors = {
-            [key]: { ...control.errors },
-        };
-    }
-    if (control instanceof UntypedFormGroup) {
-        Object.entries(control.controls)
-            .forEach(([name, childControl]) => {
-            const childErrors = getFormErrors(childControl, name);
-            if (childErrors) {
-                if (!errors) {
-                    errors = { ...childErrors };
-                }
-                else {
-                    Object.assign(errors, childErrors);
-                }
-            }
-        });
-    }
-    return errors;
-}
-
+/**
+ * Shared by the two things that can own a set of forms: an `fsForm` sitting at
+ * the root of its linked set, and an `fsFormContainer` holding forms that are
+ * siblings rather than nested.
+ *
+ * It holds the submit-button registry both of them expose to buttons, and the
+ * lifecycle that belongs to the set as a whole rather than to any one form -
+ * the dialog backdrop and Escape, Ctrl+S, the browser close prompt, the drawer
+ * and tab-switch confirms. Exactly one owner registers that lifecycle; see
+ * `_registerOwnerLifecycle`.
+ */
 class FsFormBaseDirective {
     confirmTabs = true;
     tabGroup;
+    confirm = true;
+    confirmDialog = true;
+    confirmDrawer = true;
+    confirmBrowser = true;
+    shortcuts = true; // Ctrl + s
+    deactivationGuard = true;
     _ngZone = inject(NgZone);
     _cdRef = inject(ChangeDetectorRef);
+    _element = inject(ElementRef);
+    _form = inject(FsForm);
+    _route = inject(ActivatedRoute);
+    _dialogRef = inject(MatDialogRef, { optional: true });
+    _drawerRef = inject(DrawerRef, { optional: true });
+    _dialogBackdropEscape = false;
+    _activatedRouteConfig;
     _tabGroups = new QueryList();
     _buttons = new QueryList();
     _activeSubmitButton;
+    _confirmTabGroups = new WeakSet();
     _destroy$ = new Subject();
+    ngOnInit() {
+        this._registerOwnerLifecycle();
+    }
     ngAfterContentInit() {
-        this._registerConfirmTabs();
+        this._registerOwnerContentLifecycle();
     }
     get destroy$() {
         return this._destroy$.asObservable();
     }
     ngOnDestroy() {
+        this._cleanupCanDeactivate();
         this._destroy$.next(null);
         this._destroy$.complete();
     }
@@ -277,6 +309,160 @@ class FsFormBaseDirective {
         ]);
         this._buttons.notifyOnChanges();
     }
+    /**
+     * Everything here acts on the form set as a whole, so exactly one thing may
+     * register it. A form linked into a parent defers to that parent; every form
+     * inside a container defers to the container. Registering twice would put two
+     * confirms on the same backdrop click and two handlers on the same Ctrl+S.
+     */
+    _registerOwnerLifecycle() {
+        if (this.deactivationGuard) {
+            this._registerCanDeactivateGuard();
+        }
+        this._registerConfirmDialogBackdropEscape();
+        this._listenHotKeys();
+        this._listenWindowClose();
+    }
+    /** The half of the same ownership that needs projected content resolved. */
+    _registerOwnerContentLifecycle() {
+        this._registerConfirmTabs();
+        this._registerConfirmDrawerClose();
+        this._registerDrawerClose();
+    }
+    /**
+     * Whether the element is inside what this owner covers. Overridden by the
+     * container, whose own element is a poor proxy: it may be an `<ng-container>`,
+     * which is a comment node and contains nothing.
+     */
+    _containsElement(el) {
+        return this._nodeContains(this._element.nativeElement, el);
+    }
+    _nodeContains(root, el) {
+        if (!root || !el) {
+            return false;
+        }
+        if (el === root) {
+            return true;
+        }
+        return el.parentElement ? this._nodeContains(root, el.parentElement) : false;
+    }
+    _formClose() {
+        if (this.confirm && this.confirmDialog) {
+            this.triggerConfirm()
+                .pipe(filter((result) => confirmResultContinue(result)), switchMap((result) => {
+                return result === ConfirmResult.NoChanges || result === ConfirmResult.Discard
+                    ? of(null)
+                    : this.submitted$;
+            }), takeUntil(this._destroy$))
+                .subscribe((result) => {
+                this._dialogRef.close(result?.response);
+            });
+        }
+        else {
+            this._dialogRef.close(null);
+        }
+    }
+    _listenWindowClose() {
+        fromEvent(window, 'beforeunload')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((event) => {
+            if (this.confirm && this.confirmBrowser && this.dirtyLinked) {
+                event.returnValue = false;
+            }
+        });
+    }
+    _activeDialog(el, dialog) {
+        return this._nodeContains(dialog, el);
+    }
+    _listenHotKeys() {
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(document, 'keydown')
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((event) => {
+                if (this._dialogBackdropEscape && event.code === 'Escape') {
+                    const cdkOverlayPane = Array
+                        .from(document.querySelectorAll('.cdk-overlay-pane')).pop();
+                    const activeDialog = this
+                        ._activeDialog(document.getElementById(this._dialogRef.id), cdkOverlayPane);
+                    if (activeDialog) {
+                        this._ngZone.run(() => {
+                            this._formClose();
+                        });
+                    }
+                }
+                if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
+                    event.preventDefault();
+                    if (this.shortcuts) {
+                        if (this._containsElement(document.activeElement)) {
+                            this._ngZone.run(() => {
+                                this.triggerSubmit();
+                            });
+                        }
+                    }
+                }
+            });
+        });
+    }
+    _registerConfirmDialogBackdropEscape() {
+        if (this._dialogRef) {
+            this._dialogBackdropEscape = !this._dialogRef?.disableClose;
+            if (this._dialogBackdropEscape) {
+                this._dialogRef.backdropClick()
+                    .pipe(takeUntil(this._destroy$))
+                    .subscribe(() => {
+                    this._formClose();
+                });
+                this._destroy$
+                    .subscribe(() => {
+                    this._dialogRef.disableClose = false;
+                });
+            }
+        }
+    }
+    _registerDrawerClose() {
+        if (this._drawerRef) {
+            this._drawerRef.closeStart$
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((subscriber) => {
+                if (this.submitting) {
+                    this.status$
+                        .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this._destroy$))
+                        .subscribe((status) => {
+                        if (status === FormStatus.Success) {
+                            subscriber.next(null);
+                            subscriber.complete();
+                        }
+                        else {
+                            subscriber.error();
+                        }
+                    });
+                }
+                else {
+                    subscriber.next(null);
+                    subscriber.complete();
+                }
+            });
+        }
+    }
+    _registerConfirmDrawerClose() {
+        if (this._drawerRef) {
+            this._drawerRef.closeStart$
+                .pipe(switchMap((subscriber) => {
+                return iif(() => !!this.confirm && this.confirmDrawer, this.triggerConfirm()
+                    .pipe(map((result) => confirmResultContinue(result)), tap((result) => {
+                    if (result) {
+                        subscriber.next(null);
+                        subscriber.complete();
+                    }
+                })), defer(() => {
+                    subscriber.next(null);
+                    subscriber.complete();
+                    return of(null);
+                }));
+            }), takeUntil(this._destroy$))
+                .subscribe();
+        }
+    }
     _registerConfirmTabs() {
         this._registerConfirmTabGroups(this._tabGroups.toArray());
         this._tabGroups.changes
@@ -291,6 +477,15 @@ class FsFormBaseDirective {
         });
     }
     _registerConfirmTabGroup(tabGroup) {
+        // `_tabGroups.changes` re-emits the whole list, not just what arrived, and it
+        // emits every time a lazy tab body mounts a nested group. Groups already
+        // wired therefore come back around - so without this the outer group
+        // accumulates one subscription per emission, and a single click on it opens
+        // that many stacked confirm dialogs.
+        if (this._confirmTabGroups.has(tabGroup)) {
+            return;
+        }
+        this._confirmTabGroups.add(tabGroup);
         const confirmTabGroup = tabGroup;
         if (!confirmTabGroup._originalHandleClick) {
             confirmTabGroup._originalHandleClick = tabGroup._handleClick;
@@ -319,8 +514,29 @@ class FsFormBaseDirective {
         }), takeUntil(this._destroy$))
             .subscribe();
     }
+    _registerCanDeactivateGuard() {
+        this._activatedRouteConfig = getActiveRoute(this._route)?.routeConfig;
+        if (!this._activatedRouteConfig) {
+            return;
+        }
+        this._form.registerFormDirective(this._activatedRouteConfig.component, this);
+        if (!Array.isArray(this._activatedRouteConfig.canDeactivate)) {
+            this._activatedRouteConfig.canDeactivate = [];
+        }
+        if (this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard) === -1) {
+            this._activatedRouteConfig.canDeactivate.push(FormDeactivateGuard);
+        }
+    }
+    _cleanupCanDeactivate() {
+        if (!this._activatedRouteConfig) {
+            return;
+        }
+        const guardIndex = this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard);
+        this._activatedRouteConfig.canDeactivate.splice(guardIndex, 1);
+        this._form.removeFormDirective(this._activatedRouteConfig.component);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormBaseDirective, inputs: { confirmTabs: "confirmTabs", tabGroup: "tabGroup" }, queries: [{ propertyName: "_tabGroups", predicate: MatTabGroup, descendants: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormBaseDirective, inputs: { confirmTabs: "confirmTabs", tabGroup: "tabGroup", confirm: "confirm", confirmDialog: "confirmDialog", confirmDrawer: "confirmDrawer", confirmBrowser: "confirmBrowser", shortcuts: "shortcuts", deactivationGuard: "deactivationGuard" }, queries: [{ propertyName: "_tabGroups", predicate: MatTabGroup, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormBaseDirective, decorators: [{
             type: Directive
@@ -328,62 +544,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], tabGroup: [{
                 type: Input
+            }], confirm: [{
+                type: Input
+            }], confirmDialog: [{
+                type: Input
+            }], confirmDrawer: [{
+                type: Input
+            }], confirmBrowser: [{
+                type: Input
+            }], shortcuts: [{
+                type: Input
+            }], deactivationGuard: [{
+                type: Input
             }], _tabGroups: [{
                 type: ContentChildren,
                 args: [MatTabGroup, { descendants: true }]
             }] } });
 
-class FsFormGroupDirective extends FsFormBaseDirective {
-    _formDirective;
-    triggerSubmit() {
-        return this._formDirective?.triggerSubmit();
-    }
-    triggerConfirm() {
-        return this._formDirective?.triggerConfirm();
+/**
+ * Bounds a set of forms without being one.
+ *
+ * An `fsForm` can only reach the forms nested inside it through DI, which forces
+ * a wrapper carrying `ngForm` around anything that needs to see them - and that
+ * wrapper then owns a real, empty `NgForm` whose control namespace every field
+ * below it falls into. A container has no `ngForm` and no controls. It only
+ * watches: forms register themselves as they mount, buttons resolve to it, and
+ * `fs-form-dialog-actions` reads Save-vs-Done off it. Put it on whatever element
+ * already frames the layout - or on an `<ng-container>` for no element at all.
+ *
+ * Forms in a container are siblings rather than nested, so on registration each
+ * one is linked into the first. That reproduces exactly the structure DI nesting
+ * builds, which is why validation, dirty state, the unsaved-changes confirm and
+ * the submit chain all span a container without any of that machinery knowing
+ * containers exist.
+ *
+ * A form marked `[link]="false"` never registers, so an instant-save panel stays
+ * out of the set the same way it does when nested.
+ */
+class FsFormContainerDirective extends FsFormBaseDirective {
+    _forms = [];
+    _formsChange$ = new Subject();
+    /** The forms registered into this container, in registration order. */
+    get forms() {
+        return [...this._forms];
+    }
+    /**
+     * The form the rest of the set is linked into, or null while the container
+     * holds none - an open tab that has nothing to save, say.
+     */
+    get rootForm() {
+        return this._forms[0] || null;
+    }
+    /** Emits whenever a form registers or deregisters. */
+    get formsChange$() {
+        return this._formsChange$.asObservable();
+    }
+    get linkedForms() {
+        return this.rootForm?.linkedForms || [];
+    }
+    /**
+     * True when anything in the container has a submit handler - i.e. there is
+     * something for a Save button to do. `fs-form-dialog-actions` reads this to
+     * swap Save for Done as the mounted tab changes, so a dialog never has to keep
+     * a list of which tabs happen to be savable.
+     */
+    get submits() {
+        return this.linkedForms
+            .some((form) => form.hasSubmit);
+    }
+    get dirtyLinked() {
+        return this.rootForm?.dirtyLinked || false;
     }
     get submitting() {
-        return this._formDirective?.submitting;
+        return this.rootForm?.submitting || false;
+    }
+    /**
+     * Emits whenever the set's dirty state may have moved, including when the set
+     * itself changes. Anything rendering off it - the dialog actions - subscribes
+     * once and outlives any particular form, so this has to follow the root across
+     * tab switches rather than bind to whichever form happened to be first.
+     */
+    get dirtyChange$() {
+        return this._formsChange$
+            .pipe(startWith(null), switchMap(() => (this.rootForm?.dirtyChange$ || EMPTY)
+            .pipe(startWith(null))), map(() => undefined));
+    }
+    // Resolved at subscribe time rather than switch-mapped: a submit in flight has
+    // to survive the set changing under it, which is routine when saving unmounts
+    // a tab.
+    get submitted$() {
+        return defer(() => this.rootForm?.submitted$ || EMPTY);
+    }
+    get status$() {
+        return defer(() => this.rootForm?.status$ || of(FormStatus.Valid));
+    }
+    /**
+     * Take a form into the container. Called by the form on init - consumers never
+     * call it directly.
+     */
+    registerForm(form) {
+        if (this._forms.indexOf(form) !== -1) {
+            return;
+        }
+        this._forms = [...this._forms, form];
+        if (this.rootForm !== form) {
+            form.linkTo(this.rootForm);
+        }
+        this._formsChange$.next();
+    }
+    /**
+     * Material attaches an incoming tab body before it detaches the outgoing one,
+     * so losing the root is a routine reshuffle rather than teardown. Re-elect and
+     * re-link the survivors instead of leaving them pointing at a dead root, and
+     * only let go of forms actually registered - clearing unconditionally would
+     * drop the form that just arrived.
+     */
+    deregisterForm(form) {
+        if (form && this._forms.indexOf(form) === -1) {
+            return;
+        }
+        const removing = form ? [form] : [...this._forms];
+        const rootRemoved = removing.indexOf(this.rootForm) !== -1;
+        removing.forEach((item) => item.unlinkFrom());
+        this._forms = this._forms
+            .filter((item) => removing.indexOf(item) === -1);
+        if (rootRemoved) {
+            const root = this.rootForm;
+            this._forms
+                .filter((item) => item !== root)
+                .forEach((item) => {
+                item.unlinkFrom();
+                item.linkTo(root);
+            });
+        }
+        this._formsChange$.next();
+    }
+    triggerSubmit() {
+        this.rootForm?.triggerSubmit();
     }
-    get confirm() {
-        return this._formDirective?.confirm;
+    triggerConfirm() {
+        return this.rootForm
+            ? this.rootForm.triggerConfirm()
+            : of(ConfirmResult.NoChanges);
     }
-    registerForm(formDirective) {
-        this._formDirective = formDirective;
+    submit$(event) {
+        return this.rootForm
+            ? this.rootForm.submit$(event)
+            : of(null);
     }
-    deregisterForm() {
-        this._formDirective = null;
+    reset() {
+        this.rootForm?.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormGroupDirective, isStandalone: true, selector: "[fsFormGroup]", exportAs: ["fsFormGroup"], usesInheritance: true, ngImport: i0 });
+    validate() {
+        this.rootForm?.validate();
+    }
+    // The container's own element is a poor proxy for what it covers: it is
+    // typically layout chrome wrapping far more than the forms, and on an
+    // `<ng-container>` it is a comment node containing nothing at all. Scope to the
+    // registered forms instead.
+    _containsElement(el) {
+        return this._forms
+            .some((form) => this._nodeContains(form.element, el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormContainerDirective, isStandalone: true, selector: "fs-form-container,[fsFormContainer]", exportAs: ["fsFormContainer"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormContainerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[fsFormGroup]',
-                    exportAs: 'fsFormGroup',
+                    selector: 'fs-form-container,[fsFormContainer]',
+                    exportAs: 'fsFormContainer',
                     standalone: true,
                 }]
         }] });
 
 class FsFormDirective extends FsFormBaseDirective {
     ngForm = inject(NgForm);
-    _form = inject(FsForm);
-    _element = inject(ElementRef);
-    _message = inject(FsMessage);
-    _formGroup = inject(FsFormGroupDirective, { optional: true });
-    _dialogRef = inject(MatDialogRef, { optional: true });
-    _drawerRef = inject(DrawerRef, { optional: true });
-    _route = inject(ActivatedRoute);
     wrapperSelector = '.fs-form-wrapper,.mat-mdc-form-field';
     messageSelector = '.fs-form-message,.mat-mdc-form-field-subscript-wrapper';
     hintSelector = '.fs-form-hint,.mat-mdc-form-field-hint-wrapper';
     labelSelector = '.fs-form-label,.mdc-floating-label>mat-label';
     autocomplete = false;
-    shortcuts = true; // Ctrl + s
-    confirm = true;
-    confirmDialog = true;
-    confirmDrawer = true;
-    confirmBrowser = true;
     dirtySubmitButton = true;
     set submit(submit$) {
         this._submit$ = submit$;
@@ -393,7 +734,21 @@ class FsFormDirective extends FsFormBaseDirective {
     }
     successDelay = 0;
     errorDelay = 1000;
-    deactivationGuard = true;
+    /**
+     * Whether this form joins the set around it - the `fsForm` it is nested inside,
+     * or the `fsFormContainer` enclosing it.
+     *
+     * Forms in a set behave as one submittable unit: the outermost form is what the
+     * submit buttons drive, and validation, dirty state, the unsaved-changes
+     * confirm and the pristine reset all span the set. That is what lets a form
+     * wrap only one tab's fields while the dialog footer stays outside it.
+     *
+     * Set `[link]="false"` for a panel that owns its own saving - an instant-save
+     * side panel, say. It keeps every fsForm feature for itself, but its dirty
+     * state never enables the outer Save button, its validation never blocks the
+     * outer submit, and the outer submit never touches it.
+     */
+    link = true;
     submitEvent = new EventEmitter();
     invalid = new EventEmitter();
     valid = new EventEmitter();
@@ -402,11 +757,75 @@ class FsFormDirective extends FsFormBaseDirective {
     cleared = new EventEmitter();
     fsFormClass = true;
     _registerControl;
-    _dialogBackdropEscape = false;
     _snapshot = {};
-    _activatedRouteConfig;
     _status$ = new BehaviorSubject(FormStatus.Valid);
     _submit$ = null;
+    _linkedForms = new Set();
+    _containerParent = null;
+    _dirtyChange$ = new Subject();
+    _message = inject(FsMessage);
+    _container = inject(FsFormContainerDirective, { optional: true });
+    _ancestorForm = inject(FsFormDirective, { optional: true, skipSelf: true });
+    /**
+     * Emits whenever the set's dirty state may have moved. Anything outside the
+     * form that renders off it - the dialog actions, say - can't watch
+     * `ngForm.valueChanges` on its own, because the edits happen in a nested form's
+     * NgForm, not this one's.
+     */
+    get dirtyChange$() {
+        return this._dirtyChange$.asObservable();
+    }
+    get submitted$() {
+        return this.submitted.asObservable();
+    }
+    get status$() {
+        return this._status$.asObservable();
+    }
+    get element() {
+        return this._element.nativeElement;
+    }
+    /** True when a Save button driving this form would have something to run. */
+    get hasSubmit() {
+        return !!this._submit$;
+    }
+    /**
+     * The form this one is linked into, or null when it is a root - either because
+     * nothing encloses it or because `[link]="false"` cut it loose. A container
+     * supplies the parent when the forms are siblings rather than nested.
+     */
+    get parentForm() {
+        if (!this.link) {
+            return null;
+        }
+        return this._ancestorForm || this._containerParent;
+    }
+    /** The outermost form of this set. Submit buttons drive this one. */
+    get rootForm() {
+        return this.parentForm?.rootForm || this;
+    }
+    /** This form plus every form linked into it, at any depth. */
+    get linkedForms() {
+        return [
+            this,
+            ...[...this._linkedForms]
+                .reduce((forms, form) => [...forms, ...form.linkedForms], []),
+        ];
+    }
+    /** True when this form or anything linked into it has unsaved changes. */
+    get dirtyLinked() {
+        return this.linkedForms
+            .some((form) => form.ngForm.dirty);
+    }
+    /**
+     * True when this form or anything linked into it has a submit handler - i.e.
+     * there is something for a Save button to do. A dialog footer can bind to this
+     * to swap Save for Done as the mounted tab changes, instead of hard-coding
+     * which tab names happen to be savable.
+     */
+    get submits() {
+        return this.linkedForms
+            .some((form) => form.hasSubmit);
+    }
     get submitting() {
         return this._status$.getValue() === FormStatus.Submitting;
     }
@@ -416,6 +835,15 @@ class FsFormDirective extends FsFormBaseDirective {
     get completing() {
         return this._status$.getValue() === FormStatus.Completing;
     }
+    /**
+     * True when nothing above this form speaks for the set it belongs to. Reads the
+     * raw injections rather than `parentForm`, so an unlinked panel inside a dialog
+     * still defers to whatever encloses it instead of registering a second backdrop
+     * confirm on the same dialog.
+     */
+    get _owns() {
+        return !this._ancestorForm && !this._container;
+    }
     get _submitEvent() {
         return {
             ngForm: this.ngForm,
@@ -430,8 +858,17 @@ class FsFormDirective extends FsFormBaseDirective {
             submitter: this._submitter,
             response: null,
         };
-        const submit$ = this._submit$ ?
-            this._submit$(this._submitEvent) : of(submittedEvent);
+        // Every form in the set gets to save. A form that only frames the layout - a
+        // dialog wrapper around a tab group - carries no submit of its own and simply
+        // defers to the tab form linked into it. When several are linked they run in
+        // nesting order, so an outer save lands before an inner one, and the response
+        // of the last is what the submit resolves with.
+        const submits = this.linkedForms
+            .filter((form) => form.hasSubmit)
+            .map((form) => form._submit$(this._submitEvent));
+        const submit$ = submits.length ?
+            concat(...submits).pipe(toArray(), map((responses) => responses[responses.length - 1])) :
+            of(submittedEvent);
         return submit$
             .pipe(map((response) => {
             submittedEvent.response = response;
@@ -451,22 +888,67 @@ class FsFormDirective extends FsFormBaseDirective {
         return throwError(() => new Error('Form validation error'));
     }
     get _submitter() {
-        return this._getFormGroup().activeSubmitButton?.name;
+        return this._getOwner().activeSubmitButton?.name;
     }
     ngOnInit() {
-        this._formGroup?.registerForm(this);
-        if (this.deactivationGuard) {
-            this._registerCanDeactivateGuard();
+        // A form already nested inside another links to that one, which is itself in
+        // the container - so it joins the set transitively and must not also register
+        // as a container sibling.
+        if (this.link) {
+            if (this._ancestorForm) {
+                this._ancestorForm.linkForm(this);
+            }
+            else {
+                this._container?.registerForm(this);
+            }
+        }
+        // The route guard, dialog backdrop, Ctrl+S and browser close prompt all act
+        // on the set as a whole, so exactly one thing registers them: a linked child
+        // defers to its parent, and every form in a container defers to the container.
+        if (this._owns) {
+            super.ngOnInit();
         }
-        this._registerConfirmDialogBackdropEscape();
-        this._listenHotKeys();
-        this._listenWindowClose();
         this._listenSubmit();
         this._listenFormStatus();
         if (!this.autocomplete) {
             this._registerAutocomplete();
         }
     }
+    /**
+     * Take a nested form into this one's set. Called by the child on init, or by a
+     * container linking its siblings - consumers never call it directly.
+     */
+    linkForm(form) {
+        this._linkedForms.add(form);
+        Promise.resolve()
+            .then(() => {
+            this.rootForm._updateDirtySubmitButtons();
+            this._cdRef.markForCheck();
+        });
+    }
+    unlinkForm(form) {
+        this._linkedForms.delete(form);
+        Promise.resolve()
+            .then(() => {
+            this.rootForm._updateDirtySubmitButtons();
+            this._cdRef.markForCheck();
+        });
+    }
+    /**
+     * Adopt a parent that DI could not supply. Only a container calls this, to link
+     * forms that are siblings in the template into one set.
+     */
+    linkTo(form) {
+        if (!form || form === this) {
+            return;
+        }
+        this._containerParent = form;
+        form.linkForm(this);
+    }
+    unlinkFrom() {
+        this._containerParent?.unlinkForm(this);
+        this._containerParent = null;
+    }
     ngOnChanges(changes) {
         if (changes.confirm) {
             this._updateDirtySubmitButtons();
@@ -487,16 +969,21 @@ class FsFormDirective extends FsFormBaseDirective {
         });
     }
     ngAfterContentInit() {
-        super.ngAfterContentInit();
+        // Tab and drawer confirmation belong to whoever owns the set. A linked child
+        // shares the same tab groups and the same drawer, so letting it register too
+        // would put a second confirm on the same click.
+        if (this._owns) {
+            super.ngAfterContentInit();
+        }
         this._registerConfirm();
-        this._registerConfirmDrawerClose();
-        this._registerDrawerClose();
         this._registerDirtySubmitButton();
     }
     ngOnDestroy() {
-        this._formGroup?.deregisterForm();
+        // Deregister first: it clears the container-supplied parent, so the unlink
+        // below falls through to the DI ancestor rather than repeating the same work.
+        this._container?.deregisterForm(this);
+        this.parentForm?.unlinkForm(this);
         super.ngOnDestroy();
-        this._cleanupCanDeactivate();
     }
     createSnapshot() {
         this._snapshot = this.ngForm.value;
@@ -505,11 +992,14 @@ class FsFormDirective extends FsFormBaseDirective {
         return this._snapshot || {};
     }
     reset() {
-        this.ngForm.resetForm();
-        Object.keys(this.ngForm.controls)
-            .forEach((name) => {
-            const control = this.ngForm.controls[name];
-            control.reset(this._snapshot[name]);
+        this.linkedForms
+            .forEach((form) => {
+            form.ngForm.resetForm();
+            Object.keys(form.ngForm.controls)
+                .forEach((name) => {
+                const control = form.ngForm.controls[name];
+                control.reset(form._snapshot[name]);
+            });
         });
         this.reseted.emit();
     }
@@ -539,24 +1029,29 @@ class FsFormDirective extends FsFormBaseDirective {
     }
     disable() {
         this.ngForm.control.disable();
-        this._getFormGroup()
+        this._getOwner()
             .buttons.forEach((button) => {
             button.disable();
         });
     }
     validate() {
-        Object.values(this.ngForm.controls)
-            .forEach((control) => {
-            control.markAsDirty();
-            control.markAsTouched();
-            control.updateValueAndValidity();
+        this.linkedForms
+            .forEach((form) => {
+            Object.values(form.ngForm.controls)
+                .forEach((control) => {
+                control.markAsDirty();
+                control.markAsTouched();
+                control.updateValueAndValidity();
+            });
         });
     }
     submit$(submitEvent) {
         return of(submitEvent)
             .pipe(tap(() => this._statusValidating()), tap(() => this.validate()), tap(() => this._statusSubmitting()), tap(() => this._setupActiveSubmitButton()), tap(() => this._disableButtons()), switchMap((data) => this._waitUntilStatusPending()
             .pipe(map(() => data))), mergeMap(() => {
-            if (this.ngForm.status === 'INVALID') {
+            const invalid = this.linkedForms
+                .some((form) => form.ngForm.status === 'INVALID');
+            if (invalid) {
                 return this._formInvalidState$;
             }
             return this._formValidState$;
@@ -596,99 +1091,32 @@ class FsFormDirective extends FsFormBaseDirective {
             }
         });
     }
-    _listenWindowClose() {
-        fromEvent(window, 'beforeunload')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            if (this.confirm && this.confirmBrowser && this.ngForm.dirty) {
-                event.returnValue = false;
-            }
-        });
-    }
-    _activeDialog(el, dialog) {
-        if (el.isSameNode(dialog)) {
-            return true;
-        }
-        else if (el.parentElement) {
-            return this._activeDialog(el.parentElement, dialog);
-        }
-        return false;
-    }
-    _listenHotKeys() {
-        this._ngZone.runOutsideAngular(() => {
-            fromEvent(document, 'keydown')
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((event) => {
-                if (this._dialogBackdropEscape && event.code === 'Escape') {
-                    const cdkOverlayPane = Array
-                        .from(document.querySelectorAll('.cdk-overlay-pane')).pop();
-                    const activeDialog = this
-                        ._activeDialog(document.getElementById(this._dialogRef.id), cdkOverlayPane);
-                    if (activeDialog) {
-                        this._ngZone.run(() => {
-                            this._formClose();
-                        });
-                    }
-                }
-                if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
-                    event.preventDefault();
-                    if (this.shortcuts) {
-                        if (this._elementInForm(document.activeElement)) {
-                            this.ngForm.ngSubmit.next(null);
-                        }
-                    }
-                }
-            });
-        });
-    }
-    _formClose() {
-        if (this.confirm && this.confirmDialog) {
-            this.triggerConfirm()
-                .pipe(filter((result) => confirmResultContinue(result)), switchMap((result) => {
-                return result === ConfirmResult.NoChanges || result === ConfirmResult.Discard
-                    ? of(null)
-                    : this.submitted.asObservable();
-            }), takeUntil(this.destroy$))
-                .subscribe((result) => {
-                this._dialogRef.close(result?.response);
-            });
-        }
-        else {
-            this._dialogRef.close(null);
-        }
-    }
     _getActiveSubmitButton() {
-        if (this._getFormGroup().activeSubmitButton) {
-            return this._getFormGroup().activeSubmitButton;
+        if (this._getOwner().activeSubmitButton) {
+            return this._getOwner().activeSubmitButton;
         }
-        return this._getFormGroup()
+        return this._getOwner()
             .buttons
             .filter((button) => button.submit)[0];
     }
-    _elementInForm(el) {
-        if (el.isSameNode(this._element.nativeElement)) {
-            return true;
-        }
-        else if (el.parentElement) {
-            return this._elementInForm(el.parentElement);
-        }
-        return false;
-    }
     _completeSubmit(success, submitEvent) {
         if (success) {
-            this.ngForm.control.markAsPristine();
-            this.createSnapshot();
+            this.linkedForms
+                .forEach((form) => {
+                form.ngForm.control.markAsPristine();
+                form.createSnapshot();
+            });
             this.submitted.emit(submitEvent);
         }
         else {
             this._resetButtons();
         }
-        if (this._getFormGroup().activeSubmitButton) {
+        if (this._getOwner().activeSubmitButton) {
             if (success) {
-                this._getFormGroup().activeSubmitButton.success();
+                this._getOwner().activeSubmitButton.success();
             }
             else {
-                this._getFormGroup().activeSubmitButton.error();
+                this._getOwner().activeSubmitButton.error();
             }
         }
         this._status$.next(FormStatus.Submitted);
@@ -703,22 +1131,35 @@ class FsFormDirective extends FsFormBaseDirective {
         of(true)
             .pipe(delay(resetDelay), first(), takeUntil(this.destroy$))
             .subscribe(() => {
-            if (this.ngForm.form.status === 'VALID') {
+            const valid = this.linkedForms
+                .every((form) => form.ngForm.form.status === 'VALID');
+            if (valid) {
                 this._status$.next(FormStatus.Valid);
             }
             else {
                 this._status$.next(FormStatus.Invalid);
             }
             this._resetButtons();
-            this._getFormGroup().activeSubmitButton = null;
+            this._getOwner().activeSubmitButton = null;
             this._updateDirtySubmitButtons();
         });
     }
-    _getFormGroup() {
-        return this._formGroup || this;
+    /**
+     * Whoever holds the submit buttons for this form. A container when one encloses
+     * it, otherwise the root of its linked set - the button that saves a tab's form
+     * typically sits outside it, down in the dialog footer.
+     *
+     * Only a form that actually joined the container may drive its buttons. DI
+     * hands `_container` to every form inside, including one cut loose with
+     * `[link]="false"`, and an instant-save panel is usually `[confirm]="false"`
+     * too - so without this it would take the `!confirm` branch below and
+     * re-enable the footer's Save button that the linked set had just disabled.
+     */
+    _getOwner() {
+        return (this.link ? this._container : null) || this.rootForm;
     }
     _resetButtons() {
-        this._getFormGroup()
+        this._getOwner()
             .buttons.forEach((button) => {
             button.reset();
         });
@@ -741,66 +1182,6 @@ class FsFormDirective extends FsFormBaseDirective {
             }
         });
     }
-    _registerDrawerClose() {
-        if (this._drawerRef) {
-            this._drawerRef.closeStart$
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((subscriber) => {
-                if (this.submitting) {
-                    this._status$
-                        .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this.destroy$))
-                        .subscribe((status) => {
-                        if (status === FormStatus.Success) {
-                            subscriber.next(null);
-                            subscriber.complete();
-                        }
-                        else {
-                            subscriber.error();
-                        }
-                    });
-                }
-                else {
-                    subscriber.next(null);
-                    subscriber.complete();
-                }
-            });
-        }
-    }
-    _registerConfirmDrawerClose() {
-        if (this._drawerRef) {
-            this._drawerRef.closeStart$
-                .pipe(switchMap((subscriber) => {
-                return iif(() => this.confirm && this.confirmDrawer, this.triggerConfirm()
-                    .pipe(map((result) => confirmResultContinue(result)), tap((result) => {
-                    if (result) {
-                        subscriber.next(null);
-                        subscriber.complete();
-                    }
-                })), defer(() => {
-                    subscriber.next(null);
-                    subscriber.complete();
-                    return of(null);
-                }));
-            }), takeUntil(this.destroy$))
-                .subscribe();
-        }
-    }
-    _registerConfirmDialogBackdropEscape() {
-        if (this._dialogRef) {
-            this._dialogBackdropEscape = !this._dialogRef?.disableClose;
-            if (this._dialogBackdropEscape) {
-                this._dialogRef.backdropClick()
-                    .pipe(takeUntil(this.destroy$))
-                    .subscribe(() => {
-                    this._formClose();
-                });
-                this.destroy$
-                    .subscribe(() => {
-                    this._dialogRef.disableClose = false;
-                });
-            }
-        }
-    }
     _registerAutocomplete() {
         this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);
         this.ngForm.form.registerControl = (name, control) => {
@@ -818,12 +1199,14 @@ class FsFormDirective extends FsFormBaseDirective {
         if (!this.ngForm) {
             return;
         }
+        // Report up: a linked child's edits have to reach the root, since that is
+        // where the submit buttons live and what decides whether they are enabled.
         this.ngForm.form.valueChanges
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
-            this._updateDirtySubmitButtons();
+            this.rootForm._updateDirtySubmitButtons();
         });
-        this._getFormGroup()
+        this._getOwner()
             .buttons.changes
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
@@ -841,11 +1224,12 @@ class FsFormDirective extends FsFormBaseDirective {
         if (!this.ngForm) {
             return;
         }
-        this._getFormGroup()
+        this._dirtyChange$.next();
+        this._getOwner()
             .buttons
             .filter((button) => button.submit)
             .forEach((submitButton) => {
-            if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !submitButton.dirtySubmit) {
+            if (!this.confirm || !this.dirtySubmitButton || this.dirtyLinked || !submitButton.dirtySubmit) {
                 submitButton.enable();
             }
             else {
@@ -860,22 +1244,26 @@ class FsFormDirective extends FsFormBaseDirective {
         this._status$.next(FormStatus.Validating);
     }
     _setupActiveSubmitButton() {
-        this._getFormGroup()
+        this._getOwner()
             .activeSubmitButton = this._getActiveSubmitButton();
         this._resetButtons();
-        if (this._getFormGroup().activeSubmitButton) {
-            this._getFormGroup().activeSubmitButton.process();
+        if (this._getOwner().activeSubmitButton) {
+            this._getOwner().activeSubmitButton.process();
         }
     }
     _disableButtons() {
-        this._getFormGroup()
+        this._getOwner()
             .buttons.forEach((button) => {
             button.disable();
         });
     }
     _waitUntilStatusPending() {
-        return this.ngForm.statusChanges
-            .pipe(startWith(this.ngForm.status), first((state) => state !== 'PENDING'));
+        // Async validators can be pending in any linked form, so hold the submit
+        // until every one of them has settled - not just this form's.
+        return combineLatest(this.linkedForms
+            .map((form) => form.ngForm.statusChanges
+            .pipe(startWith(form.ngForm.status))))
+            .pipe(first((states) => states.every((state) => state !== 'PENDING')));
     }
     _handleError(e) {
         console.log('%c Form Submit ', 'color: white; background-color: #D33F49', 'Error occured');
@@ -889,29 +1277,8 @@ class FsFormDirective extends FsFormBaseDirective {
         console.groupEnd();
         this._completeSubmit(false, null);
     }
-    _registerCanDeactivateGuard() {
-        this._activatedRouteConfig = getActiveRoute(this._route).routeConfig;
-        if (!this._activatedRouteConfig) {
-            return;
-        }
-        this._form.registerFormDirective(this._activatedRouteConfig.component, this);
-        if (!Array.isArray(this._activatedRouteConfig.canDeactivate)) {
-            this._activatedRouteConfig.canDeactivate = [];
-        }
-        if (this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard) === -1) {
-            this._activatedRouteConfig.canDeactivate.push(FormDeactivateGuard);
-        }
-    }
-    _cleanupCanDeactivate() {
-        if (!this._activatedRouteConfig) {
-            return;
-        }
-        const guardIndex = this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard);
-        this._activatedRouteConfig.canDeactivate.splice(guardIndex, 1);
-        this._form.removeFormDirective(this._activatedRouteConfig.component);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDirective, isStandalone: true, selector: "[fsForm]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", autocomplete: "autocomplete", shortcuts: "shortcuts", confirm: "confirm", confirmDialog: "confirmDialog", confirmDrawer: "confirmDrawer", confirmBrowser: "confirmBrowser", dirtySubmitButton: "dirtySubmitButton", submit: "submit", successDelay: "successDelay", errorDelay: "errorDelay", deactivationGuard: "deactivationGuard" }, outputs: { submitEvent: "fsForm", invalid: "invalid", valid: "valid", submitted: "submitted", reseted: "reseted", cleared: "cleared" }, host: { properties: { "class.fs-form": "this.fsFormClass" } }, exportAs: ["fsForm"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDirective, isStandalone: true, selector: "[fsForm]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", autocomplete: "autocomplete", dirtySubmitButton: "dirtySubmitButton", submit: "submit", successDelay: "successDelay", errorDelay: "errorDelay", link: "link" }, outputs: { submitEvent: "fsForm", invalid: "invalid", valid: "valid", submitted: "submitted", reseted: "reseted", cleared: "cleared" }, host: { properties: { "class.fs-form": "this.fsFormClass" } }, exportAs: ["fsForm"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDirective, decorators: [{
             type: Directive,
@@ -930,16 +1297,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], shortcuts: [{
-                type: Input
-            }], confirm: [{
-                type: Input
-            }], confirmDialog: [{
-                type: Input
-            }], confirmDrawer: [{
-                type: Input
-            }], confirmBrowser: [{
-                type: Input
             }], dirtySubmitButton: [{
                 type: Input
             }], submit: [{
@@ -948,7 +1305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], errorDelay: [{
                 type: Input
-            }], deactivationGuard: [{
+            }], link: [{
                 type: Input
             }], submitEvent: [{
                 type: Output,
@@ -984,7 +1341,7 @@ class FsButtonDirective {
     _formDisabled = false;
     _previousDisabled = false;
     _destroy$ = new Subject();
-    _formGroup = inject(FsFormGroupDirective, { optional: true });
+    _container = inject(FsFormContainerDirective, { optional: true });
     _form = inject(FsFormDirective, { optional: true });
     _matButton = inject(MatButton, { optional: true, host: true });
     _elementRef = inject(ElementRef);
@@ -992,12 +1349,17 @@ class FsButtonDirective {
     _formBase;
     ngOnInit() {
         this.submit = this._elementRef.nativeElement.getAttribute('type') === 'submit';
-        // Prefer the enclosing form group over the form: the form's own button
+        // Prefer the enclosing container 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;
+        // registry the same way, so buttons must register with the same owner.
+        // Registering with the form while the form reads the container leaves the
+        // container's button list empty and the submit button never gets
+        // dirty-disabled.
+        //
+        // Note this resolves the ROOT of the linked set, not the nearest form: the
+        // button that saves a tab's form typically sits outside it, down in the
+        // dialog footer, and drives the whole linked set from there.
+        this._formBase = this._container || this._form?.rootForm;
         if (this._formBase) {
             this._formBase.addButton(this);
             if (this.submit) {
@@ -1176,30 +1538,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsFormDialogActionsComponent {
-    _form = inject(FsFormDirective, { optional: true });
-    _cdRef = inject(ChangeDetectorRef);
-    save = true;
+    /** Leave unset inside an `fsFormContainer` to follow whether it has anything to save. */
+    save;
     create = false;
     close = false;
-    done = false;
+    /** Leave unset inside an `fsFormContainer` to fill in whenever Save does not apply. */
+    done;
     closeData = null;
     name;
     dirty = false;
     _destroy$ = new Subject();
+    _container = inject(FsFormContainerDirective, { optional: true });
+    _form = inject(FsFormDirective, { optional: true });
+    _cdRef = inject(ChangeDetectorRef);
+    /**
+     * Inside a container these default to whether anything mounted can actually
+     * save, so a footer left as a bare `<fs-form-dialog-actions>` swaps Save for
+     * Done as tabs change without the dialog listing which tabs are savable. An
+     * explicit binding always wins, and outside a container Save stays on as it
+     * always did.
+     */
+    get showSave() {
+        return this.save ?? (this._container ? this._container.submits : true);
+    }
+    get showDone() {
+        return this.done ?? (this._container ? !this._container.submits && !this.create : false);
+    }
     ngOnInit() {
-        if (this._form) {
-            this._form.ngForm.valueChanges
-                .pipe(filter(() => (!this.dirty)), takeUntil(this._destroy$))
+        const owner = this._container || this._form?.rootForm;
+        if (owner) {
+            // Track the whole set, not one form's own controls: with a form scoped to a
+            // tab's fields, the actions sit outside it in the dialog footer and that
+            // form's NgForm holds nothing of its own. Recomputed on every emission
+            // rather than latched, so a switch to a pristine tab clears it too.
+            owner.dirtyChange$
+                .pipe(takeUntil(this._destroy$))
                 .subscribe(() => {
-                this.dirty = this._form.ngForm.dirty;
+                this.dirty = owner.dirtyLinked;
                 this._cdRef.markForCheck();
             });
-            this._form.submitted
+            owner.submitted$
                 .pipe(delay(50), takeUntil(this._destroy$))
                 .subscribe(() => {
                 this.dirty = false;
                 this._cdRef.markForCheck();
             });
+        }
+        if (this._form) {
             this._form.reseted
                 .pipe(takeUntil(this._destroy$))
                 .subscribe(() => {
@@ -1213,7 +1598,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", "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 });
+    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': showSave || create }\">\n  @if (showSave || 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 (showDone) {\n    <button\n      mat-button\n      type=\"button\"\n      color=\"primary\"\n      [mat-dialog-close]=\"null\">\n      Done\n    </button>\n  }\n  @if (showSave || 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 (!(showSave || create)) {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  }\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", 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,
@@ -1224,7 +1609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatDialogClose,
                         NgTemplateOutlet,
                         FsFormDialogCloseDirective,
-                    ], 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"] }]
+                    ], template: "<div\n  class=\"form-buttons\"\n  [ngClass]=\"{ 'save-create': showSave || create }\">\n  @if (showSave || 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 (showDone) {\n    <button\n      mat-button\n      type=\"button\"\n      color=\"primary\"\n      [mat-dialog-close]=\"null\">\n      Done\n    </button>\n  }\n  @if (showSave || 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 (!(showSave || create)) {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  }\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.form-buttons.save-create .close-button{float:right}\n"] }]
         }], propDecorators: { save: [{
                 type: Input
             }], create: [{
@@ -2523,7 +2908,7 @@ class FsFormModule {
             FsFormTemplateDirective,
             FsFormTemplateDirective,
             FsFormTemplateOutletDirective,
-            FsFormGroupDirective], exports: [FsFormDirective,
+            FsFormContainerDirective], exports: [FsFormDirective,
             FsControlDirective,
             FsFormRequiredDirective,
             FsFormMinDirective,
@@ -2553,7 +2938,7 @@ class FsFormModule {
             FsFormTemplateDirective,
             FsFormTemplateDirective,
             FsFormTemplateOutletDirective,
-            FsFormGroupDirective] });
+            FsFormContainerDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormModule, providers: [
             {
                 provide: ErrorStateMatcher,
@@ -2607,7 +2992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFormTemplateDirective,
                         FsFormTemplateDirective,
                         FsFormTemplateOutletDirective,
-                        FsFormGroupDirective,
+                        FsFormContainerDirective,
                     ],
                     exports: [
                         FsFormDirective,
@@ -2640,7 +3025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFormTemplateDirective,
                         FsFormTemplateDirective,
                         FsFormTemplateOutletDirective,
-                        FsFormGroupDirective,
+                        FsFormContainerDirective,
                     ],
                     providers: [
                         {
@@ -2657,5 +3042,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ConfirmResult, FormDeactivateGuard, FormStatus, FsButtonDirective, FsControlDirective, FsForm, FsFormCompareDirective, FsFormDateRangeDirective, FsFormDialogActionsComponent, FsFormDialogCloseDirective, FsFormDirective, FsFormEmailDirective, FsFormEmailsDirective, FsFormFunctionDirective, FsFormGreaterDirective, FsFormGreaterEqualDirective, FsFormGroupDirective, FsFormIntegerDirective, FsFormLesserDirective, FsFormLesserEqualDirective, FsFormMaxDirective, FsFormMaxLengthDirective, FsFormMinDirective, FsFormMinLengthDirective, FsFormModule, FsFormNoFsValidatorsDirective, FsFormNumericDirective, FsFormPatternDirective, FsFormPhoneDirective, FsFormRequiredDirective, FsFormTemplateDirective, FsFormTemplateOutletDirective, FsFormUrlDirective, FsFormValidateDirective, FsSubmitButtonDirective, FsValidators };
+export { ConfirmResult, FormDeactivateGuard, FormStatus, FsButtonDirective, FsControlDirective, FsForm, FsFormCompareDirective, FsFormContainerDirective, FsFormDateRangeDirective, FsFormDialogActionsComponent, FsFormDialogCloseDirective, FsFormDirective, FsFormEmailDirective, FsFormEmailsDirective, FsFormFunctionDirective, FsFormGreaterDirective, FsFormGreaterEqualDirective, FsFormIntegerDirective, FsFormLesserDirective, FsFormLesserEqualDirective, FsFormMaxDirective, FsFormMaxLengthDirective, FsFormMinDirective, FsFormMinLengthDirective, FsFormModule, FsFormNoFsValidatorsDirective, FsFormNumericDirective, FsFormPatternDirective, FsFormPhoneDirective, FsFormRequiredDirective, FsFormTemplateDirective, FsFormTemplateOutletDirective, FsFormUrlDirective, FsFormValidateDirective, FsSubmitButtonDirective, FsValidators };
 //# sourceMappingURL=firestitch-form.mjs.map