@firestitch/form 18.0.9 → 18.0.10

package/fesm2022/firestitch-form.mjs

@@ -1,25 +1,25 @@
-import * as i2$2 from '@angular/common';
+import * as i2$3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Inject, Injectable, EventEmitter, QueryList, Directive, Optional, Input, Output, HostBinding, ContentChildren, HostListener, Host, ViewChild, ViewChildren, InjectionToken, Self, NgModule } from '@angular/core';
-import * as i1$2 from '@angular/forms';
+import { Component, ChangeDetectionStrategy, Inject, inject, Injectable, QueryList, Directive, Input, ContentChildren, ContentChild, EventEmitter, Optional, Output, HostBinding, HostListener, ElementRef, ChangeDetectorRef, ViewChild, InjectionToken, Self, ViewChildren, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
 import { UntypedFormGroup, NgForm, NgModel, Validators, FormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/button';
+import { MatButton, MatButtonModule } from '@angular/material/button';
 import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';
 import * as i1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
-import * as i3 from '@firestitch/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import * as i2 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import { Subject, of, merge, BehaviorSubject, throwError, fromEvent, iif, defer, from, isObservable } from 'rxjs';
-import { filter, map, switchMap, first, mapTo, take, takeUntil, mergeMap, tap, catchError, delay, startWith } from 'rxjs/operators';
-import * as i2 from '@angular/router';
-import { MatTabGroup } from '@angular/material/tabs';
+import { Subject, of, filter, BehaviorSubject, throwError, fromEvent, iif, defer, from, isObservable } from 'rxjs';
+import { switchMap, map, catchError, takeUntil, tap, take, mergeMap, filter as filter$1, delay, first, startWith, mapTo } from 'rxjs/operators';
+import * as i2$1 from '@angular/router';
 import { guid, email, isEmpty, isNumeric, phone, url } from '@firestitch/common';
-import * as i6 from '@firestitch/drawer';
+import * as i7 from '@firestitch/drawer';
 import { DrawerRef } from '@firestitch/drawer';
-import * as i2$1 from '@firestitch/message';
+import * as i2$2 from '@firestitch/message';
 import { MessageMode } from '@firestitch/message';
+import { MatTabGroup } from '@angular/material/tabs';
 import { values, keys, isObject } from 'lodash-es';
 import { isValid } from 'date-fns';
 
@@ -57,11 +57,15 @@ class ConfirmUnsavedComponent {
         this._destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfirmUnsavedComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ConfirmUnsavedComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>{{title}}</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        fsFormButtonStandalone\n        mat-button>\n      {{saveLabel}}\n    </button>\n    <button\n        type=\"button\"\n        (click)=\"discard()\"\n        fsFormButtonStandalone\n        mat-button>\n      {{discardLabel}}\n    </button>  \n    <button\n        type=\"button\"\n        (click)=\"cancel()\"\n        fsFormButtonStandalone\n        mat-button>\n      {{cancelLabel}}\n    </button>    \n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [":host{width:100%}.form-buttons.save-create .close-button:not(.cancel-button){float:right}\n"], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ConfirmUnsavedComponent, isStandalone: true, selector: "ng-component", ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfirmUnsavedComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog>\n  <h1 mat-dialog-title>{{title}}</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        fsFormButtonStandalone\n        mat-button>\n      {{saveLabel}}\n    </button>\n    <button\n        type=\"button\"\n        (click)=\"discard()\"\n        fsFormButtonStandalone\n        mat-button>\n      {{discardLabel}}\n    </button>  \n    <button\n        type=\"button\"\n        (click)=\"cancel()\"\n        fsFormButtonStandalone\n        mat-button>\n      {{cancelLabel}}\n    </button>    \n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [":host{width:100%}.form-buttons.save-create .close-button:not(.cancel-button){float:right}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatDialogModule,
+                        MatButton,
+                        FsDialogModule,
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -100,23 +104,9 @@ var FormStatus;
 })(FormStatus || (FormStatus = {}));
 
 class FsForm {
-    _dialog;
     // value is array for future possibilities of extension
     _formDirectiveStore = new WeakMap();
-    _eventBus;
-    constructor(_dialog) {
-        this._dialog = _dialog;
-        this._eventBus = new Subject();
-    }
-    // @deprecated
-    broadcast(key, data) {
-        this._eventBus.next({ key, data });
-    }
-    // @deprecated
-    on(key) {
-        return this._eventBus.asObservable()
-            .pipe(filter((event) => event.key === key), map((event) => event.data));
-    }
+    _dialog = inject(MatDialog);
     registerFormDirective(routeComponent, directive) {
         const directives = this.getFormDirectives(routeComponent) || [];
         directives.push(directive);
@@ -128,9 +118,7 @@ class FsForm {
     removeFormDirective(routeComponent) {
         this._formDirectiveStore.delete(routeComponent);
     }
-    confirmUnsaved(directives) {
-        // TODO support for multiple directives per page
-        const form = directives[0];
+    confirmUnsaved(form) {
         if (!form.confirm || !form.ngForm.dirty) {
             return of(ConfirmResult.Pristine);
         }
@@ -167,15 +155,14 @@ class FsForm {
             }
             if (result === 'save') {
                 form.ngForm.control.markAsPristine();
-                form.triggerSubmit({ confirmed: true });
-                return merge(form.submitted
-                    .pipe(first(), mapTo(ConfirmResult.Save)), form.invalid
-                    .pipe(first(), mapTo(ConfirmResult.Invalid)))
-                    .pipe(take(1));
+                return form.submit$({ confirmed: true })
+                    .pipe(map(() => ConfirmResult.Save), catchError(() => {
+                    return of(ConfirmResult.Invalid);
+                }));
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsForm, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsForm, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsForm, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsForm, decorators: [{
@@ -183,7 +170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }] });
+        }] });
 
 class FormDeactivateGuard {
     _form;
@@ -204,12 +191,12 @@ class FormDeactivateGuard {
             console.error('Can not find a valid FsFormDirective');
             return of(true);
         }
-        return this._form.confirmUnsaved(directives)
+        return this._form.confirmUnsaved(directives[0])
             .pipe(map((result) => {
             return confirmResultContinue(result);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FormDeactivateGuard, deps: [{ token: FsForm }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FormDeactivateGuard, deps: [{ token: FsForm }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FormDeactivateGuard, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FormDeactivateGuard, decorators: [{
@@ -217,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: FsForm }, { type: i2.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: FsForm }, { type: i2$1.ActivatedRoute }] });
 
 function getFormErrors(control, key) {
     let errors = null;
@@ -243,13 +230,140 @@ function getFormErrors(control, key) {
     return errors;
 }
 
-class FsFormDirective {
+class FsFormBaseDirective {
+    confirmTabs = true;
+    tabGroup;
+    _destroy$ = new Subject();
+    _tabGroups = new QueryList();
+    _buttons = new QueryList();
+    _activeSubmitButton;
+    ngAfterContentInit() {
+        this._registerConfirmTabs();
+    }
+    get destroy$() {
+        return this._destroy$.asObservable();
+    }
+    ngOnDestroy() {
+        this._destroy$.next(null);
+        this._destroy$.complete();
+    }
+    get buttons() {
+        return this._buttons;
+    }
+    get activeSubmitButton() {
+        return this._activeSubmitButton;
+    }
+    set activeSubmitButton(button) {
+        this._activeSubmitButton = button;
+    }
+    addButton(button) {
+        this._buttons
+            .reset([
+            ...this._buttons.toArray(),
+            button,
+        ]);
+    }
+    removeButton(button) {
+        if (this._activeSubmitButton === button) {
+            this._activeSubmitButton = null;
+        }
+        this._buttons.reset([
+            ...this._buttons.toArray()
+                .filter((item) => (button !== item)),
+        ]);
+    }
+    _registerConfirmTabs() {
+        this._registerConfirmTabGroups(this._tabGroups.toArray());
+        this._tabGroups.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._registerConfirmTabGroups(this._tabGroups.toArray());
+        });
+    }
+    _registerConfirmTabGroups(tabGroups) {
+        tabGroups.forEach((tabGroup) => {
+            this._registerConfirmTabGroup(tabGroup);
+        });
+    }
+    _registerConfirmTabGroup(tabGroup) {
+        const confirmTabGroup = tabGroup;
+        if (!confirmTabGroup._originalHandleClick) {
+            confirmTabGroup._originalHandleClick = tabGroup._handleClick;
+            confirmTabGroup._handlClick$ = new Subject();
+            confirmTabGroup._handleClick = (tab, tabHeader, idx) => {
+                if (confirmTabGroup._handlClick$.observers.length) {
+                    confirmTabGroup._handlClick$.next({ tab, tabHeader, idx });
+                }
+                else {
+                    confirmTabGroup._originalHandleClick(tab, tabHeader, idx);
+                }
+            };
+        }
+        confirmTabGroup._handlClick$
+            .pipe(filter(() => !this.submitting), switchMap((event) => {
+            if (this.confirm && this.confirmTabs) {
+                return this.triggerConfirm()
+                    .pipe(tap((result) => {
+                    if (confirmResultContinue(result)) {
+                        confirmTabGroup.selectedIndex = event.idx;
+                    }
+                }));
+            }
+            confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
+            return of(null);
+        }), takeUntil(this._destroy$))
+            .subscribe();
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormBaseDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { confirmTabs: [{
+                type: Input
+            }], tabGroup: [{
+                type: Input
+            }], _tabGroups: [{
+                type: ContentChildren,
+                args: [MatTabGroup, { descendants: true }]
+            }] } });
+
+class FsFormGroupDirective extends FsFormBaseDirective {
+    _formDirective;
+    triggerSubmit() {
+        return this._formDirective?.triggerSubmit();
+    }
+    triggerConfirm() {
+        return this._formDirective?.triggerConfirm();
+    }
+    get submitting() {
+        return this._formDirective?.submitting;
+    }
+    get confirm() {
+        return this._formDirective?.confirm;
+    }
+    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, selector: "[fsFormGroup]", queries: [{ propertyName: "_formDirective", first: true, predicate: FsFormDirective, descendants: true }], exportAs: ["fsFormGroup"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormGroup]',
+                    exportAs: 'fsFormGroup',
+                }]
+        }], propDecorators: { _formDirective: [{
+                type: ContentChild,
+                args: [FsFormDirective]
+            }] } });
+
+class FsFormDirective extends FsFormBaseDirective {
     ngForm;
     _form;
     _element;
     _message;
     _ngZone;
     _cdRef;
+    _formGroup;
     _dialogRef;
     _drawerRef;
     _route;
@@ -263,7 +377,6 @@ class FsFormDirective {
     confirmDialog = true;
     confirmDrawer = true;
     confirmBrowser = true;
-    confirmTabs = true;
     dirtySubmitButton = true;
     set submit(submit$) {
         this._submit$ = submit$;
@@ -273,7 +386,6 @@ class FsFormDirective {
     }
     successDelay = 0;
     errorDelay = 1000;
-    tabGroup;
     deactivationGuard = true;
     submitEvent = new EventEmitter();
     invalid = new EventEmitter();
@@ -282,24 +394,21 @@ class FsFormDirective {
     reseted = new EventEmitter();
     cleared = new EventEmitter();
     fsFormClass = true;
-    _tabGroups = new QueryList();
-    _buttons = new QueryList();
     _registerControl;
-    _activeSubmitButton;
     _dialogBackdropEscape = false;
     _snapshot = {};
     _activatedRouteConfig;
     _status$ = new BehaviorSubject(FormStatus.Valid);
-    _destroy$ = new Subject();
-    _confirmed = false;
     _submit$ = null;
-    constructor(ngForm, _form, _element, _message, _ngZone, _cdRef, _dialogRef, _drawerRef, _route) {
+    constructor(ngForm, _form, _element, _message, _ngZone, _cdRef, _formGroup, _dialogRef, _drawerRef, _route) {
+        super();
         this.ngForm = ngForm;
         this._form = _form;
         this._element = _element;
         this._message = _message;
         this._ngZone = _ngZone;
         this._cdRef = _cdRef;
+        this._formGroup = _formGroup;
         this._dialogRef = _dialogRef;
         this._drawerRef = _drawerRef;
         this._route = _route;
@@ -320,7 +429,6 @@ class FsFormDirective {
         };
     }
     get _formValidState$() {
-        this._form.broadcast('valid', this._submitEvent);
         this.submitEvent.emit(this._submitEvent);
         this.valid.emit(this._submitEvent);
         const submittedEvent = {
@@ -334,10 +442,9 @@ class FsFormDirective {
             .pipe(map((response) => {
             submittedEvent.response = response;
             return submittedEvent;
-        }), takeUntil(this._destroy$));
+        }), takeUntil(this.destroy$));
     }
     get _formInvalidState$() {
-        this._form.broadcast('invalid', this._submitEvent);
         if (this.invalid) {
             this.invalid.emit(this._submitEvent);
         }
@@ -347,12 +454,10 @@ class FsFormDirective {
         if (el) {
             el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }
-        return throwError('Form validation error');
+        return throwError(() => new Error('Form validation error'));
     }
     get _submitter() {
-        return this._activeSubmitButton
-            ? this._activeSubmitButton.name
-            : null;
+        return this._getFormGroup().activeSubmitButton?.name;
     }
     ngOnInit() {
         if (this.deactivationGuard) {
@@ -387,16 +492,15 @@ class FsFormDirective {
         });
     }
     ngAfterContentInit() {
+        super.ngAfterContentInit();
         this._registerConfirm();
         this._registerConfirmDrawerClose();
-        this._registerConfirmTabs();
         this._registerDrawerClose();
         this._registerDirtySubmitButton();
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this._cleanupCanDeactivate();
-        this._destroy$.next(null);
-        this._destroy$.complete();
     }
     createSnapshot() {
         this._snapshot = this.ngForm.value;
@@ -426,13 +530,12 @@ class FsFormDirective {
         this._updateDirtySubmitButtons();
     }
     triggerSubmit(options) {
-        this._confirmed = options?.confirmed;
         this.ngForm.ngSubmit.emit();
     }
     triggerConfirm() {
         const submitted = this.submitting ? this.submitted.asObservable() : of({});
         return submitted
-            .pipe(take(1), mergeMap(() => this._form.confirmUnsaved([this])));
+            .pipe(take(1), mergeMap(() => this._form.confirmUnsaved(this)));
     }
     enable() {
         this.ngForm.control.enable();
@@ -440,22 +543,11 @@ class FsFormDirective {
     }
     disable() {
         this.ngForm.control.disable();
-        this._buttons.forEach((button) => {
+        this._getFormGroup()
+            .buttons.forEach((button) => {
             button.disable();
         });
     }
-    addButton(button) {
-        this._buttons.reset([
-            ...this._buttons.toArray(),
-            button,
-        ]);
-    }
-    removeButton(button) {
-        this._buttons.reset([
-            ...this._buttons.toArray()
-                .filter((item) => (button !== item)),
-        ]);
-    }
     validate() {
         Object.values(this.ngForm.controls)
             .forEach((control) => {
@@ -464,37 +556,38 @@ class FsFormDirective {
             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') {
+                return this._formInvalidState$;
+            }
+            return this._formValidState$;
+        }), catchError((e) => {
+            this._handleError(e);
+            return of(null);
+        }), tap((submittedEvent) => {
+            if (submittedEvent) {
+                this._completeSubmit(true, submittedEvent);
+            }
+        }));
+    }
     _listenSubmit() {
-        this.ngForm
+        this
+            .ngForm
             .ngSubmit
             .pipe(tap((event) => {
             event?.preventDefault();
-        }), map((event) => {
-            return { event, confirmed: this._confirmed };
-        }), tap(() => this._confirmed = false), filter(() => {
+        }), filter$1(() => {
             return [FormStatus.Valid, FormStatus.Invalid]
                 .includes(this._status$.getValue());
-        }), tap(() => this._broadcasValidatingEvents()), tap(() => this.validate()), tap(() => this._broadcastSubmittingEvents()), tap(() => this._setupActiveSubmitButton()), tap(() => this._disableButtons()), switchMap((data) => this._waitUntilStatusPending()
-            .pipe(mapTo(data))), mergeMap((data) => {
-            if (this.ngForm.status === 'INVALID') {
-                return this._formInvalidState$;
-            }
-            return this._formValidState$
-                .pipe(map((submitEvent) => ({
-                ...submitEvent,
-                confirmed: data.confirmed,
-            })));
-        }), catchError((e, source$) => {
-            this._handleError(e);
-            return source$;
-        }), tap((submittedEvent) => {
-            this._completeSubmit(true, submittedEvent);
-        }), takeUntil(this._destroy$))
+        }), switchMap(() => this.submit$(this._submitEvent)), takeUntil(this.destroy$))
             .subscribe();
     }
     _listenFormStatus() {
         this._status$
-            .pipe(takeUntil(this._destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((formStatus) => {
             const cls = [FormStatus.Submitting, FormStatus.Validating];
             const classList = this._element.nativeElement.classList;
@@ -506,7 +599,7 @@ class FsFormDirective {
     }
     _listenWindowClose() {
         fromEvent(window, 'beforeunload')
-            .pipe(takeUntil(this._destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
             if (this.confirm && this.confirmBrowser && this.ngForm.dirty) {
                 event.returnValue = false;
@@ -525,7 +618,7 @@ class FsFormDirective {
     _listenHotKeys() {
         this._ngZone.runOutsideAngular(() => {
             fromEvent(document, 'keydown')
-                .pipe(takeUntil(this._destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe((event) => {
                 if (this._dialogBackdropEscape && event.code === 'Escape') {
                     const cdkOverlayPane = Array
@@ -552,11 +645,11 @@ class FsFormDirective {
     _formClose() {
         if (this.confirm && this.confirmDialog) {
             this.triggerConfirm()
-                .pipe(filter((result) => confirmResultContinue(result)), switchMap((result) => {
+                .pipe(filter$1((result) => confirmResultContinue(result)), switchMap((result) => {
                 return result === ConfirmResult.Pristine || result === ConfirmResult.Discard
                     ? of(null)
                     : this.submitted.asObservable();
-            }), takeUntil(this._destroy$))
+            }), takeUntil(this.destroy$))
                 .subscribe((result) => {
                 this._dialogRef.close(result?.response);
             });
@@ -566,13 +659,12 @@ class FsFormDirective {
         }
     }
     _getActiveSubmitButton() {
-        const submitButtons = this._buttons
-            .filter((button) => button.submit);
-        const activeButton = submitButtons
-            .find((button) => {
-            return button.active;
-        });
-        return activeButton ? activeButton : submitButtons[0];
+        if (this._getFormGroup().activeSubmitButton) {
+            return this._getFormGroup().activeSubmitButton;
+        }
+        return this._getFormGroup()
+            .buttons
+            .filter((button) => button.submit)[0];
     }
     _elementInForm(el) {
         if (el.isSameNode(this._element.nativeElement)) {
@@ -592,12 +684,12 @@ class FsFormDirective {
         else {
             this._resetButtons();
         }
-        if (this._activeSubmitButton) {
+        if (this._getFormGroup().activeSubmitButton) {
             if (success) {
-                this._activeSubmitButton.success();
+                this._getFormGroup().activeSubmitButton.success();
             }
             else {
-                this._activeSubmitButton.error();
+                this._getFormGroup().activeSubmitButton.error();
             }
         }
         this._status$.next(FormStatus.Submitted);
@@ -610,7 +702,8 @@ class FsFormDirective {
         this._status$.next(FormStatus.Completing);
         const resetDelay = success ? this.successDelay : this.errorDelay;
         of(true)
-            .pipe(delay(resetDelay), first(), takeUntil(this._destroy$)).subscribe(() => {
+            .pipe(delay(resetDelay), first(), takeUntil(this.destroy$))
+            .subscribe(() => {
             if (this.ngForm.form.status === 'VALID') {
                 this._status$.next(FormStatus.Valid);
             }
@@ -618,23 +711,22 @@ class FsFormDirective {
                 this._status$.next(FormStatus.Invalid);
             }
             this._resetButtons();
-            this._resetActiveButtons();
+            this._getFormGroup().activeSubmitButton = null;
             this._updateDirtySubmitButtons();
         });
     }
+    _getFormGroup() {
+        return this._formGroup || this;
+    }
     _resetButtons() {
-        this._buttons.forEach((button) => {
+        this._getFormGroup()
+            .buttons.forEach((button) => {
             button.reset();
         });
     }
-    _resetActiveButtons() {
-        this._buttons.forEach((button) => {
-            button.resetActive();
-        });
-    }
     _registerConfirm() {
         this.ngForm.form.valueChanges
-            .pipe(takeUntil(this._destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((changes) => {
             if (this._dialogBackdropEscape && this._dialogRef) {
                 this._dialogRef.disableClose = true;
@@ -653,11 +745,11 @@ class FsFormDirective {
     _registerDrawerClose() {
         if (this._drawerRef) {
             this._drawerRef.closeStart$
-                .pipe(takeUntil(this._destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe((subscriber) => {
                 if (this.submitting) {
                     this._status$
-                        .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this._destroy$))
+                        .pipe(filter$1((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this.destroy$))
                         .subscribe((status) => {
                         if (status === FormStatus.Success) {
                             subscriber.next(null);
@@ -690,65 +782,20 @@ class FsFormDirective {
                     subscriber.complete();
                     return of(null);
                 }));
-            }), takeUntil(this._destroy$))
+            }), takeUntil(this.destroy$))
                 .subscribe();
         }
     }
-    _registerConfirmTabs() {
-        if (this.tabGroup) {
-            this._registerConfirmTabGroup(this.tabGroup);
-        }
-        this._registerConfirmTabGroups(this._tabGroups.toArray());
-        this._tabGroups.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._registerConfirmTabGroups(this._tabGroups.toArray());
-        });
-    }
-    _registerConfirmTabGroups(tabGroups) {
-        tabGroups.forEach((tabGroup) => {
-            this._registerConfirmTabGroup(tabGroup);
-        });
-    }
-    _registerConfirmTabGroup(tabGroup) {
-        const confirmTabGroup = tabGroup;
-        if (!confirmTabGroup._originalHandleClick) {
-            confirmTabGroup._originalHandleClick = tabGroup._handleClick;
-            confirmTabGroup._handlClick$ = new Subject();
-            confirmTabGroup._handleClick = (tab, tabHeader, idx) => {
-                if (confirmTabGroup._handlClick$.observers.length) {
-                    confirmTabGroup._handlClick$.next({ tab, tabHeader, idx });
-                }
-                else {
-                    confirmTabGroup._originalHandleClick(tab, tabHeader, idx);
-                }
-            };
-        }
-        confirmTabGroup._handlClick$
-            .pipe(filter(() => !this.submitting), switchMap((event) => {
-            if (this.confirm && this.confirmTabs) {
-                return this.triggerConfirm()
-                    .pipe(tap((result) => {
-                    if (confirmResultContinue(result)) {
-                        confirmTabGroup.selectedIndex = event.idx;
-                    }
-                }));
-            }
-            confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
-            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$))
+                    .pipe(takeUntil(this.destroy$))
                     .subscribe(() => {
                     this._formClose();
                 });
-                this._destroy$
+                this.destroy$
                     .subscribe(() => {
                     this._dialogRef.disableClose = false;
                 });
@@ -773,18 +820,20 @@ class FsFormDirective {
             return;
         }
         this.ngForm.form.valueChanges
-            .pipe(takeUntil(this._destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
             this._updateDirtySubmitButtons();
         });
-        this._buttons.changes
-            .pipe(takeUntil(this._destroy$))
+        this._getFormGroup()
+            .buttons.changes
+            .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
             this._updateDirtySubmitButtons();
         });
     }
     _updateDirtySubmitButtons() {
-        this._buttons
+        this._getFormGroup()
+            .buttons
             .filter((button) => button.submit)
             .forEach((submitButton) => {
             if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !submitButton.dirtySubmit) {
@@ -795,22 +844,23 @@ class FsFormDirective {
             }
         });
     }
-    _broadcastSubmittingEvents() {
+    _statusSubmitting() {
         this._status$.next(FormStatus.Submitting);
-        this._form.broadcast('submit', this.ngForm);
     }
-    _broadcasValidatingEvents() {
+    _statusValidating() {
         this._status$.next(FormStatus.Validating);
     }
     _setupActiveSubmitButton() {
-        this._activeSubmitButton = this._getActiveSubmitButton();
+        this._getFormGroup()
+            .activeSubmitButton = this._getActiveSubmitButton();
         this._resetButtons();
-        if (this._activeSubmitButton) {
-            this._activeSubmitButton.process();
+        if (this._getFormGroup().activeSubmitButton) {
+            this._getFormGroup().activeSubmitButton.process();
         }
     }
     _disableButtons() {
-        this._buttons.forEach((button) => {
+        this._getFormGroup()
+            .buttons.forEach((button) => {
             button.disable();
         });
     }
@@ -851,8 +901,8 @@ class FsFormDirective {
         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: [{ token: NgForm }, { token: FsForm }, { token: i0.ElementRef }, { token: i2$1.FsMessage }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MatDialogRef, optional: true }, { token: DrawerRef, optional: true }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDirective, selector: "[fsForm]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", autocomplete: "autocomplete", shortcuts: "shortcuts", confirm: "confirm", confirmDialog: "confirmDialog", confirmDrawer: "confirmDrawer", confirmBrowser: "confirmBrowser", confirmTabs: "confirmTabs", dirtySubmitButton: "dirtySubmitButton", submit: "submit", successDelay: "successDelay", errorDelay: "errorDelay", tabGroup: "tabGroup", deactivationGuard: "deactivationGuard" }, outputs: { submitEvent: "fsForm", invalid: "invalid", valid: "valid", submitted: "submitted", reseted: "reseted", cleared: "cleared" }, host: { properties: { "class.fs-form": "this.fsFormClass" } }, queries: [{ propertyName: "_tabGroups", predicate: MatTabGroup, descendants: true }], exportAs: ["fsForm"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDirective, deps: [{ token: NgForm }, { token: FsForm }, { token: i0.ElementRef }, { token: i2$2.FsMessage }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: FsFormGroupDirective, optional: true }, { token: MatDialogRef, optional: true }, { token: DrawerRef, optional: true }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDirective, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDirective, decorators: [{
             type: Directive,
@@ -860,20 +910,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     selector: '[fsForm]',
                     exportAs: 'fsForm',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.NgForm, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.NgForm, decorators: [{
                     type: Inject,
                     args: [NgForm]
-                }] }, { type: FsForm }, { type: i0.ElementRef }, { type: i2$1.FsMessage }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.MatDialogRef, decorators: [{
+                }] }, { type: FsForm }, { type: i0.ElementRef }, { type: i2$2.FsMessage }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: FsFormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i1.MatDialogRef, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MatDialogRef]
-                }] }, { type: i6.DrawerRef, decorators: [{
+                }] }, { type: i7.DrawerRef, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [DrawerRef]
-                }] }, { type: i2.ActivatedRoute }], propDecorators: { wrapperSelector: [{
+                }] }, { type: i2$1.ActivatedRoute }], propDecorators: { wrapperSelector: [{
                 type: Input
             }], messageSelector: [{
                 type: Input
@@ -893,8 +945,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], confirmBrowser: [{
                 type: Input
-            }], confirmTabs: [{
-                type: Input
             }], dirtySubmitButton: [{
                 type: Input
             }], submit: [{
@@ -903,8 +953,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], errorDelay: [{
                 type: Input
-            }], tabGroup: [{
-                type: Input
             }], deactivationGuard: [{
                 type: Input
             }], submitEvent: [{
@@ -923,9 +971,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }], fsFormClass: [{
                 type: HostBinding,
                 args: ['class.fs-form']
-            }], _tabGroups: [{
-                type: ContentChildren,
-                args: [MatTabGroup, { descendants: true }]
             }] } });
 
 class FsFormDialogCloseDirective {
@@ -941,7 +986,7 @@ class FsFormDialogCloseDirective {
     closeClick() {
         if (this._form) {
             this._form.triggerConfirm()
-                .pipe(filter((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
+                .pipe(filter$1((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
                 .subscribe(() => {
                 this._dialogRef.close(this.closeData);
             });
@@ -977,42 +1022,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsButtonDirective {
-    _matButton;
-    _form;
-    _elementRef;
-    _cdRef;
     name;
     dirtySubmit = true;
-    form;
     transitionStyle = null;
-    active = false;
     submit = false;
     _previousDisabled = false;
     _destroy$ = new Subject();
-    constructor(_matButton, _form, _elementRef, _cdRef) {
-        this._matButton = _matButton;
-        this._form = _form;
-        this._elementRef = _elementRef;
-        this._cdRef = _cdRef;
-    }
+    _formGroup = inject(FsFormGroupDirective, { optional: true });
+    _form = inject(FsFormDirective, { optional: true });
+    _matButton = inject(MatButton, { optional: true, host: true });
+    _elementRef = inject(ElementRef);
+    _cdRef = inject(ChangeDetectorRef);
+    _formBase;
     ngOnInit() {
         this.submit = this._elementRef.nativeElement.getAttribute('type') === 'submit';
-        this.form = this.form || this._form;
-        if (this.form) {
-            this.form.addButton(this);
+        this._formBase = this._form || this._formGroup;
+        if (this._formBase) {
+            this._formBase.addButton(this);
             if (this.submit) {
                 fromEvent(this.element, 'click')
                     .pipe(takeUntil(this._destroy$))
                     .subscribe(() => {
-                    this.active = true;
+                    this._formBase.activeSubmitButton = this;
+                    this._formBase.triggerSubmit();
                 });
-                if (this.dirtySubmit) {
-                    if (this.form.dirtySubmitButton) {
-                        if (!this.form.ngForm.dirty) {
-                            this.disable();
-                        }
-                    }
-                }
                 this.transitionStyle = 'none';
                 setTimeout(() => {
                     this.transitionStyle = null;
@@ -1021,7 +1054,7 @@ class FsButtonDirective {
         }
     }
     disable() {
-        if (this._matButton && !this.active) {
+        if (this._matButton && !this._formBase.activeSubmitButton) {
             this._previousDisabled = this._matButton.disabled;
             this._matButton.disabled = true;
             this._matButton.disableRipple = true;
@@ -1056,16 +1089,12 @@ class FsButtonDirective {
     setClass(cls) {
         const svg = this._getSvg(cls);
         this._resetClass();
-        this._disableShadowAnimation();
-        this.element.classList.add(`submit-${cls}`);
+        this.element.classList.add(`fs-form-submit-button-${cls}`);
         this.element.append(svg);
     }
     get element() {
         return this._elementRef.nativeElement;
     }
-    resetActive() {
-        this.active = false;
-    }
     reset() {
         if (!this._previousDisabled) {
             this.enable();
@@ -1082,14 +1111,11 @@ class FsButtonDirective {
     ngOnDestroy() {
         this._destroy$.next(null);
         this._destroy$.complete();
-        this.form?.removeButton(this);
-    }
-    _disableShadowAnimation() {
-        // .mat-elevation-z2 removes the click shadow animation
-        //this.element.classList.add('mat-elevation-z2');
+        this._formBase?.removeButton(this);
     }
     _resetClass() {
-        this.element.classList.remove('submit-success', 'submit-error', 'submit-process', 'mat-elevation-z2');
+        this.element.classList
+            .remove('fs-form-submit-button-success', 'fs-form-submit-button-error', 'fs-form-submit-button-process');
     }
     _getSvg(type) {
         if (type === 'success') {
@@ -1116,26 +1142,18 @@ class FsButtonDirective {
             return new DOMParser().parseFromString('<svg class="svg-icon svg-icon-error" xmlns="http://www.w3.org/2000/svg" width="38px" height="38px" viewBox="0 0 16 16"><g><path d="M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z" data-original="#444444" data-old_color="#444444"/><path d="M12.2 10.8l-2.8-2.8 2.8-2.8-1.4-1.4-2.8 2.8-2.8-2.8-1.4 1.4 2.8 2.8-2.8 2.8 1.4 1.4 2.8-2.8 2.8 2.8z"/></g> </svg>', 'text/xml').firstChild;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsButtonDirective, deps: [{ token: i1$1.MatButton, host: true, optional: true }, { token: FsFormDirective, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: { name: "name", dirtySubmit: "dirtySubmit", form: "form" }, host: { properties: { "style.transition": "this.transitionStyle" } }, ngImport: i0 });
+    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, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsButtonDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])',
+                    selector: '[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.MatButton, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }, { type: FsFormDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+        }], propDecorators: { name: [{
                 type: Input
             }], dirtySubmit: [{
                 type: Input
-            }], form: [{
-                type: Input
             }], transitionStyle: [{
                 type: HostBinding,
                 args: ['style.transition']
@@ -1159,7 +1177,7 @@ class FsFormDialogActionsComponent {
     ngOnInit() {
         if (this._form) {
             this._form.ngForm.valueChanges
-                .pipe(filter(() => (!this.dirty)), takeUntil(this._destroy$))
+                .pipe(filter$1(() => (!this.dirty)), takeUntil(this._destroy$))
                 .subscribe(() => {
                 this.dirty = this._form.ngForm.dirty;
                 this._cdRef.markForCheck();
@@ -1183,7 +1201,7 @@ class FsFormDialogActionsComponent {
         this._destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogActionsComponent, deps: [{ token: FsFormDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", done: "done", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div class=\"form-buttons\" [ngClass]=\"{ 'save-create': save || create }\">\n  <ng-container *ngIf=\"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=\"close-button cancel-button\"\n        [disabled]=\"close && !dirty && !create\"\n        [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"done\">\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"null\">\n      Done\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"save || create\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <ng-container *ngIf=\"!(save || create)\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.form-buttons.save-create .close-button:not(.cancel-button){float:right}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: ["closeData"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", done: "done", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div class=\"form-buttons\" [ngClass]=\"{ 'save-create': save || create }\">\n  <ng-container *ngIf=\"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=\"close-button cancel-button\"\n        [disabled]=\"close && !dirty && !create\"\n        [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"done\">\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"null\">\n      Done\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"save || create\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <ng-container *ngIf=\"!(save || create)\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.form-buttons.save-create .close-button:not(.cancel-button){float:right}\n"], dependencies: [{ kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: ["closeData"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogActionsComponent, decorators: [{
             type: Component,
@@ -1250,7 +1268,7 @@ class FsFormTemplateOutletComponent {
     }
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFormTemplateOutletComponent, selector: "fs-form-template-outlet", inputs: { formTemplate: "formTemplate" }, queries: [{ propertyName: "models", predicate: NgModel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n{{formTemplate.templateRef|json}}\n\n<ng-container *ngIf=\"formTemplate\">\n  <ng-container [ngTemplateOutlet]=\"formTemplate.templateRef\"></ng-container> \n</ng-container>", dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$2.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFormTemplateOutletComponent, selector: "fs-form-template-outlet", inputs: { formTemplate: "formTemplate" }, queries: [{ propertyName: "models", predicate: NgModel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n{{formTemplate.templateRef|json}}\n\n<ng-container *ngIf=\"formTemplate\">\n  <ng-container [ngTemplateOutlet]=\"formTemplate.templateRef\"></ng-container> \n</ng-container>", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$3.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateOutletComponent, decorators: [{
             type: Component,
@@ -1262,35 +1280,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: [NgModel, { descendants: true }]
             }] } });
 
-class FsFormTemplateDirective {
-    constructor() { }
-    models;
-    ngAfterContentInit() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormTemplateDirective, selector: "[fsFormTemplate]", viewQueries: [{ propertyName: "models", predicate: NgModel, descendants: true }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormTemplate]',
-                }]
-        }], ctorParameters: () => [], propDecorators: { models: [{
-                type: ViewChildren,
-                args: [NgModel]
-            }] } });
-
-class FsSubmitButtonDirective extends FsButtonDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsSubmitButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsSubmitButtonDirective, selector: "dummy-selector", usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsSubmitButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'dummy-selector',
-                }]
-        }] });
-
 const ERROR_MESSAGES = {
     required: 'This field is required',
     email: 'This is not a valid email address',
@@ -1538,7 +1527,7 @@ class FsControlDirective {
         }
         control.updateValueAndValidity();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: VALIDATE_MESSAGES, self: true }, { token: i1$2.NgControl, optional: true }, { token: FsFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: VALIDATE_MESSAGES, self: true }, { token: i1$1.NgControl, optional: true }, { token: FsFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsControlDirective, selector: "[fsFormControl]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", appendMessageClass: "appendMessageClass", appendLabelClass: "appendLabelClass", appendErrorClass: "appendErrorClass", appendHintClass: "appendHintClass", validateMessages: "validateMessages" }, providers: [
             VALIDATE_MESSAGE_PROVIDER,
         ], ngImport: i0 });
@@ -1556,7 +1545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 }, {
                     type: Inject,
                     args: [VALIDATE_MESSAGES]
-                }] }, { type: i1$2.NgControl, decorators: [{
+                }] }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }] }, { type: FsFormDirective, decorators: [{
                     type: Optional
@@ -2448,6 +2437,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }] } });
 
+class FsFormTemplateDirective {
+    constructor() { }
+    models;
+    ngAfterContentInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormTemplateDirective, selector: "[fsFormTemplate]", viewQueries: [{ propertyName: "models", predicate: NgModel, descendants: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormTemplate]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { models: [{
+                type: ViewChildren,
+                args: [NgModel]
+            }] } });
+
+class FsSubmitButtonDirective extends FsButtonDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsSubmitButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsSubmitButtonDirective, selector: "dummy-selector", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsSubmitButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dummy-selector',
+                }]
+        }] });
+
 class FsFormModule {
     static forRoot() {
         /**
@@ -2492,7 +2510,7 @@ class FsFormModule {
             FsFormTemplateComponent,
             FsFormTemplateDirective,
             FsFormTemplateOutletComponent,
-            ConfirmUnsavedComponent], imports: [CommonModule,
+            FsFormGroupDirective], imports: [CommonModule,
             FormsModule,
             MatButtonModule,
             MatDialogModule,
@@ -2526,7 +2544,8 @@ class FsFormModule {
             FsSubmitButtonDirective,
             FsFormTemplateComponent,
             FsFormTemplateDirective,
-            FsFormTemplateOutletComponent] });
+            FsFormTemplateOutletComponent,
+            FsFormGroupDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormModule, providers: [
             {
                 provide: ErrorStateMatcher,
@@ -2581,7 +2600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFormTemplateComponent,
                         FsFormTemplateDirective,
                         FsFormTemplateOutletComponent,
-                        ConfirmUnsavedComponent,
+                        FsFormGroupDirective,
                     ],
                     exports: [
                         FsFormDirective,
@@ -2614,6 +2633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFormTemplateComponent,
                         FsFormTemplateDirective,
                         FsFormTemplateOutletComponent,
+                        FsFormGroupDirective,
                     ],
                     providers: [
                         {
@@ -2630,5 +2650,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, FsFormIntegerDirective, FsFormLesserDirective, FsFormLesserEqualDirective, FsFormMaxDirective, FsFormMaxLengthDirective, FsFormMinDirective, FsFormMinLengthDirective, FsFormModule, FsFormNoFsValidatorsDirective, FsFormNumericDirective, FsFormPatternDirective, FsFormPhoneDirective, FsFormRequiredDirective, FsFormTemplateComponent, FsFormTemplateDirective, FsFormTemplateOutletComponent, FsFormUrlDirective, FsFormValidateDirective, FsSubmitButtonDirective, FsValidators };
+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, FsFormTemplateComponent, FsFormTemplateDirective, FsFormTemplateOutletComponent, FsFormUrlDirective, FsFormValidateDirective, FsSubmitButtonDirective, FsValidators };
 //# sourceMappingURL=firestitch-form.mjs.map