@firestitch/form 15.0.0 → 17.0.0

package/{fesm2020 → fesm2022}/firestitch-form.mjs

@@ -24,10 +24,17 @@ import { values, keys, isObject } from 'lodash-es';
 import { isValid } from 'date-fns';
 
 class ConfirmUnsavedComponent {
+    _data;
+    _dialogRef;
+    saveLabel;
+    discardLabel;
+    cancelLabel;
+    message;
+    title;
+    _destroy$ = new Subject();
     constructor(_data, _dialogRef) {
         this._data = _data;
         this._dialogRef = _dialogRef;
-        this._destroy$ = new Subject();
     }
     ngOnInit() {
         this.saveLabel = this._data.saveLabel;
@@ -46,19 +53,19 @@ class ConfirmUnsavedComponent {
         this._dialogRef.close(null);
     }
     ngOnDestroy() {
-        this._destroy$.next();
+        this._destroy$.next(null);
         this._destroy$.complete();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", 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", "dock", "dockable", "fullscreenPercent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-ConfirmUnsavedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfirmUnsavedComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmUnsavedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfirmUnsavedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }]; } });
+                }] }, { type: i1.MatDialogRef }] });
 
 var ConfirmResult;
 (function (ConfirmResult) {
@@ -93,10 +100,12 @@ var FormStatus;
 })(FormStatus || (FormStatus = {}));
 
 class FsForm {
+    _dialog;
+    // value is array for future possibilities of extension
+    _formDirectiveStore = new WeakMap();
+    _eventBus;
     constructor(_dialog) {
         this._dialog = _dialog;
-        // value is array for future possibilities of extension
-        this._formDirectiveStore = new WeakMap();
         this._eventBus = new Subject();
     }
     // @deprecated
@@ -166,17 +175,19 @@ class FsForm {
             }
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsForm, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsForm, providedIn: 'root' });
 }
-FsForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsForm, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-FsForm.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsForm, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsForm, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
+        }], ctorParameters: () => [{ type: i1.MatDialog }] });
 
 class FormDeactivateGuard {
+    _form;
+    _route;
     constructor(_form, _route) {
         this._form = _form;
         this._route = _route;
@@ -198,15 +209,15 @@ class FormDeactivateGuard {
             return confirmResultContinue(result);
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormDeactivateGuard, deps: [{ token: FsForm }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormDeactivateGuard, providedIn: 'root' });
 }
-FormDeactivateGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormDeactivateGuard, deps: [{ token: FsForm }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
-FormDeactivateGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormDeactivateGuard, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormDeactivateGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormDeactivateGuard, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: FsForm }, { type: i2.ActivatedRoute }]; } });
+        }], ctorParameters: () => [{ type: FsForm }, { type: i2.ActivatedRoute }] });
 
 function getFormErrors(control, key) {
     let errors = null;
@@ -233,12 +244,55 @@ function getFormErrors(control, key) {
 }
 
 class FsFormDirective {
+    ngForm;
+    _form;
+    _element;
+    _message;
+    _ngZone;
+    _cdRef;
+    _dialogRef;
+    _drawerRef;
+    _route;
+    wrapperSelector = '.fs-form-wrapper,.mat-form-field';
+    messageSelector = '.fs-form-message,.mat-form-field-subscript-wrapper';
+    hintSelector = '.fs-form-hint,.mat-form-field-hint-wrapper';
+    labelSelector = '.fs-form-label,.mat-form-field-label';
+    autocomplete = false;
+    shortcuts = true; // Ctrl + s
+    confirm = true;
+    confirmDialog = true;
+    confirmDrawer = true;
+    confirmBrowser = true;
+    confirmTabs = true;
+    dirtySubmitButton = true;
     set submit(submit$) {
         this._submit$ = submit$;
     }
     get submit() {
         return this._submit$;
     }
+    successDelay = 0;
+    errorDelay = 1000;
+    tabGroup;
+    deactivationGuard = true;
+    submitEvent = new EventEmitter();
+    invalid = new EventEmitter();
+    valid = new EventEmitter();
+    submitted = new EventEmitter();
+    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) {
         this.ngForm = ngForm;
         this._form = _form;
@@ -249,36 +303,6 @@ class FsFormDirective {
         this._dialogRef = _dialogRef;
         this._drawerRef = _drawerRef;
         this._route = _route;
-        this.wrapperSelector = '.fs-form-wrapper,.mat-form-field';
-        this.messageSelector = '.fs-form-message,.mat-form-field-subscript-wrapper';
-        this.hintSelector = '.fs-form-hint,.mat-form-field-hint-wrapper';
-        this.labelSelector = '.fs-form-label,.mat-form-field-label';
-        this.autocomplete = false;
-        this.shortcuts = true; // Ctrl + s
-        this.confirm = true;
-        this.confirmDialog = true;
-        this.confirmDrawer = true;
-        this.confirmBrowser = true;
-        this.confirmTabs = true;
-        this.dirtySubmitButton = true;
-        this.successDelay = 0;
-        this.errorDelay = 1000;
-        this.deactivationGuard = true;
-        this.submitEvent = new EventEmitter();
-        this.invalid = new EventEmitter();
-        this.valid = new EventEmitter();
-        this.submitted = new EventEmitter();
-        this.reseted = new EventEmitter();
-        this.cleared = new EventEmitter();
-        this.fsFormClass = true;
-        this._tabGroups = new QueryList();
-        this._buttons = new QueryList();
-        this._dialogBackdropEscape = false;
-        this._snapshot = {};
-        this._status$ = new BehaviorSubject(FormStatus.Valid);
-        this._destroy$ = new Subject();
-        this._confirmed = false;
-        this._submit$ = null;
     }
     get submitting() {
         return this._status$.getValue() === FormStatus.Submitting;
@@ -369,7 +393,7 @@ class FsFormDirective {
     }
     ngOnDestroy() {
         this._cleanupCanDeactivate();
-        this._destroy$.next();
+        this._destroy$.next(null);
         this._destroy$.complete();
     }
     createSnapshot() {
@@ -512,7 +536,7 @@ class FsFormDirective {
                     event.preventDefault();
                     if (this.shortcuts) {
                         if (this._elementInForm(document.activeElement)) {
-                            this.ngForm.ngSubmit.next();
+                            this.ngForm.ngSubmit.next(null);
                         }
                     }
                 }
@@ -630,7 +654,7 @@ class FsFormDirective {
                         .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this._destroy$))
                         .subscribe((status) => {
                         if (status === FormStatus.Success) {
-                            subscriber.next();
+                            subscriber.next(null);
                             subscriber.complete();
                         }
                         else {
@@ -639,7 +663,7 @@ class FsFormDirective {
                     });
                 }
                 else {
-                    subscriber.next();
+                    subscriber.next(null);
                     subscriber.complete();
                 }
             });
@@ -652,12 +676,13 @@ class FsFormDirective {
                 return iif(() => this.confirm && this.confirmDrawer, this.triggerConfirm()
                     .pipe(map((result) => confirmResultContinue(result)), tap((result) => {
                     if (result) {
-                        subscriber.next();
+                        subscriber.next(null);
                         subscriber.complete();
                     }
                 })), defer(() => {
-                    subscriber.next();
+                    subscriber.next(null);
                     subscriber.complete();
+                    return of(null);
                 }));
             }), takeUntil(this._destroy$))
                 .subscribe();
