@firestitch/form 18.0.23 → 18.0.25

package/fesm2022/firestitch-form.mjs

@@ -1,41 +1,32 @@
-import * as i2$3 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Inject, inject, Injectable, NgZone, ChangeDetectorRef, QueryList, Directive, Input, ContentChildren, EventEmitter, Optional, Output, HostBinding, HostListener, ElementRef, InjectionToken, Self, ViewContainerRef, Injector, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { UntypedFormGroup, NgForm, Validators, NgModel, FormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/button';
+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 { UntypedFormGroup, NgForm, NgControl, Validators, NgModel, FormsModule } from '@angular/forms';
 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, MatDialogModule, MatDialog, MatDialogRef } 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 * as i2$1 from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { guid, email, isEmpty, isNumeric, phone, url } from '@firestitch/common';
-import * as i7 from '@firestitch/drawer';
 import { DrawerRef } from '@firestitch/drawer';
-import * as i2$2 from '@firestitch/message';
-import { MessageMode } from '@firestitch/message';
+import { FsMessage, MessageMode } from '@firestitch/message';
 import { MatTabGroup } from '@angular/material/tabs';
 import { values, keys, isObject } from 'lodash-es';
 import { isValid } from 'date-fns';
 
 class ConfirmUnsavedComponent {
-    _data;
-    _dialogRef;
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
     saveLabel;
     discardLabel;
     cancelLabel;
     message;
     title;
     _destroy$ = new Subject();
-    constructor(_data, _dialogRef) {
-        this._data = _data;
-        this._dialogRef = _dialogRef;
-    }
     ngOnInit() {
         this.saveLabel = this._data.saveLabel;
         this.discardLabel = this._data.discardLabel;
@@ -56,7 +47,7 @@ class ConfirmUnsavedComponent {
         this._destroy$.next(null);
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfirmUnsavedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     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: [{
@@ -66,10 +57,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         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]
-                }] }, { type: i1.MatDialogRef }] });
+        }] });
 
 var ConfirmResult;
 (function (ConfirmResult) {
@@ -188,12 +176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class FormDeactivateGuard {
-    _form;
-    _route;
-    constructor(_form, _route) {
-        this._form = _form;
-        this._route = _route;
-    }
+    _form = inject(FsForm);
+    _route = inject(ActivatedRoute);
     canDeactivate() {
         const route = getActiveRoute(this._route);
         if (!route) {
@@ -211,7 +195,7 @@ class FormDeactivateGuard {
             return confirmResultContinue(result);
         }));
     }
-    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FormDeactivateGuard, deps: [], 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: [{
@@ -219,7 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: FsForm }, { type: i2$1.ActivatedRoute }] });
+        }] });
 
 function getFormErrors(control, key) {
     let errors = null;
@@ -366,25 +350,26 @@ class FsFormGroupDirective extends FsFormBaseDirective {
         this._formDirective = null;
     }
     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]", exportAs: ["fsFormGroup"], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormGroupDirective, isStandalone: true, selector: "[fsFormGroup]", 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',
+                    standalone: true,
                 }]
         }] });
 
 class FsFormDirective extends FsFormBaseDirective {
-    ngForm;
-    _form;
-    _element;
-    _message;
-    _formGroup;
-    _dialogRef;
-    _drawerRef;
-    _route;
+    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';
@@ -418,17 +403,6 @@ class FsFormDirective extends FsFormBaseDirective {
     _activatedRouteConfig;
     _status$ = new BehaviorSubject(FormStatus.Valid);
     _submit$ = null;
-    constructor(ngForm, _form, _element, _message, _formGroup, _dialogRef, _drawerRef, _route) {
-        super();
-        this.ngForm = ngForm;
-        this._form = _form;
-        this._element = _element;
-        this._message = _message;
-        this._formGroup = _formGroup;
-        this._dialogRef = _dialogRef;
-        this._drawerRef = _drawerRef;
-        this._route = _route;
-    }
     get submitting() {
         return this._status$.getValue() === FormStatus.Submitting;
     }
@@ -922,31 +896,17 @@ class FsFormDirective extends FsFormBaseDirective {
         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$2.FsMessage }, { 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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsForm]',
                     exportAs: 'fsForm',
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$1.NgForm, decorators: [{
-                    type: Inject,
-                    args: [NgForm]
-                }] }, { type: FsForm }, { type: i0.ElementRef }, { type: i2$2.FsMessage }, { type: FsFormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i1.MatDialogRef, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MatDialogRef]
-                }] }, { type: i7.DrawerRef, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DrawerRef]
-                }] }, { type: i2$1.ActivatedRoute }], propDecorators: { wrapperSelector: [{
+        }], propDecorators: { wrapperSelector: [{
                 type: Input
             }], messageSelector: [{
                 type: Input
@@ -994,54 +954,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['class.fs-form']
             }] } });
 
-class FsFormDialogCloseDirective {
-    _form;
-    _dialogRef;
-    closeData;
-    type = 'button';
-    _destroy$ = new Subject();
-    constructor(_form, _dialogRef) {
-        this._form = _form;
-        this._dialogRef = _dialogRef;
-    }
-    closeClick() {
-        if (this._form) {
-            this._form.triggerConfirm()
-                .pipe(filter((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this._dialogRef.close(this.closeData);
-            });
-        }
-        else {
-            this._dialogRef.close(this.closeData);
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogCloseDirective, deps: [{ token: FsFormDirective, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: { closeData: "closeData" }, host: { listeners: { "click": "closeClick($event.target)" }, properties: { "attr.type": "this.type" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormDialogClose],[fs-form-dialog-close]',
-                }]
-        }], ctorParameters: () => [{ type: FsFormDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i1.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { closeData: [{
-                type: Input
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }], closeClick: [{
-                type: HostListener,
-                args: ['click', ['$event.target']]
-            }] } });
-
 class FsButtonDirective {
     name;
     dirtySubmit = true;
@@ -1063,7 +975,8 @@ class FsButtonDirective {
             if (this.submit) {
                 fromEvent(this.element, 'click')
                     .pipe(takeUntil(this._destroy$))
-                    .subscribe(() => {
+                    .subscribe((event) => {
+                    event.preventDefault();
                     this._formBase.activeSubmitButton = this;
                     this._formBase.triggerSubmit();
                 });
@@ -1164,12 +1077,13 @@ class FsButtonDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: { name: "name", dirtySubmit: "dirtySubmit" }, host: { properties: { "style.transition": "this.transitionStyle" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsButtonDirective, isStandalone: true, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: { name: "name", dirtySubmit: "dirtySubmit" }, 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],[mat-button],[mat-flat-button],[mat-stroked-button]',
+                    standalone: true,
                 }]
         }], propDecorators: { name: [{
                 type: Input
@@ -1180,9 +1094,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['style.transition']
             }] } });
 
+class FsFormDialogCloseDirective {
+    _form = inject(FsFormDirective, { optional: true });
+    _dialogRef = inject(MatDialogRef, { optional: true });
+    closeData;
+    type = 'button';
+    _destroy$ = new Subject();
+    closeClick() {
+        if (this._form) {
+            this._form.triggerConfirm()
+                .pipe(filter((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._dialogRef.close(this.closeData);
+            });
+        }
+        else {
+            this._dialogRef.close(this.closeData);
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next(null);
+        this._destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDialogCloseDirective, isStandalone: true, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: { closeData: "closeData" }, host: { listeners: { "click": "closeClick($event.target)" }, properties: { "attr.type": "this.type" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormDialogClose],[fs-form-dialog-close]',
+                    standalone: true,
+                }]
+        }], propDecorators: { closeData: [{
+                type: Input
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], closeClick: [{
+                type: HostListener,
+                args: ['click', ['$event.target']]
+            }] } });
+
 class FsFormDialogActionsComponent {
-    _form;
-    _cdRef;
+    _form = inject(FsFormDirective, { optional: true });
+    _cdRef = inject(ChangeDetectorRef);
     save = true;
     create = false;
     close = false;
@@ -1191,10 +1146,6 @@ class FsFormDialogActionsComponent {
     name;
     dirty = false;
     _destroy$ = new Subject();
-    constructor(_form, _cdRef) {
-        this._form = _form;
-        this._cdRef = _cdRef;
-    }
     ngOnInit() {
         if (this._form) {
             this._form.ngForm.valueChanges
@@ -1221,15 +1172,20 @@ class FsFormDialogActionsComponent {
         this._destroy$.next(null);
         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\n    class=\"form-buttons\"\n    [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=\"cancel-button\"\n        [disabled]=\"close && !dirty && !create\"\n        [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  </ng-container>\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  <ng-container *ngIf=\"save || create\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\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  <ng-container *ngIf=\"!(save || create)\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\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: 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsFormDialogActionsComponent, isStandalone: true, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", done: "done", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div\n  class=\"form-buttons\"\n  [ngClass]=\"{ 'save-create': save || create }\">\n  @if (save || create) {\n    <button\n      mat-button\n      type=\"submit\"\n      color=\"primary\"\n      [name]=\"name\">\n      {{ create ? 'Create' : 'Save' }}\n    </button>\n    <button\n      mat-button\n      type=\"button\"\n      class=\"cancel-button\"\n      [disabled]=\"close && !dirty && !create\"\n      [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  }\n  @if (done) {\n    <button\n      mat-button\n      type=\"button\"\n      color=\"primary\"\n      [mat-dialog-close]=\"null\">\n      Done\n    </button>\n  }\n  @if (save || create) {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  }\n  @if (close) {\n    <button\n      mat-button\n      type=\"button\"\n      class=\"close-button\"\n      fsFormDialogClose\n      [closeData]=\"closeData\"\n      [color]=\"dirty ? 'basic' : 'primary'\">\n      Close\n    </button>\n  }\n  @if (!(save || create)) {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  }\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{width:100%}.form-buttons.save-create .close-button{float:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: ["closeData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDialogActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-form-dialog-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"form-buttons\"\n    [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=\"cancel-button\"\n        [disabled]=\"close && !dirty && !create\"\n        [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  </ng-container>\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  <ng-container *ngIf=\"save || create\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\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  <ng-container *ngIf=\"!(save || create)\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\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"] }]
-        }], ctorParameters: () => [{ type: FsFormDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { save: [{
+            args: [{ selector: 'fs-form-dialog-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgClass,
+                        MatButton,
+                        FsButtonDirective,
+                        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"] }]
+        }], propDecorators: { save: [{
                 type: Input
             }], create: [{
                 type: Input
@@ -1275,20 +1231,13 @@ function messageProviderFactory() {
 }
 
 class FsControlDirective {
-    _elementRef;
-    _renderer2;
-    _injector;
-    _validateMessages;
-    _ngControl;
-    _formDirective;
     wrapperSelector;
     messageSelector;
     hintSelector;
     labelSelector;
-    appendMessageClass = 'fs-form-message';
-    appendLabelClass = 'fs-form-label';
-    appendErrorClass = 'fs-form-error';
-    appendHintClass = 'fs-form-hint';
+    appendMessageClass;
+    appendErrorClass;
+    appendHintClass;
     set validateMessages(messages) {
         this._validateMessages = {
             ...this._validateMessages,
@@ -1297,14 +1246,15 @@ class FsControlDirective {
     }
     errors = [];
     _control;
+    _elementRef = inject(ElementRef);
+    _renderer2 = inject(Renderer2);
+    _injector = inject(Injector);
+    _validateMessages = inject(VALIDATE_MESSAGES, { self: true });
+    _ngControl = inject(NgControl, { optional: true });
+    _formDirective = inject(FsFormDirective, { optional: true });
     _destroy$ = new Subject();
-    constructor(_elementRef, _renderer2, _injector, _validateMessages, _ngControl, _formDirective) {
-        this._elementRef = _elementRef;
-        this._renderer2 = _renderer2;
-        this._injector = _injector;
-        this._validateMessages = _validateMessages;
-        this._ngControl = _ngControl;
-        this._formDirective = _formDirective;
+    constructor() {
+        const _ngControl = this._ngControl;
         if (_ngControl) {
             this._control = _ngControl.control;
         }
@@ -1333,6 +1283,9 @@ class FsControlDirective {
             return this._formDirective.messageSelector;
         }
     }
+    getHintWrapper() {
+        return this._elementRef.nativeElement.querySelector(this.getHintWrapperSelector());
+    }
     getHintWrapperSelector() {
         if (this.hintSelector === false) {
             return '';
@@ -1405,6 +1358,7 @@ class FsControlDirective {
                 return console
                     .warn(`Failed to locate ${this.getMessageSelector()}`, this._elementRef.nativeElement);
             }
+            renderer.addClass(messageWrapper, 'fs-form-message');
             if (this.appendMessageClass) {
                 renderer.addClass(messageWrapper, this.appendMessageClass);
             }
@@ -1415,17 +1369,23 @@ class FsControlDirective {
     _renderHint(error, messageWrapper) {
         const hints = [
             ...messageWrapper.querySelectorAll('.mat-mdc-form-field-hint'),
-            ...messageWrapper.querySelectorAll(this.getHintWrapperSelector()),
         ];
+        const hintWrapper = this.getHintWrapper();
+        if (hintWrapper) {
+            hintWrapper.classList.add('fs-form-hint-wrapper');
+        }
         hints.forEach((hint) => {
             this._renderer2.setStyle(hint, 'display', error ? 'none' : 'block');
             if (this.appendHintClass) {
-                this._renderer2.addClass(hint, this.appendHintClass);
+                this._renderer2.addClass(hint, 'fs-form-hint');
+                if (this.appendHintClass) {
+                    this._renderer2.addClass(hint, this.appendHintClass);
+                }
             }
         });
     }
     _renderError(wrapper, messageWrapper, error) {
-        let errorWrapper = wrapper.querySelector('.fs-form-error-target');
+        let errorWrapper = wrapper.querySelector('.fs-form-error');
         if (errorWrapper) {
             errorWrapper.remove();
         }
@@ -1433,12 +1393,18 @@ class FsControlDirective {
             return;
         }
         errorWrapper = this._renderer2.createElement('div');
-        this._renderer2.addClass(errorWrapper, 'fs-form-error-target');
-        this._renderer2.addClass(errorWrapper, this.appendErrorClass);
-        this._renderer2.addClass(errorWrapper, `${this.appendErrorClass}-${error.name}`);
+        this._renderer2.addClass(errorWrapper, 'fs-form-error');
+        this._renderer2.addClass(errorWrapper, `fs-form-error-${error.name}`);
+        if (this.appendErrorClass) {
+            this._renderer2.addClass(errorWrapper, this.appendErrorClass);
+            this._renderer2.addClass(errorWrapper, `${this.appendErrorClass}-${error.name}`);
+        }
         const errorText = this._renderer2.createText(error.message);
         this._renderer2.appendChild(errorWrapper, errorText);
-        messageWrapper?.prepend(errorWrapper);
+        const hintWrapper = messageWrapper.querySelector(this.getHintWrapperSelector());
+        if (hintWrapper) {
+            hintWrapper.prepend(errorWrapper);
+        }
     }
     _subscribeToStatusChagnes() {
         if (this._control) {
@@ -1490,8 +1456,8 @@ 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$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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsControlDirective, isStandalone: true, selector: "[fsFormControl]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", appendMessageClass: "appendMessageClass", appendErrorClass: "appendErrorClass", appendHintClass: "appendHintClass", validateMessages: "validateMessages" }, providers: [
             VALIDATE_MESSAGE_PROVIDER,
         ], ngImport: i0 });
 }
@@ -1502,20 +1468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER,
                     ],
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [VALIDATE_MESSAGES]
-                }] }, { type: i1$1.NgControl, decorators: [{
-                    type: Optional
-                }] }, { type: FsFormDirective, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FsFormDirective]
-                }] }], propDecorators: { wrapperSelector: [{
+        }], ctorParameters: () => [], propDecorators: { wrapperSelector: [{
                 type: Input
             }], messageSelector: [{
                 type: Input
@@ -1525,8 +1480,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], appendMessageClass: [{
                 type: Input
-            }], appendLabelClass: [{
-                type: Input
             }], appendErrorClass: [{
                 type: Input
             }], appendHintClass: [{
@@ -1560,7 +1513,7 @@ class FsFormCompareDirective extends FsControlDirective {
         }, false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormCompareDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormCompareDirective, selector: "[fsFormCompare]", inputs: { fsFormCompare: "fsFormCompare", validationMessage: ["fsFormCompareMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormCompareDirective, isStandalone: true, selector: "[fsFormCompare]", inputs: { fsFormCompare: "fsFormCompare", validationMessage: ["fsFormCompareMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER,
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1571,6 +1524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER,
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormCompare: [{
                 type: Input
@@ -1688,7 +1642,7 @@ class FsFormDateRangeDirective extends FsControlDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormDateRangeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDateRangeDirective, selector: "[fsFormDateRange]", inputs: { fsFormDateRange: "fsFormDateRange", validationMessage: ["fsFormDateRangeMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormDateRangeDirective, isStandalone: true, selector: "[fsFormDateRange]", inputs: { fsFormDateRange: "fsFormDateRange", validationMessage: ["fsFormDateRangeMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1699,6 +1653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormDateRange: [{
                 type: Input
@@ -1724,7 +1679,7 @@ class FsFormEmailDirective extends FsControlDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormEmailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormEmailDirective, selector: "[fsFormEmail]", inputs: { fsFormEmail: "fsFormEmail", validationMessage: ["fsFormEmailMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormEmailDirective, isStandalone: true, selector: "[fsFormEmail]", inputs: { fsFormEmail: "fsFormEmail", validationMessage: ["fsFormEmailMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1735,6 +1690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormEmail: [{
                 type: Input
@@ -1760,7 +1716,7 @@ class FsFormEmailsDirective extends FsControlDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormEmailsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormEmailsDirective, selector: "[fsFormEmails]", inputs: { fsFormEmails: "fsFormEmails", validationMessage: ["fsFormEmailsMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormEmailsDirective, isStandalone: true, selector: "[fsFormEmails]", inputs: { fsFormEmails: "fsFormEmails", validationMessage: ["fsFormEmailsMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1771,6 +1727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormEmails: [{
                 type: Input
@@ -1793,7 +1750,7 @@ class FsFormFunctionDirective extends FsControlDirective {
         return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormFunctionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormFunctionDirective, selector: "[fsFormFunction]", inputs: { fsFormFunction: "fsFormFunction", fsFormFunctionData: "fsFormFunctionData", validateOnSubmit: "validateOnSubmit" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormFunctionDirective, isStandalone: true, selector: "[fsFormFunction]", inputs: { fsFormFunction: "fsFormFunction", fsFormFunctionData: "fsFormFunctionData", validateOnSubmit: "validateOnSubmit" }, providers: [
             VALIDATE_MESSAGE_PROVIDER,
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1804,6 +1761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER,
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormFunction: [{
                 type: Input
@@ -1830,7 +1788,7 @@ class FsFormGreaterEqualDirective extends FsControlDirective {
         return FsValidators.numeric(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormGreaterEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormGreaterEqualDirective, selector: "[fsFormGreaterEqual]", inputs: { fsFormGreaterEqual: "fsFormGreaterEqual", validationMessage: ["fsFormGreaterEqualMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormGreaterEqualDirective, isStandalone: true, selector: "[fsFormGreaterEqual]", inputs: { fsFormGreaterEqual: "fsFormGreaterEqual", validationMessage: ["fsFormGreaterEqualMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1841,6 +1799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormGreaterEqual: [{
                 type: Input
@@ -1866,7 +1825,7 @@ class FsFormGreaterDirective extends FsControlDirective {
         return FsValidators.numeric(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormGreaterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormGreaterDirective, selector: "[fsFormGreater]", inputs: { fsFormGreater: "fsFormGreater", validationMessage: ["fsFormGreaterMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormGreaterDirective, isStandalone: true, selector: "[fsFormGreater]", inputs: { fsFormGreater: "fsFormGreater", validationMessage: ["fsFormGreaterMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1877,6 +1836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormGreater: [{
                 type: Input
@@ -1900,7 +1860,7 @@ class FsFormIntegerDirective extends FsControlDirective {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormIntegerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormIntegerDirective, selector: "[fsFormInteger]", inputs: { fsFormInteger: "fsFormInteger", validationMessage: ["fsFormIntegerMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormIntegerDirective, isStandalone: true, selector: "[fsFormInteger]", inputs: { fsFormInteger: "fsFormInteger", validationMessage: ["fsFormIntegerMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER,
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1911,6 +1871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER,
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormInteger: [{
                 type: Input
@@ -1936,7 +1897,7 @@ class FsFormLesserEqualDirective extends FsControlDirective {
         return FsValidators.numeric(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormLesserEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormLesserEqualDirective, selector: "[fsFormLesserEqual]", inputs: { fsFormLesserEqual: "fsFormLesserEqual", validationMessage: ["fsFormLesserEqualMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormLesserEqualDirective, isStandalone: true, selector: "[fsFormLesserEqual]", inputs: { fsFormLesserEqual: "fsFormLesserEqual", validationMessage: ["fsFormLesserEqualMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1947,6 +1908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormLesserEqual: [{
                 type: Input
@@ -1972,7 +1934,7 @@ class FsFormLesserDirective extends FsControlDirective {
         return FsValidators.numeric(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormLesserDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormLesserDirective, selector: "[fsFormLesser]", inputs: { fsFormLesser: "fsFormLesser", validationMessage: ["fsFormLesserMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormLesserDirective, isStandalone: true, selector: "[fsFormLesser]", inputs: { fsFormLesser: "fsFormLesser", validationMessage: ["fsFormLesserMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -1983,6 +1945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormLesser: [{
                 type: Input
@@ -2003,7 +1966,7 @@ class FsFormMaxDirective extends FsControlDirective {
         return FsValidators.numeric(this._control) || Validators.max(this.fsFormMax)(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormMaxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormMaxDirective, selector: "[fsFormMax]", inputs: { fsFormMax: "fsFormMax", validationMessage: ["fsFormMaxMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormMaxDirective, isStandalone: true, selector: "[fsFormMax]", inputs: { fsFormMax: "fsFormMax", validationMessage: ["fsFormMaxMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2014,6 +1977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormMax: [{
                 type: Input
@@ -2034,7 +1998,7 @@ class FsFormMaxLengthDirective extends FsControlDirective {
         return Validators.maxLength(this.fsFormMaxLength)(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormMaxLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormMaxLengthDirective, selector: "[fsFormMaxLength]", inputs: { fsFormMaxLength: "fsFormMaxLength", validationMessage: ["fsFormMaxLengthMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormMaxLengthDirective, isStandalone: true, selector: "[fsFormMaxLength]", inputs: { fsFormMaxLength: "fsFormMaxLength", validationMessage: ["fsFormMaxLengthMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2045,6 +2009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormMaxLength: [{
                 type: Input
@@ -2065,7 +2030,7 @@ class FsFormMinDirective extends FsControlDirective {
         return FsValidators.numeric(this._control) || Validators.min(parseFloat(this.fsFormMin))(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormMinDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormMinDirective, selector: "[fsFormMin]", inputs: { fsFormMin: "fsFormMin", validationMessage: ["fsFormMinMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormMinDirective, isStandalone: true, selector: "[fsFormMin]", inputs: { fsFormMin: "fsFormMin", validationMessage: ["fsFormMinMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2076,6 +2041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormMin: [{
                 type: Input
@@ -2096,7 +2062,7 @@ class FsFormMinLengthDirective extends FsControlDirective {
         return Validators.minLength(this.fsFormMinLength)(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormMinLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormMinLengthDirective, selector: "[fsFormMinLength]", inputs: { fsFormMinLength: "fsFormMinLength", validationMessage: ["fsFormMinLengthMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormMinLengthDirective, isStandalone: true, selector: "[fsFormMinLength]", inputs: { fsFormMinLength: "fsFormMinLength", validationMessage: ["fsFormMinLengthMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2107,6 +2073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormMinLength: [{
                 type: Input
@@ -2130,7 +2097,7 @@ class FsFormNoFsValidatorsDirective extends FsControlDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormNoFsValidatorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])", providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormNoFsValidatorsDirective, isStandalone: true, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])", providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2161,6 +2128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }] });
 
@@ -2181,7 +2149,7 @@ class FsFormNumericDirective extends FsControlDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormNumericDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormNumericDirective, selector: "[fsFormNumeric]", inputs: { fsFormNumeric: "fsFormNumeric", validationMessage: ["fsFormNumericMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormNumericDirective, isStandalone: true, selector: "[fsFormNumeric]", inputs: { fsFormNumeric: "fsFormNumeric", validationMessage: ["fsFormNumericMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2192,6 +2160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormNumeric: [{
                 type: Input
@@ -2212,7 +2181,7 @@ class FsFormPatternDirective extends FsControlDirective {
         return Validators.pattern(this.fsFormPattern)(this._control);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormPatternDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormPatternDirective, selector: "[fsFormPattern]", inputs: { fsFormPattern: "fsFormPattern", validationMessage: ["fsFormPatternMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormPatternDirective, isStandalone: true, selector: "[fsFormPattern]", inputs: { fsFormPattern: "fsFormPattern", validationMessage: ["fsFormPatternMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2223,6 +2192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormPattern: [{
                 type: Input
@@ -2248,7 +2218,7 @@ class FsFormPhoneDirective extends FsControlDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormPhoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormPhoneDirective, selector: "[fsFormPhone]", inputs: { fsFormPhone: "fsFormPhone", validationMessage: ["fsFormPhoneMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormPhoneDirective, isStandalone: true, selector: "[fsFormPhone]", inputs: { fsFormPhone: "fsFormPhone", validationMessage: ["fsFormPhoneMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2259,6 +2229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormPhone: [{
                 type: Input
@@ -2304,7 +2275,7 @@ class FsFormRequiredDirective extends FsControlDirective {
         super.render();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormRequiredDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: { setFsFormRequired: ["fsFormRequired", "setFsFormRequired"], setRequired: ["required", "setRequired"], validationMessage: ["fsFormRequiredMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormRequiredDirective, isStandalone: true, selector: "[fsFormRequired],[ngModel][required]", inputs: { setFsFormRequired: ["fsFormRequired", "setFsFormRequired"], setRequired: ["required", "setRequired"], validationMessage: ["fsFormRequiredMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER,
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2315,6 +2286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER,
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { setFsFormRequired: [{
                 type: Input,
@@ -2343,7 +2315,7 @@ class FsFormUrlDirective extends FsControlDirective {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormUrlDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormUrlDirective, selector: "[fsFormUrl]", inputs: { fsFormUrl: "fsFormUrl", fsFormUrlProtocol: "fsFormUrlProtocol", validationMessage: ["fsFormUrlMessage", "validationMessage"] }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormUrlDirective, isStandalone: true, selector: "[fsFormUrl]", inputs: { fsFormUrl: "fsFormUrl", fsFormUrlProtocol: "fsFormUrlProtocol", validationMessage: ["fsFormUrlMessage", "validationMessage"] }, providers: [
             VALIDATE_MESSAGE_PROVIDER,
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2354,6 +2326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER,
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { fsFormUrl: [{
                 type: Input
@@ -2378,7 +2351,7 @@ class FsFormValidateDirective extends FsControlDirective {
         return FsValidators.func(this._control, this.validateFn, this.validateFnData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormValidateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormValidateDirective, selector: "[validate]", inputs: { validateFn: ["validate", "validateFn"], validateFnData: ["validateData", "validateFnData"], validateOnSubmit: "validateOnSubmit" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormValidateDirective, isStandalone: true, selector: "[validate]", inputs: { validateFn: ["validate", "validateFn"], validateFnData: ["validateData", "validateFnData"], validateOnSubmit: "validateOnSubmit" }, providers: [
             VALIDATE_MESSAGE_PROVIDER,
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
@@ -2389,6 +2362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     providers: [
                         VALIDATE_MESSAGE_PROVIDER,
                     ],
+                    standalone: true,
                 }]
         }], propDecorators: { validateFn: [{
                 type: Input,
@@ -2409,12 +2383,13 @@ class FsFormTemplateDirective {
         });
     }
     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],fs-form-template", queries: [{ propertyName: "_projectedControls", predicate: NgModel }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormTemplateDirective, isStandalone: true, selector: "[fsFormTemplate],fs-form-template", queries: [{ propertyName: "_projectedControls", predicate: NgModel }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormTemplate],fs-form-template',
+                    standalone: true,
                 }]
         }], propDecorators: { _projectedControls: [{
                 type: ContentChildren,
@@ -2423,12 +2398,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 
 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsSubmitButtonDirective, isStandalone: true, 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',
+                    standalone: true,
                 }]
         }] });
 
@@ -2443,12 +2419,13 @@ class FsFormTemplateOutletDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormTemplateOutletDirective, selector: "[fsFormTemplateOutlet]", inputs: { template: "template", context: "context" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormTemplateOutletDirective, isStandalone: true, selector: "[fsFormTemplateOutlet]", inputs: { template: "template", context: "context" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormTemplateOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormTemplateOutlet]',
+                    standalone: true,
                 }]
         }], propDecorators: { template: [{
                 type: Input
@@ -2470,7 +2447,13 @@ class FsFormModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsFormModule, declarations: [FsFormDirective,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsFormModule, imports: [CommonModule,
+            FormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatDialogModule,
+            FsDialogModule,
+            FsFormDirective,
             FsControlDirective,
             FsFormRequiredDirective,
             FsFormMinDirective,
@@ -2500,12 +2483,7 @@ class FsFormModule {
             FsFormTemplateDirective,
             FsFormTemplateDirective,
             FsFormTemplateOutletDirective,
-            FsFormGroupDirective], imports: [CommonModule,
-            FormsModule,
-            MatButtonModule,
-            MatDialogModule,
-            MatDialogModule,
-            FsDialogModule], exports: [FsFormDirective,
+            FsFormGroupDirective], exports: [FsFormDirective,
             FsControlDirective,
             FsFormRequiredDirective,
             FsFormMinDirective,
@@ -2546,7 +2524,8 @@ class FsFormModule {
             MatButtonModule,
             MatDialogModule,
             MatDialogModule,
-            FsDialogModule] });
+            FsDialogModule,
+            FsFormDialogActionsComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormModule, decorators: [{
             type: NgModule,
@@ -2558,8 +2537,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatDialogModule,
                         MatDialogModule,
                         FsDialogModule,
-                    ],
-                    declarations: [
                         FsFormDirective,
                         FsControlDirective,
                         FsFormRequiredDirective,