@@ -820,16 +845,16 @@ class FsFormDirective {
         this._activatedRouteConfig.canDeactivate.splice(guardIndex, 1);
         this._form.removeFormDirective(this._activatedRouteConfig.component);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", 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 });
 }
-FsFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-FsFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsForm]',
                     exportAs: 'fsForm',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.NgForm, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.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: [{
@@ -842,7 +867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }, {
                     type: Inject,
                     args: [DrawerRef]
-                }] }, { type: i2.ActivatedRoute }]; }, propDecorators: { wrapperSelector: [{
+                }] }, { type: i2.ActivatedRoute }], propDecorators: { wrapperSelector: [{
                 type: Input
             }], messageSelector: [{
                 type: Input
@@ -898,11 +923,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormDialogCloseDirective {
+    _form;
+    _dialogRef;
+    closeData;
+    type = 'button';
+    _destroy$ = new Subject();
     constructor(_form, _dialogRef) {
         this._form = _form;
         this._dialogRef = _dialogRef;
-        this.type = 'button';
-        this._destroy$ = new Subject();
     }
     closeClick() {
         if (this._form) {
@@ -917,22 +945,22 @@ class FsFormDialogCloseDirective {
         }
     }
     ngOnDestroy() {
-        this._destroy$.next();
+        this._destroy$.next(null);
         this._destroy$.complete();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: { closeData: "closeData" }, host: { listeners: { "click": "closeClick($event.target)" }, properties: { "attr.type": "this.type" } }, ngImport: i0 });
 }
-FsFormDialogCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormDialogCloseDirective, deps: [{ token: FsFormDirective, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FsFormDialogCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: FsFormDialogCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormDialogCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormDialogClose],[fs-form-dialog-close]',
                 }]
-        }], ctorParameters: function () { return [{ type: FsFormDirective, decorators: [{
+        }], ctorParameters: () => [{ type: FsFormDirective, decorators: [{
                     type: Optional
                 }] }, { type: i1.MatDialogRef, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { closeData: [{
+                }] }], propDecorators: { closeData: [{
                 type: Input
             }], type: [{
                 type: HostBinding,
@@ -943,17 +971,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 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;
-        this.dirtySubmit = true;
-        this.transitionStyle = null;
-        this.active = false;
-        this.submit = false;
-        this._previousDisabled = false;
-        this._destroy$ = new Subject();
     }
     ngOnInit() {
         this.submit = this._elementRef.nativeElement.getAttribute('type') === 'submit';
@@ -1039,7 +1073,7 @@ class FsButtonDirective {
         this._resetClass();
     }
     ngOnDestroy() {
-        this._destroy$.next();
+        this._destroy$.next(null);
         this._destroy$.complete();
         this.form?.removeButton(this);
     }
@@ -1075,21 +1109,21 @@ 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: "17.3.12", 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: "17.3.12", 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 });
 }
-FsButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-FsButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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])',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatButton, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.MatButton, decorators: [{
                     type: Optional
                 }, {
                     type: Host
                 }] }, { type: FsFormDirective, decorators: [{
                     type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], dirtySubmit: [{
                 type: Input
@@ -1101,17 +1135,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormDialogActionsComponent {
+    _form;
+    _dialogRef;
+    _cdRef;
+    save = true;
+    create = false;
+    close = false;
+    done = false;
+    closeData = null;
+    name;
+    dirty = false;
+    _destroy$ = new Subject();
     constructor(_form, _dialogRef, _cdRef) {
         this._form = _form;
         this._dialogRef = _dialogRef;
         this._cdRef = _cdRef;
-        this.save = true;
-        this.create = false;
-        this.close = false;
-        this.done = false;
-        this.closeData = null;
-        this.dirty = false;
-        this._destroy$ = new Subject();
     }
     ngOnInit() {
         if (this._form) {
@@ -1136,20 +1174,20 @@ class FsFormDialogActionsComponent {
         }
     }
     ngOnDestroy() {
-        this._destroy$.next();
+        this._destroy$.next(null);
         this._destroy$.complete();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormDialogActionsComponent, deps: [{ token: FsFormDirective, optional: true }, { token: i1.MatDialogRef, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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 });
 }
-FsFormDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormDialogActionsComponent, deps: [{ token: FsFormDirective, optional: true }, { token: i1.MatDialogRef, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsFormDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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]  ", inputs: ["disabled", "disableRipple", "color"], 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormDialogActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormDialogActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-form-dialog-actions', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: function () { return [{ type: FsFormDirective, decorators: [{
+        }], ctorParameters: () => [{ type: FsFormDirective, decorators: [{
                     type: Optional
                 }] }, { type: i1.MatDialogRef, decorators: [{
                     type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { save: [{
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { save: [{
                 type: Input
             }], create: [{
                 type: Input
@@ -1164,6 +1202,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormTemplateComponent {
+    templateRef;
+    formTemplate;
+    models;
     ngAfterContentInit() {
         debugger;
         const x = this.models;
@@ -1175,13 +1216,13 @@ class FsFormTemplateComponent {
         debugger;
     }
     constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FsFormTemplateComponent, selector: "fs-form-template", inputs: { formTemplate: "formTemplate" }, queries: [{ propertyName: "models", predicate: NgModel, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef1"], descendants: true }], ngImport: i0, template: "<ng-template #templateRef1>\n  <ng-content></ng-content>\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-FsFormTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsFormTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FsFormTemplateComponent, selector: "fs-form-template", inputs: { formTemplate: "formTemplate" }, queries: [{ propertyName: "models", predicate: NgModel, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef1"], descendants: true }], ngImport: i0, template: "<ng-template #templateRef1>\n  <ng-content></ng-content>\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-form-template', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #templateRef1>\n  <ng-content></ng-content>\n</ng-template>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { templateRef: [{
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: ['templateRef1']
             }], formTemplate: [{
@@ -1192,6 +1233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormTemplateOutletComponent {
+    formTemplate;
+    models;
     ngOnChanges(changes) {
         if (changes.formTemplate?.currentValue) {
         }
@@ -1203,13 +1246,13 @@ class FsFormTemplateOutletComponent {
         // });
     }
     constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormTemplateOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-FsFormTemplateOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormTemplateOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsFormTemplateOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormTemplateOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormTemplateOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-form-template-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n{{formTemplate.templateRef|json}}\n\n<ng-container *ngIf=\"formTemplate\">\n  <ng-container [ngTemplateOutlet]=\"formTemplate.templateRef\"></ng-container> \n</ng-container>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { formTemplate: [{
+        }], ctorParameters: () => [], propDecorators: { formTemplate: [{
                 type: Input
             }], models: [{
                 type: ContentChildren,
@@ -1218,26 +1261,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 class FsFormTemplateDirective {
     constructor() { }
+    models;
     ngAfterContentInit() {
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormTemplateDirective, selector: "[fsFormTemplate]", viewQueries: [{ propertyName: "models", predicate: NgModel, descendants: true }], ngImport: i0 });
 }
-FsFormTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FsFormTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormTemplateDirective, selector: "[fsFormTemplate]", viewQueries: [{ propertyName: "models", predicate: NgModel, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormTemplate]',
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { models: [{
+        }], ctorParameters: () => [], propDecorators: { models: [{
                 type: ViewChildren,
                 args: [NgModel]
             }] } });
 
 class FsSubmitButtonDirective extends FsButtonDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsSubmitButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsSubmitButtonDirective, selector: "dummy-selector", usesInheritance: true, ngImport: i0 });
 }
-FsSubmitButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsSubmitButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsSubmitButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsSubmitButtonDirective, selector: "dummy-selector", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsSubmitButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsSubmitButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'dummy-selector',
@@ -1276,12 +1320,29 @@ 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';
     set validateMessages(messages) {
         this._validateMessages = {
             ...this._validateMessages,
             ...messages,
         };
     }
+    errors = [];
+    _control;
+    _destroy$ = new Subject();
     constructor(_elementRef, renderer2, injector, _validateMessages, ngControl, formDirective) {
         this._elementRef = _elementRef;
         this.renderer2 = renderer2;
@@ -1289,12 +1350,6 @@ class FsControlDirective {
         this._validateMessages = _validateMessages;
         this.ngControl = ngControl;
         this.formDirective = formDirective;
-        this.appendMessageClass = 'fs-form-message';
-        this.appendLabelClass = 'fs-form-label';
-        this.appendErrorClass = 'fs-form-error';
-        this.appendHintClass = 'fs-form-hint';
-        this.errors = [];
-        this._destroy$ = new Subject();
         if (ngControl) {
             this._control = ngControl.control;
         }
@@ -1306,7 +1361,7 @@ class FsControlDirective {
         this._setupValidators();
     }
     ngOnDestroy() {
-        this._destroy$.next();
+        this._destroy$.next(null);
         this._destroy$.complete();
     }
     ngAfterContentInit() {
@@ -1478,12 +1533,12 @@ class FsControlDirective {
         }
         control.updateValueAndValidity();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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 ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", 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 });
 }
-FsControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-FsControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormControl]',
@@ -1491,7 +1546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         VALIDATE_MESSAGE_PROVIDER,
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: undefined, decorators: [{
                     type: Self
                 }, {
                     type: Inject,
@@ -1503,7 +1558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }, {
                     type: Inject,
                     args: [FsFormDirective]
-                }] }]; }, propDecorators: { wrapperSelector: [{
+                }] }], propDecorators: { wrapperSelector: [{
                 type: Input
             }], messageSelector: [{
                 type: Input
@@ -1524,6 +1579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormCompareDirective extends FsControlDirective {
+    fsFormCompare;
     set validationMessage(value) {
         this._validateMessages.compare = value;
     }
@@ -1546,12 +1602,12 @@ class FsFormCompareDirective extends FsControlDirective {
             this._control.updateValueAndValidity();
         }, false);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormCompareDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormCompareDirective, selector: "[fsFormCompare]", inputs: { fsFormCompare: "fsFormCompare", validationMessage: ["fsFormCompareMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER,
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormCompareDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormCompareDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormCompareDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormCompareDirective, selector: "[fsFormCompare]", inputs: { fsFormCompare: "fsFormCompare", validationMessage: ["fsFormCompareMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER,
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormCompareDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormCompareDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormCompare]',
@@ -1659,6 +1715,7 @@ function isEnabled(value) {
 }
 
 class FsFormDateRangeDirective extends FsControlDirective {
+    fsFormDateRange;
     set validationMessage(value) {
         this._validateMessages.dateRange = value;
     }
@@ -1673,12 +1730,12 @@ class FsFormDateRangeDirective extends FsControlDirective {
             return null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormDateRangeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormDateRangeDirective, selector: "[fsFormDateRange]", inputs: { fsFormDateRange: "fsFormDateRange", validationMessage: ["fsFormDateRangeMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormDateRangeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormDateRangeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormDateRangeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormDateRangeDirective, selector: "[fsFormDateRange]", inputs: { fsFormDateRange: "fsFormDateRange", validationMessage: ["fsFormDateRangeMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormDateRangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormDateRangeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormDateRange]',
@@ -1694,6 +1751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormEmailDirective extends FsControlDirective {
+    fsFormEmail;
     set validationMessage(value) {
         this._validateMessages.email = value;
     }
@@ -1708,12 +1766,12 @@ class FsFormEmailDirective extends FsControlDirective {
             return null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormEmailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormEmailDirective, selector: "[fsFormEmail]", inputs: { fsFormEmail: "fsFormEmail", validationMessage: ["fsFormEmailMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormEmailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormEmailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormEmailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormEmailDirective, selector: "[fsFormEmail]", inputs: { fsFormEmail: "fsFormEmail", validationMessage: ["fsFormEmailMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormEmailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormEmailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormEmail]',
@@ -1729,6 +1787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormEmailsDirective extends FsControlDirective {
+    fsFormEmails;
     set validationMessage(value) {
         this._validateMessages.emails = value;
     }
@@ -1743,12 +1802,12 @@ class FsFormEmailsDirective extends FsControlDirective {
             return null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormEmailsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormEmailsDirective, selector: "[fsFormEmails]", inputs: { fsFormEmails: "fsFormEmails", validationMessage: ["fsFormEmailsMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormEmailsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormEmailsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormEmailsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormEmailsDirective, selector: "[fsFormEmails]", inputs: { fsFormEmails: "fsFormEmails", validationMessage: ["fsFormEmailsMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormEmailsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormEmailsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormEmails]',
@@ -1764,10 +1823,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormFunctionDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.validateOnSubmit = false;
-    }
+    fsFormFunction;
+    fsFormFunctionData;
+    validateOnSubmit = false;
     ngOnChanges() {
         this._control.updateValueAndValidity();
     }
@@ -1777,12 +1835,12 @@ class FsFormFunctionDirective extends FsControlDirective {
         }
         return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormFunctionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormFunctionDirective, selector: "[fsFormFunction]", inputs: { fsFormFunction: "fsFormFunction", fsFormFunctionData: "fsFormFunctionData", validateOnSubmit: "validateOnSubmit" }, providers: [
+            VALIDATE_MESSAGE_PROVIDER,
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormFunctionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormFunctionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormFunctionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormFunctionDirective, selector: "[fsFormFunction]", inputs: { fsFormFunction: "fsFormFunction", fsFormFunctionData: "fsFormFunctionData", validateOnSubmit: "validateOnSubmit" }, providers: [
-        VALIDATE_MESSAGE_PROVIDER,
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormFunctionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormFunctionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormFunction]',
@@ -1799,6 +1857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormGreaterEqualDirective extends FsControlDirective {
+    fsFormGreaterEqual;
     set validationMessage(value) {
         this._validateMessages.greater = value;
     }
@@ -1813,12 +1872,12 @@ class FsFormGreaterEqualDirective extends FsControlDirective {
         }
         return FsValidators.numeric(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormGreaterEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormGreaterEqualDirective, selector: "[fsFormGreaterEqual]", inputs: { fsFormGreaterEqual: "fsFormGreaterEqual", validationMessage: ["fsFormGreaterEqualMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormGreaterEqualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormGreaterEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormGreaterEqualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormGreaterEqualDirective, selector: "[fsFormGreaterEqual]", inputs: { fsFormGreaterEqual: "fsFormGreaterEqual", validationMessage: ["fsFormGreaterEqualMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormGreaterEqualDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormGreaterEqualDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormGreaterEqual]',
@@ -1834,6 +1893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormGreaterDirective extends FsControlDirective {
+    fsFormGreater;
     set validationMessage(value) {
         this._validateMessages.greater = value;
     }
@@ -1848,12 +1908,12 @@ class FsFormGreaterDirective extends FsControlDirective {
         }
         return FsValidators.numeric(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormGreaterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormGreaterDirective, selector: "[fsFormGreater]", inputs: { fsFormGreater: "fsFormGreater", validationMessage: ["fsFormGreaterMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormGreaterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormGreaterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormGreaterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormGreaterDirective, selector: "[fsFormGreater]", inputs: { fsFormGreater: "fsFormGreater", validationMessage: ["fsFormGreaterMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormGreaterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormGreaterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormGreater]',
@@ -1869,6 +1929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormIntegerDirective extends FsControlDirective {
+    fsFormInteger;
     set validationMessage(value) {
         this._validateMessages.integer = value;
     }
@@ -1881,12 +1942,12 @@ class FsFormIntegerDirective extends FsControlDirective {
         }
         return null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormIntegerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormIntegerDirective, selector: "[fsFormInteger]", inputs: { fsFormInteger: "fsFormInteger", validationMessage: ["fsFormIntegerMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER,
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormIntegerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormIntegerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormIntegerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormIntegerDirective, selector: "[fsFormInteger]", inputs: { fsFormInteger: "fsFormInteger", validationMessage: ["fsFormIntegerMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER,
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormIntegerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormIntegerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormInteger]',
@@ -1902,6 +1963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormLesserEqualDirective extends FsControlDirective {
+    fsFormLesserEqual;
     set validationMessage(value) {
         this._validateMessages.lesser = value;
     }
@@ -1916,12 +1978,12 @@ class FsFormLesserEqualDirective extends FsControlDirective {
         }
         return FsValidators.numeric(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormLesserEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormLesserEqualDirective, selector: "[fsFormLesserEqual]", inputs: { fsFormLesserEqual: "fsFormLesserEqual", validationMessage: ["fsFormLesserEqualMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormLesserEqualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormLesserEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormLesserEqualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormLesserEqualDirective, selector: "[fsFormLesserEqual]", inputs: { fsFormLesserEqual: "fsFormLesserEqual", validationMessage: ["fsFormLesserEqualMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormLesserEqualDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormLesserEqualDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormLesserEqual]',
@@ -1937,6 +1999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormLesserDirective extends FsControlDirective {
+    fsFormLesser;
     set validationMessage(value) {
         this._validateMessages.lesser = value;
     }
@@ -1951,12 +2014,12 @@ class FsFormLesserDirective extends FsControlDirective {
         }
         return FsValidators.numeric(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormLesserDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormLesserDirective, selector: "[fsFormLesser]", inputs: { fsFormLesser: "fsFormLesser", validationMessage: ["fsFormLesserMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormLesserDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormLesserDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormLesserDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormLesserDirective, selector: "[fsFormLesser]", inputs: { fsFormLesser: "fsFormLesser", validationMessage: ["fsFormLesserMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormLesserDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormLesserDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormLesser]',
@@ -1972,6 +2035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormMaxDirective extends FsControlDirective {
+    fsFormMax;
     set validationMessage(value) {
         this._validateMessages.max = value;
     }
@@ -1981,12 +2045,12 @@ class FsFormMaxDirective extends FsControlDirective {
     validate(control) {
         return FsValidators.numeric(this._control) || Validators.max(this.fsFormMax)(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormMaxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormMaxDirective, selector: "[fsFormMax]", inputs: { fsFormMax: "fsFormMax", validationMessage: ["fsFormMaxMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormMaxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormMaxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormMaxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormMaxDirective, selector: "[fsFormMax]", inputs: { fsFormMax: "fsFormMax", validationMessage: ["fsFormMaxMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormMaxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormMaxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormMax]',
@@ -2002,6 +2066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormMaxLengthDirective extends FsControlDirective {
+    fsFormMaxLength;
     set validationMessage(value) {
         this._validateMessages.maxlength = value;
     }
@@ -2011,12 +2076,12 @@ class FsFormMaxLengthDirective extends FsControlDirective {
     validate(control) {
         return Validators.maxLength(this.fsFormMaxLength)(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormMaxLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormMaxLengthDirective, selector: "[fsFormMaxLength]", inputs: { fsFormMaxLength: "fsFormMaxLength", validationMessage: ["fsFormMaxLengthMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormMaxLengthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormMaxLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormMaxLengthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormMaxLengthDirective, selector: "[fsFormMaxLength]", inputs: { fsFormMaxLength: "fsFormMaxLength", validationMessage: ["fsFormMaxLengthMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormMaxLengthDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormMaxLengthDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormMaxLength]',
@@ -2032,6 +2097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormMinDirective extends FsControlDirective {
+    fsFormMin;
     set validationMessage(value) {
         this._validateMessages.min = value;
     }
@@ -2041,12 +2107,12 @@ class FsFormMinDirective extends FsControlDirective {
     validate(control) {
         return FsValidators.numeric(this._control) || Validators.min(parseFloat(this.fsFormMin))(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormMinDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormMinDirective, selector: "[fsFormMin]", inputs: { fsFormMin: "fsFormMin", validationMessage: ["fsFormMinMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormMinDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormMinDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormMinDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormMinDirective, selector: "[fsFormMin]", inputs: { fsFormMin: "fsFormMin", validationMessage: ["fsFormMinMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormMinDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormMinDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormMin]',
@@ -2062,6 +2128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormMinLengthDirective extends FsControlDirective {
+    fsFormMinLength;
     set validationMessage(value) {
         this._validateMessages.minlength = value;
     }
@@ -2071,12 +2138,12 @@ class FsFormMinLengthDirective extends FsControlDirective {
     validate(control) {
         return Validators.minLength(this.fsFormMinLength)(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormMinLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormMinLengthDirective, selector: "[fsFormMinLength]", inputs: { fsFormMinLength: "fsFormMinLength", validationMessage: ["fsFormMinLengthMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormMinLengthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormMinLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormMinLengthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormMinLengthDirective, selector: "[fsFormMinLength]", inputs: { fsFormMinLength: "fsFormMinLength", validationMessage: ["fsFormMinLengthMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormMinLengthDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormMinLengthDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormMinLength]',
@@ -2105,12 +2172,12 @@ class FsFormNoFsValidatorsDirective extends FsControlDirective {
             super._subscribeToStatusChagnes();
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormNoFsValidatorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", 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: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormNoFsValidatorsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormNoFsValidatorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormNoFsValidatorsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormNoFsValidatorsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormNoFsValidatorsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel]' +
@@ -2141,6 +2208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 class FsFormNumericDirective extends FsControlDirective {
+    fsFormNumeric;
     set validationMessage(value) {
         this._validateMessages.numeric = value;
     }
@@ -2155,12 +2223,12 @@ class FsFormNumericDirective extends FsControlDirective {
             return null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormNumericDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormNumericDirective, selector: "[fsFormNumeric]", inputs: { fsFormNumeric: "fsFormNumeric", validationMessage: ["fsFormNumericMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormNumericDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormNumericDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormNumericDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormNumericDirective, selector: "[fsFormNumeric]", inputs: { fsFormNumeric: "fsFormNumeric", validationMessage: ["fsFormNumericMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormNumericDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormNumericDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormNumeric]',
@@ -2176,6 +2244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormPatternDirective extends FsControlDirective {
+    fsFormPattern;
     set validationMessage(value) {
         this._validateMessages.pattern = value;
     }
@@ -2185,12 +2254,12 @@ class FsFormPatternDirective extends FsControlDirective {
     validate(control) {
         return Validators.pattern(this.fsFormPattern)(this._control);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormPatternDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormPatternDirective, selector: "[fsFormPattern]", inputs: { fsFormPattern: "fsFormPattern", validationMessage: ["fsFormPatternMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormPatternDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormPatternDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormPatternDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormPatternDirective, selector: "[fsFormPattern]", inputs: { fsFormPattern: "fsFormPattern", validationMessage: ["fsFormPatternMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormPatternDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormPatternDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormPattern]',
@@ -2206,6 +2275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormPhoneDirective extends FsControlDirective {
+    fsFormPhone;
     set validationMessage(value) {
         this._validateMessages.phone = value;
     }
@@ -2220,12 +2290,12 @@ class FsFormPhoneDirective extends FsControlDirective {
             return null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormPhoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormPhoneDirective, selector: "[fsFormPhone]", inputs: { fsFormPhone: "fsFormPhone", validationMessage: ["fsFormPhoneMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormPhoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormPhoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormPhoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormPhoneDirective, selector: "[fsFormPhone]", inputs: { fsFormPhone: "fsFormPhone", validationMessage: ["fsFormPhoneMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormPhoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormPhoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormPhone]',
@@ -2241,10 +2311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormRequiredDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.required = false;
-    }
+    required = false;
     set setFsFormRequired(value) {
         this.required = isEnabled(value);
     }
@@ -2279,12 +2346,12 @@ class FsFormRequiredDirective extends FsControlDirective {
         }
         super.render();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormRequiredDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: { setFsFormRequired: ["fsFormRequired", "setFsFormRequired"], setRequired: ["required", "setRequired"], validationMessage: ["fsFormRequiredMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER,
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormRequiredDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormRequiredDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormRequiredDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: { setFsFormRequired: ["fsFormRequired", "setFsFormRequired"], setRequired: ["required", "setRequired"], validationMessage: ["fsFormRequiredMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER,
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormRequiredDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormRequiredDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormRequired],[ngModel][required]',
@@ -2304,10 +2371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormUrlDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.fsFormUrlProtocol = true;
-    }
+    fsFormUrl;
+    fsFormUrlProtocol = true;
     set validationMessage(value) {
         this._validateMessages.url = value;
     }
@@ -2320,12 +2385,12 @@ class FsFormUrlDirective extends FsControlDirective {
         }
         return null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormUrlDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormUrlDirective, selector: "[fsFormUrl]", inputs: { fsFormUrl: "fsFormUrl", fsFormUrlProtocol: "fsFormUrlProtocol", validationMessage: ["fsFormUrlMessage", "validationMessage"] }, providers: [
+            VALIDATE_MESSAGE_PROVIDER,
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormUrlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormUrlDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormUrlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormUrlDirective, selector: "[fsFormUrl]", inputs: { fsFormUrl: "fsFormUrl", fsFormUrlProtocol: "fsFormUrlProtocol", validationMessage: ["fsFormUrlMessage", "validationMessage"] }, providers: [
-        VALIDATE_MESSAGE_PROVIDER,
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormUrlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormUrlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsFormUrl]',
@@ -2343,10 +2408,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsFormValidateDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.validateOnSubmit = false;
-    }
+    validateFn;
+    validateFnData;
+    validateOnSubmit = false;
     ngOnChanges() {
         this._control.updateValueAndValidity();
     }
@@ -2356,12 +2420,12 @@ class FsFormValidateDirective extends FsControlDirective {
         }
         return FsValidators.func(this._control, this.validateFn, this.validateFnData);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormValidateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FsFormValidateDirective, selector: "[validate]", inputs: { validateFn: ["validate", "validateFn"], validateFnData: ["validateData", "validateFnData"], validateOnSubmit: "validateOnSubmit" }, providers: [
+            VALIDATE_MESSAGE_PROVIDER
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-FsFormValidateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormValidateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormValidateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsFormValidateDirective, selector: "[validate]", inputs: { validateFn: ["validate", "validateFn"], validateFnData: ["validateData", "validateFnData"], validateOnSubmit: "validateOnSubmit" }, providers: [
-        VALIDATE_MESSAGE_PROVIDER
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormValidateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormValidateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[validate]',
@@ -2392,85 +2456,85 @@ class FsFormModule {
             ngModule: FsFormModule,
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FsFormModule, declarations: [FsFormDirective,
+            FsControlDirective,
+            FsFormRequiredDirective,
+            FsFormMinDirective,
+            FsFormMaxDirective,
+            FsFormMinLengthDirective,
+            FsFormMaxLengthDirective,
+            FsFormEmailDirective,
+            FsFormEmailsDirective,
+            FsFormPhoneDirective,
+            FsFormCompareDirective,
+            FsFormIntegerDirective,
+            FsFormNumericDirective,
+            FsFormPatternDirective,
+            FsFormFunctionDirective,
+            FsFormDateRangeDirective,
+            FsFormGreaterDirective,
+            FsFormGreaterEqualDirective,
+            FsFormLesserDirective,
+            FsFormLesserEqualDirective,
+            FsFormUrlDirective,
+            FsFormDialogCloseDirective,
+            FsFormValidateDirective,
+            FsFormDialogActionsComponent,
+            FsFormNoFsValidatorsDirective,
+            FsButtonDirective,
+            FsSubmitButtonDirective,
+            FsFormTemplateComponent,
+            FsFormTemplateDirective,
+            FsFormTemplateOutletComponent,
+            ConfirmUnsavedComponent], imports: [CommonModule,
+            FormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatDialogModule,
+            FsDialogModule], exports: [FsFormDirective,
+            FsControlDirective,
+            FsFormRequiredDirective,
+            FsFormMinDirective,
+            FsFormMaxDirective,
+            FsFormMinLengthDirective,
+            FsFormMaxLengthDirective,
+            FsFormEmailDirective,
+            FsFormEmailsDirective,
+            FsFormPhoneDirective,
+            FsFormCompareDirective,
+            FsFormIntegerDirective,
+            FsFormNumericDirective,
+            FsFormPatternDirective,
+            FsFormFunctionDirective,
+            FsFormDateRangeDirective,
+            FsFormGreaterDirective,
+            FsFormGreaterEqualDirective,
+            FsFormLesserDirective,
+            FsFormLesserEqualDirective,
+            FsFormUrlDirective,
+            FsFormDialogCloseDirective,
+            FsFormValidateDirective,
+            FsFormDialogActionsComponent,
+            FsFormNoFsValidatorsDirective,
+            FsButtonDirective,
+            FsSubmitButtonDirective,
+            FsFormTemplateComponent,
+            FsFormTemplateDirective,
+            FsFormTemplateOutletComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormModule, providers: [
+            {
+                provide: ErrorStateMatcher,
+                useClass: ShowOnDirtyErrorStateMatcher,
+            },
+        ], imports: [CommonModule,
+            FormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatDialogModule,
+            FsDialogModule] });
 }
-FsFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FsFormModule, declarations: [FsFormDirective,
-        FsControlDirective,
-        FsFormRequiredDirective,
-        FsFormMinDirective,
-        FsFormMaxDirective,
-        FsFormMinLengthDirective,
-        FsFormMaxLengthDirective,
-        FsFormEmailDirective,
-        FsFormEmailsDirective,
-        FsFormPhoneDirective,
-        FsFormCompareDirective,
-        FsFormIntegerDirective,
-        FsFormNumericDirective,
-        FsFormPatternDirective,
-        FsFormFunctionDirective,
-        FsFormDateRangeDirective,
-        FsFormGreaterDirective,
-        FsFormGreaterEqualDirective,
-        FsFormLesserDirective,
-        FsFormLesserEqualDirective,
-        FsFormUrlDirective,
-        FsFormDialogCloseDirective,
-        FsFormValidateDirective,
-        FsFormDialogActionsComponent,
-        FsFormNoFsValidatorsDirective,
-        FsButtonDirective,
-        FsSubmitButtonDirective,
-        FsFormTemplateComponent,
-        FsFormTemplateDirective,
-        FsFormTemplateOutletComponent,
-        ConfirmUnsavedComponent], imports: [CommonModule,
-        FormsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatDialogModule,
-        FsDialogModule], exports: [FsFormDirective,
-        FsControlDirective,
-        FsFormRequiredDirective,
-        FsFormMinDirective,
-        FsFormMaxDirective,
-        FsFormMinLengthDirective,
-        FsFormMaxLengthDirective,
-        FsFormEmailDirective,
-        FsFormEmailsDirective,
-        FsFormPhoneDirective,
-        FsFormCompareDirective,
-        FsFormIntegerDirective,
-        FsFormNumericDirective,
-        FsFormPatternDirective,
-        FsFormFunctionDirective,
-        FsFormDateRangeDirective,
-        FsFormGreaterDirective,
-        FsFormGreaterEqualDirective,
-        FsFormLesserDirective,
-        FsFormLesserEqualDirective,
-        FsFormUrlDirective,
-        FsFormDialogCloseDirective,
-        FsFormValidateDirective,
-        FsFormDialogActionsComponent,
-        FsFormNoFsValidatorsDirective,
-        FsButtonDirective,
-        FsSubmitButtonDirective,
-        FsFormTemplateComponent,
-        FsFormTemplateDirective,
-        FsFormTemplateOutletComponent] });
-FsFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormModule, providers: [
-        {
-            provide: ErrorStateMatcher,
-            useClass: ShowOnDirtyErrorStateMatcher,
-        },
-    ], imports: [CommonModule,
-        FormsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatDialogModule,
-        FsDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FsFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [