@firestitch/form 13.3.7 → 13.3.9

package/fesm2020/firestitch-form.mjs

@@ -23,990 +23,993 @@ import { MessageMode } from '@firestitch/message';
 import { values, keys, isObject } from 'lodash-es';
 import { isValid } from 'date-fns';
 
-class ConfirmUnsavedComponent {
-    constructor(_data, _dialogRef) {
-        this._data = _data;
-        this._dialogRef = _dialogRef;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.saveLabel = this._data.saveLabel;
-        this.discardLabel = this._data.discardLabel;
-        this.cancelLabel = this._data.cancelLabel;
-        this.message = this._data.message;
-        this.title = this._data.title;
-    }
-    save() {
-        this._dialogRef.close('save');
-    }
-    discard() {
-        this._dialogRef.close('discard');
-    }
-    cancel() {
-        this._dialogRef.close(null);
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-}
-ConfirmUnsavedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfirmUnsavedComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmUnsavedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: i1$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class ConfirmUnsavedComponent {
+    constructor(_data, _dialogRef) {
+        this._data = _data;
+        this._dialogRef = _dialogRef;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.saveLabel = this._data.saveLabel;
+        this.discardLabel = this._data.discardLabel;
+        this.cancelLabel = this._data.cancelLabel;
+        this.message = this._data.message;
+        this.title = this._data.title;
+    }
+    save() {
+        this._dialogRef.close('save');
+    }
+    discard() {
+        this._dialogRef.close('discard');
+    }
+    cancel() {
+        this._dialogRef.close(null);
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+ConfirmUnsavedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfirmUnsavedComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmUnsavedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: i1$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }, { type: i1.MatDialogRef }]; } });
 
-var ConfirmResult;
-(function (ConfirmResult) {
-    ConfirmResult["Save"] = "save";
-    ConfirmResult["Discard"] = "discard";
-    ConfirmResult["Review"] = "review";
-    ConfirmResult["Invalid"] = "invalid";
-    ConfirmResult["Pristine"] = "pristine";
+var ConfirmResult;
+(function (ConfirmResult) {
+    ConfirmResult["Save"] = "save";
+    ConfirmResult["Discard"] = "discard";
+    ConfirmResult["Review"] = "review";
+    ConfirmResult["Invalid"] = "invalid";
+    ConfirmResult["Pristine"] = "pristine";
 })(ConfirmResult || (ConfirmResult = {}));
 
-function confirmResultContinue(result) {
-    return result === ConfirmResult.Discard || result === ConfirmResult.Save || result === ConfirmResult.Pristine;
+function confirmResultContinue(result) {
+    return result === ConfirmResult.Discard || result === ConfirmResult.Save || result === ConfirmResult.Pristine;
 }
 
-function getActiveRoute(route) {
-    while (route.firstChild) {
-        route = route.firstChild;
-    }
-    return route;
+function getActiveRoute(route) {
+    while (route.firstChild) {
+        route = route.firstChild;
+    }
+    return route;
 }
 
-var FormStatus;
-(function (FormStatus) {
-    FormStatus["Valid"] = "valid";
-    FormStatus["Invalid"] = "invalid";
-    FormStatus["Validating"] = "validating";
-    FormStatus["Submitting"] = "submitting";
-    FormStatus["Submitted"] = "submitted";
-    FormStatus["Error"] = "error";
-    FormStatus["Success"] = "success";
-    FormStatus["Completing"] = "completing";
+var FormStatus;
+(function (FormStatus) {
+    FormStatus["Valid"] = "valid";
+    FormStatus["Invalid"] = "invalid";
+    FormStatus["Validating"] = "validating";
+    FormStatus["Submitting"] = "submitting";
+    FormStatus["Submitted"] = "submitted";
+    FormStatus["Error"] = "error";
+    FormStatus["Success"] = "success";
+    FormStatus["Completing"] = "completing";
 })(FormStatus || (FormStatus = {}));
 
-class FsForm {
-    constructor(_dialog) {
-        this._dialog = _dialog;
-        // value is array for future possibilities of extension
-        this._formDirectiveStore = new WeakMap();
-        this._eventBus = new Subject();
-    }
-    // @deprecated
-    broadcast(key, data) {
-        this._eventBus.next({ key, data });
-    }
-    // @deprecated
-    on(key) {
-        return this._eventBus.asObservable()
-            .pipe(filter((event) => event.key === key), map((event) => event.data));
-    }
-    registerFormDirective(routeComponent, directive) {
-        const directives = this.getFormDirectives(routeComponent) || [];
-        directives.push(directive);
-        this._formDirectiveStore.set(routeComponent, directives);
-    }
-    getFormDirectives(routeComponent) {
-        return this._formDirectiveStore.get(routeComponent);
-    }
-    removeFormDirective(routeComponent) {
-        this._formDirectiveStore.delete(routeComponent);
-    }
-    confirmUnsaved(directives) {
-        // TODO support for multiple directives per page
-        const form = directives[0];
-        if (!form.confirm || !form.ngForm.dirty) {
-            return of(ConfirmResult.Pristine);
-        }
-        let title = 'You Have Unsaved Changes';
-        let message = 'What would you like to do with your changes?';
-        let saveLabel = 'Save & Continue';
-        let discardLabel = 'Discard Changes & Continue';
-        let cancelLabel = 'Review Changes';
-        if (typeof form.confirm === 'object') {
-            title = form.confirm.title || title;
-            message = form.confirm.message || message;
-            saveLabel = form.confirm.saveLabel || saveLabel;
-            discardLabel = form.confirm.discardLabel || discardLabel;
-            cancelLabel = form.confirm.cancelLabel || cancelLabel;
-        }
-        return this._dialog.open(ConfirmUnsavedComponent, {
-            data: {
-                title,
-                message,
-                saveLabel,
-                discardLabel,
-                cancelLabel,
-            },
-            width: 'auto',
-        })
-            .afterClosed()
-            .pipe(switchMap((result) => {
-            if (!result) {
-                return of(ConfirmResult.Review);
-            }
-            if (result === 'discard') {
-                form.reset();
-                return of(ConfirmResult.Discard);
-            }
-            if (result === 'save') {
-                form.ngForm.control.markAsPristine();
-                form.triggerSubmit({ confirmed: true });
-                return merge(form.submitted
-                    .pipe(first(), mapTo(ConfirmResult.Save)), form.invalid
-                    .pipe(first(), mapTo(ConfirmResult.Invalid)))
-                    .pipe(take(1));
-            }
-        }));
-    }
-}
-FsForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsForm, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-FsForm.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsForm, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsForm, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class FsForm {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+        // value is array for future possibilities of extension
+        this._formDirectiveStore = new WeakMap();
+        this._eventBus = new Subject();
+    }
+    // @deprecated
+    broadcast(key, data) {
+        this._eventBus.next({ key, data });
+    }
+    // @deprecated
+    on(key) {
+        return this._eventBus.asObservable()
+            .pipe(filter((event) => event.key === key), map((event) => event.data));
+    }
+    registerFormDirective(routeComponent, directive) {
+        const directives = this.getFormDirectives(routeComponent) || [];
+        directives.push(directive);
+        this._formDirectiveStore.set(routeComponent, directives);
+    }
+    getFormDirectives(routeComponent) {
+        return this._formDirectiveStore.get(routeComponent);
+    }
+    removeFormDirective(routeComponent) {
+        this._formDirectiveStore.delete(routeComponent);
+    }
+    confirmUnsaved(directives) {
+        // TODO support for multiple directives per page
+        const form = directives[0];
+        if (!form.confirm || !form.ngForm.dirty) {
+            return of(ConfirmResult.Pristine);
+        }
+        let title = 'You Have Unsaved Changes';
+        let message = 'What would you like to do with your changes?';
+        let saveLabel = 'Save & Continue';
+        let discardLabel = 'Discard Changes & Continue';
+        let cancelLabel = 'Review Changes';
+        if (typeof form.confirm === 'object') {
+            title = form.confirm.title || title;
+            message = form.confirm.message || message;
+            saveLabel = form.confirm.saveLabel || saveLabel;
+            discardLabel = form.confirm.discardLabel || discardLabel;
+            cancelLabel = form.confirm.cancelLabel || cancelLabel;
+        }
+        return this._dialog.open(ConfirmUnsavedComponent, {
+            data: {
+                title,
+                message,
+                saveLabel,
+                discardLabel,
+                cancelLabel,
+            },
+            width: 'auto',
+        })
+            .afterClosed()
+            .pipe(switchMap((result) => {
+            if (!result) {
+                return of(ConfirmResult.Review);
+            }
+            if (result === 'discard') {
+                form.reset();
+                return of(ConfirmResult.Discard);
+            }
+            if (result === 'save') {
+                form.ngForm.control.markAsPristine();
+                form.triggerSubmit({ confirmed: true });
+                return merge(form.submitted
+                    .pipe(first(), mapTo(ConfirmResult.Save)), form.invalid
+                    .pipe(first(), mapTo(ConfirmResult.Invalid)))
+                    .pipe(take(1));
+            }
+        }));
+    }
+}
+FsForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsForm, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+FsForm.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsForm, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsForm, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
 
-class FormDeactivateGuard {
-    constructor(_form, _route) {
-        this._form = _form;
-        this._route = _route;
-    }
-    canDeactivate() {
-        const route = getActiveRoute(this._route);
-        if (!route) {
-            console.error('Can not find route for FormDeactivateGuard checks');
-            return of(true);
-        }
-        const directives = this._form
-            .getFormDirectives(route.routeConfig.component);
-        if (!Array.isArray(directives) || directives.length === 0) {
-            console.error('Can not find a valid FsFormDirective');
-            return of(true);
-        }
-        return this._form.confirmUnsaved(directives)
-            .pipe(map((result) => {
-            return confirmResultContinue(result);
-        }));
-    }
-}
-FormDeactivateGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormDeactivateGuard, deps: [{ token: FsForm }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
-FormDeactivateGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormDeactivateGuard, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormDeactivateGuard, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class FormDeactivateGuard {
+    constructor(_form, _route) {
+        this._form = _form;
+        this._route = _route;
+    }
+    canDeactivate() {
+        const route = getActiveRoute(this._route);
+        if (!route) {
+            console.error('Can not find route for FormDeactivateGuard checks');
+            return of(true);
+        }
+        const directives = this._form
+            .getFormDirectives(route.routeConfig.component);
+        if (!Array.isArray(directives) || directives.length === 0) {
+            console.error('Can not find a valid FsFormDirective');
+            return of(true);
+        }
+        return this._form.confirmUnsaved(directives)
+            .pipe(map((result) => {
+            return confirmResultContinue(result);
+        }));
+    }
+}
+FormDeactivateGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormDeactivateGuard, deps: [{ token: FsForm }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+FormDeactivateGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormDeactivateGuard, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormDeactivateGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return [{ type: FsForm }, { type: i2$1.ActivatedRoute }]; } });
 
-function getFormErrors(control, key) {
-    let errors = null;
-    if (control.invalid && control.errors) {
-        errors = {
-            [key]: { ...control.errors },
-        };
-    }
-    if (control instanceof FormGroup) {
-        Object.entries(control.controls)
-            .forEach(([name, childControl]) => {
-            const childErrors = getFormErrors(childControl, name);
-            if (childErrors) {
-                if (!errors) {
-                    errors = { ...childErrors };
-                }
-                else {
-                    Object.assign(errors, childErrors);
-                }
-            }
-        });
-    }
-    return errors;
+function getFormErrors(control, key) {
+    let errors = null;
+    if (control.invalid && control.errors) {
+        errors = {
+            [key]: { ...control.errors },
+        };
+    }
+    if (control instanceof FormGroup) {
+        Object.entries(control.controls)
+            .forEach(([name, childControl]) => {
+            const childErrors = getFormErrors(childControl, name);
+            if (childErrors) {
+                if (!errors) {
+                    errors = { ...childErrors };
+                }
+                else {
+                    Object.assign(errors, childErrors);
+                }
+            }
+        });
+    }
+    return errors;
 }
 
-class FsFormDirective {
-    constructor(ngForm, _form, _element, _message, _ngZone, _cdRef, _dialogRef, _drawerRef, _route) {
-        this.ngForm = ngForm;
-        this._form = _form;
-        this._element = _element;
-        this._message = _message;
-        this._ngZone = _ngZone;
-        this._cdRef = _cdRef;
-        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;
-    }
-    set submit(submit$) {
-        this._submit$ = submit$;
-    }
-    get submit() {
-        return this._submit$;
-    }
-    get submitting() {
-        return this._status$.getValue() === FormStatus.Submitting;
-    }
-    get validating() {
-        return this._status$.getValue() === FormStatus.Validating;
-    }
-    get completing() {
-        return this._status$.getValue() === FormStatus.Completing;
-    }
-    get _submitEvent() {
-        return {
-            ngForm: this.ngForm,
-            submitter: this._submitter,
-        };
-    }
-    get _formValidState$() {
-        this._form.broadcast('valid', this._submitEvent);
-        this.submitEvent.emit(this._submitEvent);
-        this.valid.emit(this._submitEvent);
-        const submittedEvent = {
-            ngForm: this.ngForm,
-            submitter: this._submitter,
-            response: null,
-        };
-        const submit$ = this._submit$ ?
-            this._submit$(this._submitEvent) : of(submittedEvent);
-        return submit$
-            .pipe(map((response) => {
-            submittedEvent.response = response;
-            return submittedEvent;
-        }), takeUntil(this._destroy$));
-    }
-    get _formInvalidState$() {
-        this._form.broadcast('invalid', this._submitEvent);
-        if (this.invalid) {
-            this.invalid.emit(this._submitEvent);
-        }
-        const message = 'Please review errors highlighted in red';
-        this._message.error(message, { mode: MessageMode.Toast });
-        const el = this._element.nativeElement.querySelector('.ng-invalid');
-        if (el) {
-            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        }
-        return throwError('Form validation error');
-    }
-    get _submitter() {
-        return this._activeSubmitButton
-            ? this._activeSubmitButton.name
-            : null;
-    }
-    ngOnInit() {
-        if (this.deactivationGuard) {
-            this._registerCanDeactivateGuard();
-        }
-        this._registerConfirmDialogBackdropEscape();
-        this._listenHotKeys();
-        this._listenWindowClose();
-        this._listenSubmit();
-        this._listenFormStatus();
-        if (!this.autocomplete) {
-            this._registerAutocomplete();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.confirm) {
-            this._updateDirtySubmitButtons();
-        }
-    }
-    clearSubmit() {
-        this._submit$ = null;
-        setTimeout(() => {
-            this._cdRef.markForCheck();
-        });
-    }
-    registerSubmit(submit$) {
-        this._submit$ = submit$;
-        setTimeout(() => {
-            this._cdRef.markForCheck();
-        });
-    }
-    ngAfterContentInit() {
-        this._registerConfirm();
-        this._registerConfirmDrawerClose();
-        this._registerConfirmTabs();
-        this._registerDrawerClose();
-        this._registerDirtySubmitButton();
-    }
-    ngOnDestroy() {
-        this._cleanupCanDeactivate();
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    createSnapshot() {
-        this._snapshot = this.ngForm.value;
-    }
-    getSnapshot() {
-        return this._snapshot || {};
-    }
-    reset() {
-        this.ngForm.resetForm();
-        Object.keys(this.ngForm.controls)
-            .forEach((name) => {
-            const control = this.ngForm.controls[name];
-            control.reset(this._snapshot[name]);
-        });
-        this.reseted.emit();
-    }
-    clear() {
-        this.ngForm.resetForm();
-        this.cleared.emit();
-    }
-    dirty() {
-        this.ngForm.form.markAsDirty();
-        this._updateDirtySubmitButtons();
-    }
-    triggerSubmit(options) {
-        this._confirmed = options?.confirmed;
-        this.ngForm.ngSubmit.emit();
-    }
-    triggerConfirm() {
-        const submitted = this.submitting ? this.submitted.asObservable() : of({});
-        return submitted
-            .pipe(take(1), mergeMap(() => this._form.confirmUnsaved([this])));
-    }
-    enable() {
-        this.ngForm.control.enable();
-        this._updateDirtySubmitButtons();
-    }
-    disable() {
-        this.ngForm.control.disable();
-        this._buttons.forEach((button) => {
-            button.disable();
-        });
-    }
-    addButton(button) {
-        this._buttons.reset([
-            ...this._buttons.toArray(),
-            button,
-        ]);
-    }
-    removeButton(button) {
-        this._buttons.reset([
-            ...this._buttons.toArray()
-                .filter((item) => (button !== item)),
-        ]);
-    }
-    validate() {
-        Object.values(this.ngForm.controls)
-            .forEach((control) => {
-            control.markAsDirty();
-            control.markAsTouched();
-            control.updateValueAndValidity();
-        });
-    }
-    _listenSubmit() {
-        this.ngForm
-            .ngSubmit
-            .pipe(tap((event) => {
-            event?.preventDefault();
-        }), map((event) => {
-            return { event, confirmed: this._confirmed };
-        }), tap(() => this._confirmed = false), filter(() => {
-            return [FormStatus.Valid, FormStatus.Invalid]
-                .includes(this._status$.getValue());
-        }), tap(() => this._broadcasValidatingEvents()), tap(() => this.validate()), tap(() => this._broadcastSubmittingEvents()), switchMap((data) => this._waitUntilStatusPending()
-            .pipe(mapTo(data))), tap(() => this._setupActiveSubmitButton()), tap(() => this._disableButtons()), mergeMap((data) => {
-            if (this.ngForm.status === 'INVALID') {
-                return this._formInvalidState$;
-            }
-            return this._formValidState$
-                .pipe(map((submitEvent) => ({
-                ...submitEvent,
-                confirmed: data.confirmed,
-            })));
-        }), catchError((e, source$) => {
-            this._handleError(e);
-            return source$;
-        }), tap((submittedEvent) => {
-            this._completeSubmit(true, submittedEvent);
-        }), takeUntil(this._destroy$))
-            .subscribe();
-    }
-    _listenFormStatus() {
-        this._status$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((formStatus) => {
-            const cls = [FormStatus.Submitting, FormStatus.Validating];
-            const classList = this._element.nativeElement.classList;
-            classList.remove(...cls);
-            if (cls.indexOf(formStatus) !== -1) {
-                classList.add(formStatus);
-            }
-        });
-    }
-    _listenWindowClose() {
-        fromEvent(window, 'beforeunload')
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((event) => {
-            if (this.confirm && this.confirmBrowser && this.ngForm.dirty) {
-                event.returnValue = false;
-            }
-        });
-    }
-    _activeDialog(el, dialog) {
-        if (el.isSameNode(dialog)) {
-            return true;
-        }
-        else if (el.parentElement) {
-            return this._activeDialog(el.parentElement, dialog);
-        }
-        return false;
-    }
-    _listenHotKeys() {
-        this._ngZone.runOutsideAngular(() => {
-            fromEvent(document, 'keydown')
-                .pipe(takeUntil(this._destroy$))
-                .subscribe((event) => {
-                if (this._dialogBackdropEscape && event.code === 'Escape') {
-                    const cdkOverlayPane = Array
-                        .from(document.querySelectorAll('.cdk-overlay-pane')).pop();
-                    const activeDialog = this
-                        ._activeDialog(document.getElementById(this._dialogRef.id), cdkOverlayPane);
-                    if (activeDialog) {
-                        this._ngZone.run(() => {
-                            this._formClose();
-                        });
-                    }
-                }
-                if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
-                    event.preventDefault();
-                    if (this.shortcuts) {
-                        if (this._elementInForm(document.activeElement)) {
-                            this.ngForm.ngSubmit.next();
-                        }
-                    }
-                }
-            });
-        });
-    }
-    _formClose() {
-        if (this.confirm && this.confirmDialog) {
-            this.triggerConfirm()
-                .pipe(filter((result) => confirmResultContinue(result)), switchMap((result) => {
-                return result === ConfirmResult.Pristine || result === ConfirmResult.Discard
-                    ? of(null)
-                    : this.submitted.asObservable();
-            }), takeUntil(this._destroy$))
-                .subscribe((result) => {
-                this._dialogRef.close(result?.response);
-            });
-        }
-        else {
-            this._dialogRef.close(null);
-        }
-    }
-    _getActiveSubmitButton() {
-        const submitButtons = this._buttons
-            .filter((button) => button.submit);
-        const activeButton = submitButtons
-            .find((button) => {
-            return button.active;
-        });
-        return activeButton ? activeButton : submitButtons[0];
-    }
-    _elementInForm(el) {
-        if (el.isSameNode(this._element.nativeElement)) {
-            return true;
-        }
-        else if (el.parentElement) {
-            return this._elementInForm(el.parentElement);
-        }
-        return false;
-    }
-    _completeSubmit(success, submitEvent) {
-        if (success) {
-            this.ngForm.control.markAsPristine();
-            this.createSnapshot();
-            this.submitted.emit(submitEvent);
-        }
-        else {
-            this._resetButtons();
-        }
-        if (this._activeSubmitButton) {
-            if (success) {
-                this._activeSubmitButton.success();
-            }
-            else {
-                this._activeSubmitButton.error();
-            }
-        }
-        this._status$.next(FormStatus.Submitted);
-        if (success) {
-            this._status$.next(FormStatus.Success);
-        }
-        else {
-            this._status$.next(FormStatus.Error);
-        }
-        this._status$.next(FormStatus.Completing);
-        const resetDelay = success ? this.successDelay : this.errorDelay;
-        of(true)
-            .pipe(delay(resetDelay), first(), takeUntil(this._destroy$)).subscribe(() => {
-            if (this.ngForm.form.status === 'VALID') {
-                this._status$.next(FormStatus.Valid);
-            }
-            else {
-                this._status$.next(FormStatus.Invalid);
-            }
-            this._resetButtons();
-            this._resetActiveButtons();
-            this._updateDirtySubmitButtons();
-        });
-    }
-    _resetButtons() {
-        this._buttons.forEach((button) => {
-            button.reset();
-        });
-    }
-    _resetActiveButtons() {
-        this._buttons.forEach((button) => {
-            button.resetActive();
-        });
-    }
-    _registerConfirm() {
-        this.ngForm.form.valueChanges
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((changes) => {
-            if (this._dialogBackdropEscape && this._dialogRef) {
-                this._dialogRef.disableClose = true;
-            }
-            if (this.confirm) {
-                const existing = Object.keys(this._snapshot);
-                Object.keys(changes)
-                    .forEach((name) => {
-                    if (existing.indexOf(name) === -1) {
-                        this._snapshot[name] = changes[name];
-                    }
-                });
-            }
-        });
-    }
-    _registerDrawerClose() {
-        if (this._drawerRef) {
-            this._drawerRef.closeStart$
-                .pipe(takeUntil(this._destroy$))
-                .subscribe((subscriber) => {
-                if (this.submitting) {
-                    this._status$
-                        .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this._destroy$))
-                        .subscribe((status) => {
-                        if (status === FormStatus.Success) {
-                            subscriber.next();
-                            subscriber.complete();
-                        }
-                        else {
-                            subscriber.error();
-                        }
-                    });
-                }
-                else {
-                    subscriber.next();
-                    subscriber.complete();
-                }
-            });
-        }
-    }
-    _registerConfirmDrawerClose() {
-        if (this._drawerRef) {
-            this._drawerRef.closeStart$
-                .pipe(switchMap((subscriber) => {
-                return iif(() => this.confirm && this.confirmDrawer, this.triggerConfirm()
-                    .pipe(map((result) => confirmResultContinue(result)), tap((result) => {
-                    if (result) {
-                        subscriber.next();
-                        subscriber.complete();
-                    }
-                })), defer(() => {
-                    subscriber.next();
-                    subscriber.complete();
-                }));
-            }), takeUntil(this._destroy$))
-                .subscribe();
-        }
-    }
-    _registerConfirmTabs() {
-        if (this.tabGroup) {
-            this._registerConfirmTabGroup(this.tabGroup);
-        }
-        this._registerConfirmTabGroups(this._tabGroups.toArray());
-        this._tabGroups.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._registerConfirmTabGroups(this._tabGroups.toArray());
-        });
-    }
-    _registerConfirmTabGroups(tabGroups) {
-        tabGroups.forEach((tabGroup) => {
-            this._registerConfirmTabGroup(tabGroup);
-        });
-    }
-    _registerConfirmTabGroup(tabGroup) {
-        const confirmTabGroup = tabGroup;
-        if (!confirmTabGroup._originalHandleClick) {
-            confirmTabGroup._originalHandleClick = tabGroup._handleClick;
-            confirmTabGroup._handlClick$ = new Subject();
-            confirmTabGroup._handleClick = (tab, tabHeader, idx) => {
-                if (confirmTabGroup._handlClick$.observers.length) {
-                    confirmTabGroup._handlClick$.next({ tab, tabHeader, idx });
-                }
-                else {
-                    confirmTabGroup._originalHandleClick(tab, tabHeader, idx);
-                }
-            };
-        }
-        confirmTabGroup._handlClick$
-            .pipe(filter(() => !this.submitting), switchMap((event) => {
-            if (this.confirm && this.confirmTabs) {
-                return this.triggerConfirm()
-                    .pipe(tap((result) => {
-                    if (confirmResultContinue(result)) {
-                        confirmTabGroup.selectedIndex = event.idx;
-                    }
-                }));
-            }
-            confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
-            return of(null);
-        }), takeUntil(this._destroy$))
-            .subscribe();
-    }
-    _registerConfirmDialogBackdropEscape() {
-        if (this._dialogRef) {
-            this._dialogBackdropEscape = !this._dialogRef?.disableClose;
-            if (this._dialogBackdropEscape) {
-                this._dialogRef.backdropClick()
-                    .pipe(takeUntil(this._destroy$))
-                    .subscribe(() => {
-                    this._formClose();
-                });
-                this._destroy$
-                    .subscribe(() => {
-                    this._dialogRef.disableClose = false;
-                });
-            }
-        }
-    }
-    _registerAutocomplete() {
-        this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);
-        this.ngForm.form.registerControl = (name, control) => {
-            const el = this._element.nativeElement.querySelector(`input[name='${name}']`);
-            if (el) {
-                if (!el.getAttribute('autocomplete')) {
-                    el.setAttribute('autocomplete', 'none');
-                    el.setAttribute('name', `${name}-${guid()}`);
-                }
-            }
-            return this._registerControl(name, control);
-        };
-    }
-    _registerDirtySubmitButton() {
-        if (!this.ngForm) {
-            return;
-        }
-        this.ngForm.form.valueChanges
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._updateDirtySubmitButtons();
-        });
-        this._buttons.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._updateDirtySubmitButtons();
-        });
-    }
-    _updateDirtySubmitButtons() {
-        this._buttons
-            .filter((button) => button.submit)
-            .forEach((submitButton) => {
-            if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !submitButton.dirtySubmit) {
-                submitButton.enable();
-            }
-            else {
-                submitButton.disable();
-            }
-        });
-    }
-    _broadcastSubmittingEvents() {
-        this._status$.next(FormStatus.Submitting);
-        this._form.broadcast('submit', this.ngForm);
-    }
-    _broadcasValidatingEvents() {
-        this._status$.next(FormStatus.Validating);
-    }
-    _setupActiveSubmitButton() {
-        this._activeSubmitButton = this._getActiveSubmitButton();
-        this._resetButtons();
-        if (this._activeSubmitButton) {
-            this._activeSubmitButton.process();
-        }
-    }
-    _disableButtons() {
-        this._buttons.forEach((button) => {
-            button.disable();
-        });
-    }
-    _waitUntilStatusPending() {
-        return this.ngForm.statusChanges
-            .pipe(startWith(this.ngForm.status), first((state) => state !== 'PENDING'));
-    }
-    _handleError(e) {
-        console.log('%c Form Submit ', 'color: white; background-color: #D33F49', 'Error occured');
-        console.group('Error Details:');
-        console.log('Message: ', e);
-        console.log('FormRef: ', this);
-        if (this.ngForm.invalid) {
-            const errors = getFormErrors(this.ngForm.control, null);
-            console.log('Validation Errors: ', errors);
-        }
-        console.groupEnd();
-        this._completeSubmit(false, null);
-    }
-    _registerCanDeactivateGuard() {
-        this._activatedRouteConfig = getActiveRoute(this._route).routeConfig;
-        if (!this._activatedRouteConfig) {
-            return;
-        }
-        this._form.registerFormDirective(this._activatedRouteConfig.component, this);
-        if (!Array.isArray(this._activatedRouteConfig.canDeactivate)) {
-            this._activatedRouteConfig.canDeactivate = [];
-        }
-        if (this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard) === -1) {
-            this._activatedRouteConfig.canDeactivate.push(FormDeactivateGuard);
-        }
-    }
-    _cleanupCanDeactivate() {
-        if (!this._activatedRouteConfig) {
-            return;
-        }
-        const guardIndex = this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard);
-        this._activatedRouteConfig.canDeactivate.splice(guardIndex, 1);
-        this._form.removeFormDirective(this._activatedRouteConfig.component);
-    }
-}
-FsFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormDirective, deps: [{ token: NgForm }, { token: FsForm }, { token: i0.ElementRef }, { token: i2$2.FsMessage }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MatDialogRef, optional: true }, { token: DrawerRef, optional: true }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
-FsFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsForm]',
-                    exportAs: 'fsForm',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.NgForm, decorators: [{
-                    type: Inject,
-                    args: [NgForm]
-                }] }, { type: FsForm }, { type: i0.ElementRef }, { type: i2$2.FsMessage }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.MatDialogRef, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MatDialogRef]
-                }] }, { type: i6.DrawerRef, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DrawerRef]
-                }] }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { wrapperSelector: [{
-                type: Input
-            }], messageSelector: [{
-                type: Input
-            }], hintSelector: [{
-                type: Input
-            }], labelSelector: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], shortcuts: [{
-                type: Input
-            }], confirm: [{
-                type: Input
-            }], confirmDialog: [{
-                type: Input
-            }], confirmDrawer: [{
-                type: Input
-            }], confirmBrowser: [{
-                type: Input
-            }], confirmTabs: [{
-                type: Input
-            }], dirtySubmitButton: [{
-                type: Input
-            }], submit: [{
-                type: Input
-            }], successDelay: [{
-                type: Input
-            }], errorDelay: [{
-                type: Input
-            }], tabGroup: [{
-                type: Input
-            }], deactivationGuard: [{
-                type: Input
-            }], submitEvent: [{
-                type: Output,
-                args: ['fsForm']
-            }], invalid: [{
-                type: Output
-            }], valid: [{
-                type: Output
-            }], submitted: [{
-                type: Output
-            }], reseted: [{
-                type: Output
-            }], cleared: [{
-                type: Output
-            }], fsFormClass: [{
-                type: HostBinding,
-                args: ['class.fs-form']
-            }], _tabGroups: [{
-                type: ContentChildren,
-                args: [MatTabGroup, { descendants: true }]
+class FsFormDirective {
+    constructor(ngForm, _form, _element, _message, _ngZone, _cdRef, _dialogRef, _drawerRef, _route) {
+        this.ngForm = ngForm;
+        this._form = _form;
+        this._element = _element;
+        this._message = _message;
+        this._ngZone = _ngZone;
+        this._cdRef = _cdRef;
+        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;
+    }
+    set submit(submit$) {
+        this._submit$ = submit$;
+    }
+    get submit() {
+        return this._submit$;
+    }
+    get submitting() {
+        return this._status$.getValue() === FormStatus.Submitting;
+    }
+    get validating() {
+        return this._status$.getValue() === FormStatus.Validating;
+    }
+    get completing() {
+        return this._status$.getValue() === FormStatus.Completing;
+    }
+    get _submitEvent() {
+        return {
+            ngForm: this.ngForm,
+            submitter: this._submitter,
+        };
+    }
+    get _formValidState$() {
+        this._form.broadcast('valid', this._submitEvent);
+        this.submitEvent.emit(this._submitEvent);
+        this.valid.emit(this._submitEvent);
+        const submittedEvent = {
+            ngForm: this.ngForm,
+            submitter: this._submitter,
+            response: null,
+        };
+        const submit$ = this._submit$ ?
+            this._submit$(this._submitEvent) : of(submittedEvent);
+        return submit$
+            .pipe(map((response) => {
+            submittedEvent.response = response;
+            return submittedEvent;
+        }), takeUntil(this._destroy$));
+    }
+    get _formInvalidState$() {
+        this._form.broadcast('invalid', this._submitEvent);
+        if (this.invalid) {
+            this.invalid.emit(this._submitEvent);
+        }
+        const message = 'Please review errors highlighted in red';
+        this._message.error(message, { mode: MessageMode.Toast });
+        const el = this._element.nativeElement.querySelector('.ng-invalid');
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+        return throwError('Form validation error');
+    }
+    get _submitter() {
+        return this._activeSubmitButton
+            ? this._activeSubmitButton.name
+            : null;
+    }
+    ngOnInit() {
+        if (this.deactivationGuard) {
+            this._registerCanDeactivateGuard();
+        }
+        this._registerConfirmDialogBackdropEscape();
+        this._listenHotKeys();
+        this._listenWindowClose();
+        this._listenSubmit();
+        this._listenFormStatus();
+        if (!this.autocomplete) {
+            this._registerAutocomplete();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.confirm) {
+            this._updateDirtySubmitButtons();
+        }
+    }
+    clearSubmit() {
+        this._submit$ = null;
+        setTimeout(() => {
+            this._cdRef.markForCheck();
+        });
+    }
+    registerSubmit(submit$) {
+        this._submit$ = submit$;
+        setTimeout(() => {
+            this._cdRef.markForCheck();
+        });
+    }
+    ngAfterContentInit() {
+        this._registerConfirm();
+        this._registerConfirmDrawerClose();
+        this._registerConfirmTabs();
+        this._registerDrawerClose();
+        this._registerDirtySubmitButton();
+    }
+    ngOnDestroy() {
+        this._cleanupCanDeactivate();
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    createSnapshot() {
+        this._snapshot = this.ngForm.value;
+    }
+    getSnapshot() {
+        return this._snapshot || {};
+    }
+    reset() {
+        this.ngForm.resetForm();
+        Object.keys(this.ngForm.controls)
+            .forEach((name) => {
+            const control = this.ngForm.controls[name];
+            control.reset(this._snapshot[name]);
+        });
+        this.reseted.emit();
+    }
+    clear() {
+        this.ngForm.resetForm();
+        this.cleared.emit();
+    }
+    dirty() {
+        this.ngForm.form.markAsDirty();
+        this._updateDirtySubmitButtons();
+    }
+    triggerSubmit(options) {
+        this._confirmed = options?.confirmed;
+        this.ngForm.ngSubmit.emit();
+    }
+    triggerConfirm() {
+        const submitted = this.submitting ? this.submitted.asObservable() : of({});
+        return submitted
+            .pipe(take(1), mergeMap(() => this._form.confirmUnsaved([this])));
+    }
+    enable() {
+        this.ngForm.control.enable();
+        this._updateDirtySubmitButtons();
+    }
+    disable() {
+        this.ngForm.control.disable();
+        this._buttons.forEach((button) => {
+            button.disable();
+        });
+    }
+    addButton(button) {
+        this._buttons.reset([
+            ...this._buttons.toArray(),
+            button,
+        ]);
+    }
+    removeButton(button) {
+        this._buttons.reset([
+            ...this._buttons.toArray()
+                .filter((item) => (button !== item)),
+        ]);
+    }
+    validate() {
+        Object.values(this.ngForm.controls)
+            .forEach((control) => {
+            control.markAsDirty();
+            control.markAsTouched();
+            control.updateValueAndValidity();
+        });
+    }
+    _listenSubmit() {
+        this.ngForm
+            .ngSubmit
+            .pipe(tap((event) => {
+            event?.preventDefault();
+        }), map((event) => {
+            return { event, confirmed: this._confirmed };
+        }), tap(() => this._confirmed = false), filter(() => {
+            return [FormStatus.Valid, FormStatus.Invalid]
+                .includes(this._status$.getValue());
+        }), tap(() => this._broadcasValidatingEvents()), tap(() => this.validate()), tap(() => this._broadcastSubmittingEvents()), switchMap((data) => this._waitUntilStatusPending()
+            .pipe(mapTo(data))), tap(() => this._setupActiveSubmitButton()), tap(() => this._disableButtons()), mergeMap((data) => {
+            if (this.ngForm.status === 'INVALID') {
+                return this._formInvalidState$;
+            }
+            return this._formValidState$
+                .pipe(map((submitEvent) => ({
+                ...submitEvent,
+                confirmed: data.confirmed,
+            })));
+        }), catchError((e, source$) => {
+            this._handleError(e);
+            return source$;
+        }), tap((submittedEvent) => {
+            this._completeSubmit(true, submittedEvent);
+        }), takeUntil(this._destroy$))
+            .subscribe();
+    }
+    _listenFormStatus() {
+        this._status$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((formStatus) => {
+            const cls = [FormStatus.Submitting, FormStatus.Validating];
+            const classList = this._element.nativeElement.classList;
+            classList.remove(...cls);
+            if (cls.indexOf(formStatus) !== -1) {
+                classList.add(formStatus);
+            }
+        });
+    }
+    _listenWindowClose() {
+        fromEvent(window, 'beforeunload')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((event) => {
+            if (this.confirm && this.confirmBrowser && this.ngForm.dirty) {
+                event.returnValue = false;
+            }
+        });
+    }
+    _activeDialog(el, dialog) {
+        if (el.isSameNode(dialog)) {
+            return true;
+        }
+        else if (el.parentElement) {
+            return this._activeDialog(el.parentElement, dialog);
+        }
+        return false;
+    }
+    _listenHotKeys() {
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(document, 'keydown')
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((event) => {
+                if (this._dialogBackdropEscape && event.code === 'Escape') {
+                    const cdkOverlayPane = Array
+                        .from(document.querySelectorAll('.cdk-overlay-pane')).pop();
+                    const activeDialog = this
+                        ._activeDialog(document.getElementById(this._dialogRef.id), cdkOverlayPane);
+                    if (activeDialog) {
+                        this._ngZone.run(() => {
+                            this._formClose();
+                        });
+                    }
+                }
+                if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
+                    event.preventDefault();
+                    if (this.shortcuts) {
+                        if (this._elementInForm(document.activeElement)) {
+                            this.ngForm.ngSubmit.next();
+                        }
+                    }
+                }
+            });
+        });
+    }
+    _formClose() {
+        if (this.confirm && this.confirmDialog) {
+            this.triggerConfirm()
+                .pipe(filter((result) => confirmResultContinue(result)), switchMap((result) => {
+                return result === ConfirmResult.Pristine || result === ConfirmResult.Discard
+                    ? of(null)
+                    : this.submitted.asObservable();
+            }), takeUntil(this._destroy$))
+                .subscribe((result) => {
+                this._dialogRef.close(result?.response);
+            });
+        }
+        else {
+            this._dialogRef.close(null);
+        }
+    }
+    _getActiveSubmitButton() {
+        const submitButtons = this._buttons
+            .filter((button) => button.submit);
+        const activeButton = submitButtons
+            .find((button) => {
+            return button.active;
+        });
+        return activeButton ? activeButton : submitButtons[0];
+    }
+    _elementInForm(el) {
+        if (el.isSameNode(this._element.nativeElement)) {
+            return true;
+        }
+        else if (el.parentElement) {
+            return this._elementInForm(el.parentElement);
+        }
+        return false;
+    }
+    _completeSubmit(success, submitEvent) {
+        if (success) {
+            this.ngForm.control.markAsPristine();
+            this.createSnapshot();
+            this.submitted.emit(submitEvent);
+        }
+        else {
+            this._resetButtons();
+        }
+        if (this._activeSubmitButton) {
+            if (success) {
+                this._activeSubmitButton.success();
+            }
+            else {
+                this._activeSubmitButton.error();
+            }
+        }
+        this._status$.next(FormStatus.Submitted);
+        if (success) {
+            this._status$.next(FormStatus.Success);
+        }
+        else {
+            this._status$.next(FormStatus.Error);
+        }
+        this._status$.next(FormStatus.Completing);
+        const resetDelay = success ? this.successDelay : this.errorDelay;
+        of(true)
+            .pipe(delay(resetDelay), first(), takeUntil(this._destroy$)).subscribe(() => {
+            if (this.ngForm.form.status === 'VALID') {
+                this._status$.next(FormStatus.Valid);
+            }
+            else {
+                this._status$.next(FormStatus.Invalid);
+            }
+            this._resetButtons();
+            this._resetActiveButtons();
+            this._updateDirtySubmitButtons();
+        });
+    }
+    _resetButtons() {
+        this._buttons.forEach((button) => {
+            button.reset();
+        });
+    }
+    _resetActiveButtons() {
+        this._buttons.forEach((button) => {
+            button.resetActive();
+        });
+    }
+    _registerConfirm() {
+        this.ngForm.form.valueChanges
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((changes) => {
+            if (this._dialogBackdropEscape && this._dialogRef) {
+                this._dialogRef.disableClose = true;
+            }
+            if (this.confirm) {
+                const existing = Object.keys(this._snapshot);
+                Object.keys(changes)
+                    .forEach((name) => {
+                    if (existing.indexOf(name) === -1) {
+                        this._snapshot[name] = changes[name];
+                    }
+                });
+            }
+        });
+    }
+    _registerDrawerClose() {
+        if (this._drawerRef) {
+            this._drawerRef.closeStart$
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((subscriber) => {
+                if (this.submitting) {
+                    this._status$
+                        .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this._destroy$))
+                        .subscribe((status) => {
+                        if (status === FormStatus.Success) {
+                            subscriber.next();
+                            subscriber.complete();
+                        }
+                        else {
+                            subscriber.error();
+                        }
+                    });
+                }
+                else {
+                    subscriber.next();
+                    subscriber.complete();
+                }
+            });
+        }
+    }
+    _registerConfirmDrawerClose() {
+        if (this._drawerRef) {
+            this._drawerRef.closeStart$
+                .pipe(switchMap((subscriber) => {
+                return iif(() => this.confirm && this.confirmDrawer, this.triggerConfirm()
+                    .pipe(map((result) => confirmResultContinue(result)), tap((result) => {
+                    if (result) {
+                        subscriber.next();
+                        subscriber.complete();
+                    }
+                })), defer(() => {
+                    subscriber.next();
+                    subscriber.complete();
+                }));
+            }), takeUntil(this._destroy$))
+                .subscribe();
+        }
+    }
+    _registerConfirmTabs() {
+        if (this.tabGroup) {
+            this._registerConfirmTabGroup(this.tabGroup);
+        }
+        this._registerConfirmTabGroups(this._tabGroups.toArray());
+        this._tabGroups.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._registerConfirmTabGroups(this._tabGroups.toArray());
+        });
+    }
+    _registerConfirmTabGroups(tabGroups) {
+        tabGroups.forEach((tabGroup) => {
+            this._registerConfirmTabGroup(tabGroup);
+        });
+    }
+    _registerConfirmTabGroup(tabGroup) {
+        const confirmTabGroup = tabGroup;
+        if (!confirmTabGroup._originalHandleClick) {
+            confirmTabGroup._originalHandleClick = tabGroup._handleClick;
+            confirmTabGroup._handlClick$ = new Subject();
+            confirmTabGroup._handleClick = (tab, tabHeader, idx) => {
+                if (confirmTabGroup._handlClick$.observers.length) {
+                    confirmTabGroup._handlClick$.next({ tab, tabHeader, idx });
+                }
+                else {
+                    confirmTabGroup._originalHandleClick(tab, tabHeader, idx);
+                }
+            };
+        }
+        confirmTabGroup._handlClick$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((event) => {
+            if (!this.submitting) {
+                if (this.confirm && this.confirmTabs) {
+                    this.triggerConfirm()
+                        .pipe(takeUntil(this._destroy$))
+                        .subscribe((result) => {
+                        if (confirmResultContinue(result)) {
+                            confirmTabGroup.selectedIndex = event.idx;
+                        }
+                    });
+                }
+                else {
+                    confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
+                }
+            }
+        });
+    }
+    _registerConfirmDialogBackdropEscape() {
+        this._dialogBackdropEscape = this._dialogRef
+            && !this._dialogRef.disableClose;
+        if (this._dialogBackdropEscape) {
+            this._dialogRef.backdropClick()
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._formClose();
+            });
+            this._destroy$
+                .subscribe(() => {
+                this._dialogRef.disableClose = false;
+            });
+        }
+    }
+    _registerAutocomplete() {
+        this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);
+        this.ngForm.form.registerControl = (name, control) => {
+            const el = this._element.nativeElement.querySelector(`input[name='${name}']`);
+            if (el) {
+                if (!el.getAttribute('autocomplete')) {
+                    el.setAttribute('autocomplete', 'none');
+                    el.setAttribute('name', `${name}-${guid()}`);
+                }
+            }
+            return this._registerControl(name, control);
+        };
+    }
+    _registerDirtySubmitButton() {
+        if (!this.ngForm) {
+            return;
+        }
+        this.ngForm.form.valueChanges
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._updateDirtySubmitButtons();
+        });
+        this._buttons.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._updateDirtySubmitButtons();
+        });
+    }
+    _updateDirtySubmitButtons() {
+        this._buttons
+            .filter((button) => button.submit)
+            .forEach((submitButton) => {
+            if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !submitButton.dirtySubmit) {
+                submitButton.enable();
+            }
+            else {
+                submitButton.disable();
+            }
+        });
+    }
+    _broadcastSubmittingEvents() {
+        this._status$.next(FormStatus.Submitting);
+        this._form.broadcast('submit', this.ngForm);
+    }
+    _broadcasValidatingEvents() {
+        this._status$.next(FormStatus.Validating);
+    }
+    _setupActiveSubmitButton() {
+        this._activeSubmitButton = this._getActiveSubmitButton();
+        this._resetButtons();
+        if (this._activeSubmitButton) {
+            this._activeSubmitButton.process();
+        }
+    }
+    _disableButtons() {
+        this._buttons.forEach((button) => {
+            button.disable();
+        });
+    }
+    _waitUntilStatusPending() {
+        return this.ngForm.statusChanges
+            .pipe(startWith(this.ngForm.status), first((state) => state !== 'PENDING'));
+    }
+    _handleError(e) {
+        console.log('%c Form Submit ', 'color: white; background-color: #D33F49', 'Error occured');
+        console.group('Error Details:');
+        console.log('Message: ', e);
+        console.log('FormRef: ', this);
+        if (this.ngForm.invalid) {
+            const errors = getFormErrors(this.ngForm.control, null);
+            console.log('Validation Errors: ', errors);
+        }
+        console.groupEnd();
+        this._completeSubmit(false, null);
+    }
+    _registerCanDeactivateGuard() {
+        this._activatedRouteConfig = getActiveRoute(this._route).routeConfig;
+        if (!this._activatedRouteConfig) {
+            return;
+        }
+        this._form.registerFormDirective(this._activatedRouteConfig.component, this);
+        if (!Array.isArray(this._activatedRouteConfig.canDeactivate)) {
+            this._activatedRouteConfig.canDeactivate = [];
+        }
+        if (this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard) === -1) {
+            this._activatedRouteConfig.canDeactivate.push(FormDeactivateGuard);
+        }
+    }
+    _cleanupCanDeactivate() {
+        if (!this._activatedRouteConfig) {
+            return;
+        }
+        const guardIndex = this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard);
+        this._activatedRouteConfig.canDeactivate.splice(guardIndex, 1);
+        this._form.removeFormDirective(this._activatedRouteConfig.component);
+    }
+}
+FsFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormDirective, deps: [{ token: NgForm }, { token: FsForm }, { token: i0.ElementRef }, { token: i2$2.FsMessage }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MatDialogRef, optional: true }, { token: DrawerRef, optional: true }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
+FsFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsForm]',
+                    exportAs: 'fsForm',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.NgForm, decorators: [{
+                    type: Inject,
+                    args: [NgForm]
+                }] }, { type: FsForm }, { type: i0.ElementRef }, { type: i2$2.FsMessage }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.MatDialogRef, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MatDialogRef]
+                }] }, { type: i6.DrawerRef, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DrawerRef]
+                }] }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { wrapperSelector: [{
+                type: Input
+            }], messageSelector: [{
+                type: Input
+            }], hintSelector: [{
+                type: Input
+            }], labelSelector: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], shortcuts: [{
+                type: Input
+            }], confirm: [{
+                type: Input
+            }], confirmDialog: [{
+                type: Input
+            }], confirmDrawer: [{
+                type: Input
+            }], confirmBrowser: [{
+                type: Input
+            }], confirmTabs: [{
+                type: Input
+            }], dirtySubmitButton: [{
+                type: Input
+            }], submit: [{
+                type: Input
+            }], successDelay: [{
+                type: Input
+            }], errorDelay: [{
+                type: Input
+            }], tabGroup: [{
+                type: Input
+            }], deactivationGuard: [{
+                type: Input
+            }], submitEvent: [{
+                type: Output,
+                args: ['fsForm']
+            }], invalid: [{
+                type: Output
+            }], valid: [{
+                type: Output
+            }], submitted: [{
+                type: Output
+            }], reseted: [{
+                type: Output
+            }], cleared: [{
+                type: Output
+            }], fsFormClass: [{
+                type: HostBinding,
+                args: ['class.fs-form']
+            }], _tabGroups: [{
+                type: ContentChildren,
+                args: [MatTabGroup, { descendants: true }]
             }] } });
 
-class FsButtonDirective {
-    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';
-        this.form = this.form || this._form;
-        if (this.form) {
-            this.form.addButton(this);
-            if (this.submit) {
-                fromEvent(this.element, 'click')
-                    .pipe(takeUntil(this._destroy$))
-                    .subscribe(() => {
-                    this.active = true;
-                });
-                if (this.dirtySubmit) {
-                    if (this.form.dirtySubmitButton) {
-                        if (!this.form.ngForm.dirty) {
-                            this.disable();
-                        }
-                    }
-                }
-                this.transitionStyle = 'none';
-                setTimeout(() => {
-                    this.transitionStyle = null;
-                }, 500);
-            }
-        }
-    }
-    disable() {
-        if (this._matButton && !this.active) {
-            this._previousDisabled = this._matButton.disabled;
-            this._matButton.disabled = true;
-            this._cdRef.markForCheck();
-        }
-    }
-    enable() {
-        if (this._matButton) {
-            this._matButton.disabled = false;
-            this._matButton.disableRipple = true;
-            this._cdRef.markForCheck();
-        }
-    }
-    process() {
-        this.setClass('process');
-        if (this._matButton) {
-            this._matButton.disableRipple = true;
-        }
-    }
-    success() {
-        this.setClass('success');
-        if (this._matButton) {
-            this._matButton.disableRipple = false;
-        }
-    }
-    error() {
-        this.setClass('error');
-        if (this._matButton) {
-            this._matButton.disableRipple = false;
-        }
-    }
-    setClass(cls) {
-        const svg = this._getSvg(cls);
-        this._resetClass();
-        this._disableShadowAnimation();
-        this.element.classList.add(`submit-${cls}`);
-        this.element.append(svg);
-    }
-    get element() {
-        return this._elementRef.nativeElement;
-    }
-    resetActive() {
-        this.active = false;
-    }
-    reset() {
-        if (!this._previousDisabled) {
-            this.enable();
-        }
-        this.element.querySelectorAll('.svg-icon')
-            .forEach((el) => {
-            el.remove();
-        });
-        if (this._matButton) {
-            this._matButton.disableRipple = false;
-        }
-        this._resetClass();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-        this.form?.removeButton(this);
-    }
-    _disableShadowAnimation() {
-        // .mat-elevation-z2 removes the click shadow animation
-        //this.element.classList.add('mat-elevation-z2');
-    }
-    _resetClass() {
-        this.element.classList.remove('submit-success', 'submit-error', 'submit-process', 'mat-elevation-z2');
-    }
-    _getSvg(type) {
-        if (type === 'success') {
+class FsButtonDirective {
+    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';
+        this.form = this.form || this._form;
+        if (this.form) {
+            this.form.addButton(this);
+            if (this.submit) {
+                fromEvent(this.element, 'click')
+                    .pipe(takeUntil(this._destroy$))
+                    .subscribe(() => {
+                    this.active = true;
+                });
+                if (this.dirtySubmit) {
+                    if (this.form.dirtySubmitButton) {
+                        if (!this.form.ngForm.dirty) {
+                            this.disable();
+                        }
+                    }
+                }
+                this.transitionStyle = 'none';
+                setTimeout(() => {
+                    this.transitionStyle = null;
+                }, 500);
+            }
+        }
+    }
+    disable() {
+        if (this._matButton && !this.active) {
+            this._previousDisabled = this._matButton.disabled;
+            this._matButton.disabled = true;
+            this._cdRef.markForCheck();
+        }
+    }
+    enable() {
+        if (this._matButton) {
+            this._matButton.disabled = false;
+            this._matButton.disableRipple = true;
+            this._cdRef.markForCheck();
+        }
+    }
+    process() {
+        this.setClass('process');
+        if (this._matButton) {
+            this._matButton.disableRipple = true;
+        }
+    }
+    success() {
+        this.setClass('success');
+        if (this._matButton) {
+            this._matButton.disableRipple = false;
+        }
+    }
+    error() {
+        this.setClass('error');
+        if (this._matButton) {
+            this._matButton.disableRipple = false;
+        }
+    }
+    setClass(cls) {
+        const svg = this._getSvg(cls);
+        this._resetClass();
+        this._disableShadowAnimation();
+        this.element.classList.add(`submit-${cls}`);
+        this.element.append(svg);
+    }
+    get element() {
+        return this._elementRef.nativeElement;
+    }
+    resetActive() {
+        this.active = false;
+    }
+    reset() {
+        if (!this._previousDisabled) {
+            this.enable();
+        }
+        this.element.querySelectorAll('.svg-icon')
+            .forEach((el) => {
+            el.remove();
+        });
+        if (this._matButton) {
+            this._matButton.disableRipple = false;
+        }
+        this._resetClass();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+        this.form?.removeButton(this);
+    }
+    _disableShadowAnimation() {
+        // .mat-elevation-z2 removes the click shadow animation
+        //this.element.classList.add('mat-elevation-z2');
+    }
+    _resetClass() {
+        this.element.classList.remove('submit-success', 'submit-error', 'submit-process', 'mat-elevation-z2');
+    }
+    _getSvg(type) {
+        if (type === 'success') {
             return new DOMParser().parseFromString(`<svg class="svg-icon svg-icon-success" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 38 38" style="enable-background:new 0 0 38 38;" xml:space="preserve" width="38px" height="38px">
       <g>
         <g class="check">
@@ -1015,1552 +1018,1552 @@ class FsButtonDirective {
           </g>
         </g>
       </g>
-      </svg>`, 'text/xml').firstChild;
-        }
-        if (type === 'process') {
+      </svg>`, 'text/xml').firstChild;
+        }
+        if (type === 'process') {
             return new DOMParser().parseFromString(`<svg class="svg-icon svg-icon-process" width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
           <path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur=".7s" repeatCount="indefinite"/></path>
         </g>
       </g>
-      </svg>`, 'text/xml').firstChild;
-        }
-        if (type === 'error') {
-            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;
-        }
-    }
-}
-FsButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "12.0.0", version: "13.4.0", 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: "13.4.0", 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: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }, { type: FsFormDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
-                type: Input
-            }], dirtySubmit: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], transitionStyle: [{
-                type: HostBinding,
-                args: ['style.transition']
+      </svg>`, 'text/xml').firstChild;
+        }
+        if (type === 'error') {
+            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;
+        }
+    }
+}
+FsButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "12.0.0", version: "13.4.0", 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: "13.4.0", 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: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }, { type: FsFormDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
+                type: Input
+            }], dirtySubmit: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], transitionStyle: [{
+                type: HostBinding,
+                args: ['style.transition']
             }] } });
 
-class FsFormDialogCloseDirective {
-    constructor(_form, _dialogRef) {
-        this._form = _form;
-        this._dialogRef = _dialogRef;
-        this.type = 'button';
-        this._destroy$ = new Subject();
-    }
-    closeClick() {
-        if (this._form) {
-            this._form.triggerConfirm()
-                .pipe(filter((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this._dialogRef.close(this.closeData);
-            });
-        }
-        else {
-            this._dialogRef.close(this.closeData);
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-}
-FsFormDialogCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormDialogCloseDirective, deps: [{ token: FsFormDirective, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FsFormDialogCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormDialogCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormDialogClose],[fs-form-dialog-close]',
-                }]
-        }], ctorParameters: function () { return [{ type: FsFormDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i1.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { closeData: [{
-                type: Input
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }], closeClick: [{
-                type: HostListener,
-                args: ['click', ['$event.target']]
+class FsFormDialogCloseDirective {
+    constructor(_form, _dialogRef) {
+        this._form = _form;
+        this._dialogRef = _dialogRef;
+        this.type = 'button';
+        this._destroy$ = new Subject();
+    }
+    closeClick() {
+        if (this._form) {
+            this._form.triggerConfirm()
+                .pipe(filter((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._dialogRef.close(this.closeData);
+            });
+        }
+        else {
+            this._dialogRef.close(this.closeData);
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+FsFormDialogCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormDialogCloseDirective, deps: [{ token: FsFormDirective, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FsFormDialogCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormDialogCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormDialogClose],[fs-form-dialog-close]',
+                }]
+        }], ctorParameters: function () { return [{ type: FsFormDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i1.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { closeData: [{
+                type: Input
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], closeClick: [{
+                type: HostListener,
+                args: ['click', ['$event.target']]
             }] } });
 
-class FsFormDialogActionsComponent {
-    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) {
-            this._form.ngForm.valueChanges
-                .pipe(filter(() => (!this.dirty)), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.dirty = this._form.ngForm.dirty;
-                this._cdRef.markForCheck();
-            });
-            this._form.submitted
-                .pipe(delay(50), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.dirty = false;
-                this._cdRef.markForCheck();
-            });
-            this._form.reseted
-                .pipe(takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.dirty = false;
-                this._cdRef.markForCheck();
-            });
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-}
-FsFormDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "12.0.0", version: "13.4.0", 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"], components: [{ type: i1$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: ["closeData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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: [{
-                    type: Optional
-                }] }, { type: i1.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { save: [{
-                type: Input
-            }], create: [{
-                type: Input
-            }], close: [{
-                type: Input
-            }], done: [{
-                type: Input
-            }], closeData: [{
-                type: Input
-            }], name: [{
-                type: Input
+class FsFormDialogActionsComponent {
+    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) {
+            this._form.ngForm.valueChanges
+                .pipe(filter(() => (!this.dirty)), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.dirty = this._form.ngForm.dirty;
+                this._cdRef.markForCheck();
+            });
+            this._form.submitted
+                .pipe(delay(50), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.dirty = false;
+                this._cdRef.markForCheck();
+            });
+            this._form.reseted
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.dirty = false;
+                this._cdRef.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+FsFormDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "12.0.0", version: "13.4.0", 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"], components: [{ type: i1$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", inputs: ["closeData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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: [{
+                    type: Optional
+                }] }, { type: i1.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { save: [{
+                type: Input
+            }], create: [{
+                type: Input
+            }], close: [{
+                type: Input
+            }], done: [{
+                type: Input
+            }], closeData: [{
+                type: Input
+            }], name: [{
+                type: Input
             }] } });
 
-class FsFormTemplateComponent {
-    constructor() { }
-    ngAfterContentInit() {
-        debugger;
-        const x = this.models;
-        this.models.changes.subscribe((x) => {
-            debugger;
-        });
-    }
-    ngOnInit() {
-        debugger;
-    }
-}
-FsFormTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsFormTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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: [{
-                type: ViewChild,
-                args: ['templateRef1']
-            }], formTemplate: [{
-                type: Input
-            }], models: [{
-                type: ContentChildren,
-                args: [NgModel, { descendants: true }]
+class FsFormTemplateComponent {
+    constructor() { }
+    ngAfterContentInit() {
+        debugger;
+        const x = this.models;
+        this.models.changes.subscribe((x) => {
+            debugger;
+        });
+    }
+    ngOnInit() {
+        debugger;
+    }
+}
+FsFormTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FsFormTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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: [{
+                type: ViewChild,
+                args: ['templateRef1']
+            }], formTemplate: [{
+                type: Input
+            }], models: [{
+                type: ContentChildren,
+                args: [NgModel, { descendants: true }]
             }] } });
 
-class FsFormTemplateOutletComponent {
-    constructor() { }
-    ngOnChanges(changes) {
-        if (changes.formTemplate?.currentValue) {
-        }
-    }
-    ngAfterContentInit() {
-        // const x = this.models;
-        // this.models.changes.subscribe((x) => {
-        //   debugger;
-        // });
-    }
-}
-FsFormTemplateOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormTemplateOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsFormTemplateOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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>", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "json": i4.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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: [{
-                type: Input
-            }], models: [{
-                type: ContentChildren,
-                args: [NgModel, { descendants: true }]
+class FsFormTemplateOutletComponent {
+    constructor() { }
+    ngOnChanges(changes) {
+        if (changes.formTemplate?.currentValue) {
+        }
+    }
+    ngAfterContentInit() {
+        // const x = this.models;
+        // this.models.changes.subscribe((x) => {
+        //   debugger;
+        // });
+    }
+}
+FsFormTemplateOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormTemplateOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FsFormTemplateOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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>", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "json": i4.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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: [{
+                type: Input
+            }], models: [{
+                type: ContentChildren,
+                args: [NgModel, { descendants: true }]
             }] } });
 
-class FsFormTemplateDirective {
-    constructor() { }
-    ngAfterContentInit() {
-    }
-}
-FsFormTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FsFormTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: FsFormTemplateDirective, selector: "[fsFormTemplate]", viewQueries: [{ propertyName: "models", predicate: NgModel, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormTemplate]',
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { models: [{
-                type: ViewChildren,
-                args: [NgModel]
+class FsFormTemplateDirective {
+    constructor() { }
+    ngAfterContentInit() {
+    }
+}
+FsFormTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsFormTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: FsFormTemplateDirective, selector: "[fsFormTemplate]", viewQueries: [{ propertyName: "models", predicate: NgModel, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormTemplate]',
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { models: [{
+                type: ViewChildren,
+                args: [NgModel]
             }] } });
 
-class FsSubmitButtonDirective extends FsButtonDirective {
-}
-FsSubmitButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSubmitButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsSubmitButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: FsSubmitButtonDirective, selector: "dummy-selector", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSubmitButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'dummy-selector',
-                }]
+class FsSubmitButtonDirective extends FsButtonDirective {
+}
+FsSubmitButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSubmitButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsSubmitButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: FsSubmitButtonDirective, selector: "dummy-selector", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSubmitButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dummy-selector',
+                }]
         }] });
 
-const ERROR_MESSAGES = {
-    required: 'This field is required',
-    email: 'This is not a valid email address',
-    emails: 'Input valid email addresses, comma separated',
-    phone: 'Invalid phone number',
-    numeric: 'Value should be numeric',
-    integer: 'Value should be an integer',
-    min: 'Value should not be less than $(1)',
-    max: 'Value should not be greater than $(1)',
-    minlength: 'Should not be shorter than $(1) characters',
-    maxlength: 'Should not be longer than $(1) characters',
-    compare: 'Inputs do not match',
-    pattern: 'Value should match pattern $(1)',
-    dateRange: 'Invalid date range',
-    url: 'This is not a valid url',
-    urlProtocol: 'Invalid URL. Proper http protocol is required. eg. https://google.com',
-    greater: 'Value must be greater than $(1)',
-    lesser: 'Value must be less than $(1)',
-    greaterEqual: 'Value must be greater than or equal $(1)',
-    lesserEqual: 'Value must be less than or equal $(1)',
+const ERROR_MESSAGES = {
+    required: 'This field is required',
+    email: 'This is not a valid email address',
+    emails: 'Input valid email addresses, comma separated',
+    phone: 'Invalid phone number',
+    numeric: 'Value should be numeric',
+    integer: 'Value should be an integer',
+    min: 'Value should not be less than $(1)',
+    max: 'Value should not be greater than $(1)',
+    minlength: 'Should not be shorter than $(1) characters',
+    maxlength: 'Should not be longer than $(1) characters',
+    compare: 'Inputs do not match',
+    pattern: 'Value should match pattern $(1)',
+    dateRange: 'Invalid date range',
+    url: 'This is not a valid url',
+    urlProtocol: 'Invalid URL. Proper http protocol is required. eg. https://google.com',
+    greater: 'Value must be greater than $(1)',
+    lesser: 'Value must be less than $(1)',
+    greaterEqual: 'Value must be greater than or equal $(1)',
+    lesserEqual: 'Value must be less than or equal $(1)',
 };
 
-const VALIDATE_MESSAGES = new InjectionToken('fs.form.validate-messages');
-const VALIDATE_MESSAGE_PROVIDER = {
-    provide: VALIDATE_MESSAGES,
-    useFactory: messageProviderFactory,
-};
-function messageProviderFactory() {
-    return { ...ERROR_MESSAGES };
+const VALIDATE_MESSAGES = new InjectionToken('fs.form.validate-messages');
+const VALIDATE_MESSAGE_PROVIDER = {
+    provide: VALIDATE_MESSAGES,
+    useFactory: messageProviderFactory,
+};
+function messageProviderFactory() {
+    return { ...ERROR_MESSAGES };
 }
 
-class FsControlDirective {
-    constructor(_elementRef, renderer2, injector, _validateMessages, ngControl, formDirective) {
-        this._elementRef = _elementRef;
-        this.renderer2 = renderer2;
-        this.injector = injector;
-        this._validateMessages = _validateMessages;
-        this.ngControl = ngControl;
-        this.formDirective = formDirective;
-        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;
-        }
-        else {
-            console.error('The element does not have a valid ngModel', this._elementRef.nativeElement);
-        }
-    }
-    set validateMessages(messages) {
-        this._validateMessages = {
-            ...this._validateMessages,
-            ...messages,
-        };
-    }
-    ngOnInit() {
-        this._setupValidators();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    ngAfterContentInit() {
-        this._subscribeToStatusChagnes();
-    }
-    getMessageSelector() {
-        if (this.messageSelector === false) {
-            return '';
-        }
-        if (this.messageSelector) {
-            return this.messageSelector;
-        }
-        else if (this.formDirective?.messageSelector) {
-            return this.formDirective.messageSelector;
-        }
-    }
-    getHintWrapperSelector() {
-        if (this.hintSelector === false) {
-            return '';
-        }
-        if (this.hintSelector) {
-            return this.hintSelector;
-        }
-        else if (this.formDirective?.hintSelector) {
-            return this.formDirective.hintSelector;
-        }
-    }
-    getWrapperSelector() {
-        if (this.wrapperSelector === false) {
-            return '';
-        }
-        if (this.wrapperSelector) {
-            return this.wrapperSelector;
-        }
-        else if (this.formDirective?.wrapperSelector) {
-            return this.formDirective.wrapperSelector;
-        }
-    }
-    getlabelSelector() {
-        if (this.labelSelector === false) {
-            return '';
-        }
-        if (this.labelSelector) {
-            return this.labelSelector;
-        }
-        else if (this.formDirective?.labelSelector) {
-            return this.formDirective.labelSelector;
-        }
-    }
-    getWrapperElement() {
-        const wrapper = this.getWrapper(this._elementRef.nativeElement);
-        if (wrapper) {
-            return wrapper;
-        }
-        return this._elementRef.nativeElement;
-    }
-    /*
-      <mat-form-field class="mat-form-field">  <-- Field Wrapper Class. Look for parents from the native element with the matching wrapperSelector. If not found defaults to native element.
-        <input>
-        <div class="fs-form-message"> <-- Message Selector. Look for the element with class .fs-form-message or messageSelector
-          <div class="fs-form-message"></div>
-          <div class="fs-form-hint"></div> <-- Hint Selector. Look for the element with class .fs-form-hint or hintSelector
-        </div>
-      </mat-form-field>
-    */
-    render() {
-        if (this.ngControl) {
-            const renderer = this.renderer2;
-            const wrapper = this.getWrapperElement();
-            const error = this.ngControl.dirty ? this.getError(this.ngControl) : null;
-            const shouldErrorBeRendered = this.ngControl.invalid
-                && (this.ngControl.dirty || this.formDirective?.ngForm?.submitted);
-            if (shouldErrorBeRendered && error) {
-                wrapper.classList.add('ng-invalid', 'ng-dirty');
-            }
-            else {
-                wrapper.classList.remove('ng-invalid');
-            }
-            if (!this.getMessageSelector()) {
-                return;
-            }
-            const messageWrapper = wrapper.querySelector(this.getMessageSelector());
-            if (!messageWrapper) {
-                return console.warn(`Failed to locate ${this.getMessageSelector()}`, this._elementRef.nativeElement);
-            }
-            if (this.getlabelSelector()) {
-                const labelWrapper = wrapper.querySelector(this.getlabelSelector());
-                if (labelWrapper) {
-                    if (this.appendLabelClass) {
-                        this.renderer2.addClass(labelWrapper, this.appendLabelClass);
-                    }
-                }
-            }
-            if (this.appendMessageClass) {
-                renderer.addClass(messageWrapper, this.appendMessageClass);
-            }
-            if (this.getHintWrapperSelector()) {
-                const hint = messageWrapper.querySelector(this.getHintWrapperSelector());
-                if (hint) {
-                    renderer.setStyle(hint, 'display', error ? 'none' : 'block');
-                    if (this.appendHintClass) {
-                        renderer.addClass(hint, this.appendHintClass);
-                    }
-                }
-            }
-            let errorWrapper = wrapper.querySelector('.fs-form-error-target');
-            if (errorWrapper) {
-                errorWrapper.remove();
-            }
-            if (!shouldErrorBeRendered || !error) {
-                return;
-            }
-            errorWrapper = renderer.createElement('div');
-            renderer.addClass(errorWrapper, 'fs-form-error-target');
-            renderer.addClass(errorWrapper, this.appendErrorClass);
-            renderer.addClass(errorWrapper, `${this.appendErrorClass}-${error.name}`);
-            const errorText = renderer.createText(error.message);
-            renderer.appendChild(errorWrapper, errorText);
-            messageWrapper.appendChild(errorWrapper);
-        }
-    }
-    _subscribeToStatusChagnes() {
-        if (this._control) {
-            this._control.statusChanges
-                .pipe(takeUntil(this._destroy$))
-                .subscribe(this.render.bind(this));
-        }
-    }
-    getWrapper(node, count = 0) {
-        if (!node || count > 10) {
-            return null;
-        }
-        if (node.parentNode && node.parentNode.querySelector(this.getWrapperSelector())) {
-            return node;
-        }
-        return this.getWrapper(node.parentNode, ++count);
-    }
-    parseErrorMessage(message, args) {
-        values(args)
-            .forEach((name) => {
-            message = message.replace(/\$\(\d\)/, name);
-        });
-        return message;
-    }
-    getError(controlRef) {
-        const name = keys(controlRef.control.errors)[0];
-        if (!name) {
-            return null;
-        }
-        let message = controlRef.control.errors[name];
-        if (this._validateMessages[name]) {
-            message = this.parseErrorMessage(this._validateMessages[name], message);
-        }
-        return { name: name, message: message };
-    }
-    _setupValidators() {
-        const control = this._control;
-        if (this.validate) {
-            const validators = control.validator
-                ? [control.validator, this.validate.bind(this)]
-                : this.validate.bind(this);
-            control.setValidators(validators);
-        }
-        if (this.validateAsync) {
-            const asyncValidators = control.asyncValidator
-                ? [control.asyncValidator, this.validateAsync.bind(this)]
-                : this.validateAsync.bind(this);
-            control.setAsyncValidators(asyncValidators);
-        }
-        control.updateValueAndValidity();
-    }
-}
-FsControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsControlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormControl]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER,
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [VALIDATE_MESSAGES]
-                }] }, { type: i1$2.NgControl, decorators: [{
-                    type: Optional
-                }] }, { type: FsFormDirective, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FsFormDirective]
-                }] }]; }, propDecorators: { wrapperSelector: [{
-                type: Input
-            }], messageSelector: [{
-                type: Input
-            }], hintSelector: [{
-                type: Input
-            }], labelSelector: [{
-                type: Input
-            }], appendMessageClass: [{
-                type: Input
-            }], appendLabelClass: [{
-                type: Input
-            }], appendErrorClass: [{
-                type: Input
-            }], appendHintClass: [{
-                type: Input
-            }], validateMessages: [{
-                type: Input
+class FsControlDirective {
+    constructor(_elementRef, renderer2, injector, _validateMessages, ngControl, formDirective) {
+        this._elementRef = _elementRef;
+        this.renderer2 = renderer2;
+        this.injector = injector;
+        this._validateMessages = _validateMessages;
+        this.ngControl = ngControl;
+        this.formDirective = formDirective;
+        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;
+        }
+        else {
+            console.error('The element does not have a valid ngModel', this._elementRef.nativeElement);
+        }
+    }
+    set validateMessages(messages) {
+        this._validateMessages = {
+            ...this._validateMessages,
+            ...messages,
+        };
+    }
+    ngOnInit() {
+        this._setupValidators();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    ngAfterContentInit() {
+        this._subscribeToStatusChagnes();
+    }
+    getMessageSelector() {
+        if (this.messageSelector === false) {
+            return '';
+        }
+        if (this.messageSelector) {
+            return this.messageSelector;
+        }
+        else if (this.formDirective?.messageSelector) {
+            return this.formDirective.messageSelector;
+        }
+    }
+    getHintWrapperSelector() {
+        if (this.hintSelector === false) {
+            return '';
+        }
+        if (this.hintSelector) {
+            return this.hintSelector;
+        }
+        else if (this.formDirective?.hintSelector) {
+            return this.formDirective.hintSelector;
+        }
+    }
+    getWrapperSelector() {
+        if (this.wrapperSelector === false) {
+            return '';
+        }
+        if (this.wrapperSelector) {
+            return this.wrapperSelector;
+        }
+        else if (this.formDirective?.wrapperSelector) {
+            return this.formDirective.wrapperSelector;
+        }
+    }
+    getlabelSelector() {
+        if (this.labelSelector === false) {
+            return '';
+        }
+        if (this.labelSelector) {
+            return this.labelSelector;
+        }
+        else if (this.formDirective?.labelSelector) {
+            return this.formDirective.labelSelector;
+        }
+    }
+    getWrapperElement() {
+        const wrapper = this.getWrapper(this._elementRef.nativeElement);
+        if (wrapper) {
+            return wrapper;
+        }
+        return this._elementRef.nativeElement;
+    }
+    /*
+      <mat-form-field class="mat-form-field">  <-- Field Wrapper Class. Look for parents from the native element with the matching wrapperSelector. If not found defaults to native element.
+        <input>
+        <div class="fs-form-message"> <-- Message Selector. Look for the element with class .fs-form-message or messageSelector
+          <div class="fs-form-message"></div>
+          <div class="fs-form-hint"></div> <-- Hint Selector. Look for the element with class .fs-form-hint or hintSelector
+        </div>
+      </mat-form-field>
+    */
+    render() {
+        if (this.ngControl) {
+            const renderer = this.renderer2;
+            const wrapper = this.getWrapperElement();
+            const error = this.ngControl.dirty ? this.getError(this.ngControl) : null;
+            const shouldErrorBeRendered = this.ngControl.invalid
+                && (this.ngControl.dirty || this.formDirective?.ngForm?.submitted);
+            if (shouldErrorBeRendered && error) {
+                wrapper.classList.add('ng-invalid', 'ng-dirty');
+            }
+            else {
+                wrapper.classList.remove('ng-invalid');
+            }
+            if (!this.getMessageSelector()) {
+                return;
+            }
+            const messageWrapper = wrapper.querySelector(this.getMessageSelector());
+            if (!messageWrapper) {
+                return console.warn(`Failed to locate ${this.getMessageSelector()}`, this._elementRef.nativeElement);
+            }
+            if (this.getlabelSelector()) {
+                const labelWrapper = wrapper.querySelector(this.getlabelSelector());
+                if (labelWrapper) {
+                    if (this.appendLabelClass) {
+                        this.renderer2.addClass(labelWrapper, this.appendLabelClass);
+                    }
+                }
+            }
+            if (this.appendMessageClass) {
+                renderer.addClass(messageWrapper, this.appendMessageClass);
+            }
+            if (this.getHintWrapperSelector()) {
+                const hint = messageWrapper.querySelector(this.getHintWrapperSelector());
+                if (hint) {
+                    renderer.setStyle(hint, 'display', error ? 'none' : 'block');
+                    if (this.appendHintClass) {
+                        renderer.addClass(hint, this.appendHintClass);
+                    }
+                }
+            }
+            let errorWrapper = wrapper.querySelector('.fs-form-error-target');
+            if (errorWrapper) {
+                errorWrapper.remove();
+            }
+            if (!shouldErrorBeRendered || !error) {
+                return;
+            }
+            errorWrapper = renderer.createElement('div');
+            renderer.addClass(errorWrapper, 'fs-form-error-target');
+            renderer.addClass(errorWrapper, this.appendErrorClass);
+            renderer.addClass(errorWrapper, `${this.appendErrorClass}-${error.name}`);
+            const errorText = renderer.createText(error.message);
+            renderer.appendChild(errorWrapper, errorText);
+            messageWrapper.appendChild(errorWrapper);
+        }
+    }
+    _subscribeToStatusChagnes() {
+        if (this._control) {
+            this._control.statusChanges
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(this.render.bind(this));
+        }
+    }
+    getWrapper(node, count = 0) {
+        if (!node || count > 10) {
+            return null;
+        }
+        if (node.parentNode && node.parentNode.querySelector(this.getWrapperSelector())) {
+            return node;
+        }
+        return this.getWrapper(node.parentNode, ++count);
+    }
+    parseErrorMessage(message, args) {
+        values(args)
+            .forEach((name) => {
+            message = message.replace(/\$\(\d\)/, name);
+        });
+        return message;
+    }
+    getError(controlRef) {
+        const name = keys(controlRef.control.errors)[0];
+        if (!name) {
+            return null;
+        }
+        let message = controlRef.control.errors[name];
+        if (this._validateMessages[name]) {
+            message = this.parseErrorMessage(this._validateMessages[name], message);
+        }
+        return { name: name, message: message };
+    }
+    _setupValidators() {
+        const control = this._control;
+        if (this.validate) {
+            const validators = control.validator
+                ? [control.validator, this.validate.bind(this)]
+                : this.validate.bind(this);
+            control.setValidators(validators);
+        }
+        if (this.validateAsync) {
+            const asyncValidators = control.asyncValidator
+                ? [control.asyncValidator, this.validateAsync.bind(this)]
+                : this.validateAsync.bind(this);
+            control.setAsyncValidators(asyncValidators);
+        }
+        control.updateValueAndValidity();
+    }
+}
+FsControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormControl]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER,
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [VALIDATE_MESSAGES]
+                }] }, { type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }] }, { type: FsFormDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FsFormDirective]
+                }] }]; }, propDecorators: { wrapperSelector: [{
+                type: Input
+            }], messageSelector: [{
+                type: Input
+            }], hintSelector: [{
+                type: Input
+            }], labelSelector: [{
+                type: Input
+            }], appendMessageClass: [{
+                type: Input
+            }], appendLabelClass: [{
+                type: Input
+            }], appendErrorClass: [{
+                type: Input
+            }], appendHintClass: [{
+                type: Input
+            }], validateMessages: [{
+                type: Input
             }] } });
 
-class FsFormCompareDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.compare = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (this.fsFormCompare.value === this._elementRef.nativeElement.value) {
-            return null;
-        }
-        return { compare: true };
-    }
-    ngAfterViewInit() {
-        this.fsFormCompare.addEventListener('keyup', () => {
-            this._control.updateValueAndValidity();
-        }, false);
-    }
-    ngOnDestroy() {
-        this.fsFormCompare.removeEventListener('keyup', () => {
-            this._control.updateValueAndValidity();
-        }, false);
-    }
-}
-FsFormCompareDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormCompareDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormCompareDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormCompareDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormCompare]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER,
-                    ],
-                }]
-        }], propDecorators: { fsFormCompare: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormCompareMessage']
+class FsFormCompareDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.compare = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (this.fsFormCompare.value === this._elementRef.nativeElement.value) {
+            return null;
+        }
+        return { compare: true };
+    }
+    ngAfterViewInit() {
+        this.fsFormCompare.addEventListener('keyup', () => {
+            this._control.updateValueAndValidity();
+        }, false);
+    }
+    ngOnDestroy() {
+        this.fsFormCompare.removeEventListener('keyup', () => {
+            this._control.updateValueAndValidity();
+        }, false);
+    }
+}
+FsFormCompareDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormCompareDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormCompareDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormCompareDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormCompare]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER,
+                    ],
+                }]
+        }], propDecorators: { fsFormCompare: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormCompareMessage']
             }] } });
 
-class FsValidators {
-    static email(control) {
-        if (!control.value || email(control.value)) {
-            return null;
-        }
-        return { email: true };
-    }
-    static emails(control) {
-        const model = control.value || '';
-        const hasInvalidEmails = model
-            .split(',')
-            .some((part) => !email(part));
-        return hasInvalidEmails ? { email: true } : null;
-    }
-    static numeric(control) {
-        if (isEmpty(control.value) || isNumeric(control.value)) {
-            return null;
-        }
-        return { numeric: true };
-    }
-    static integer(control) {
-        if (!control.value || String(control.value) === '' || (control.value % 1 === 0)) {
-            return null;
-        }
-        return { integer: true };
-    }
-    static phone(control) {
-        if (!control.value || phone(control.value)) {
-            return null;
-        }
-        return { phone: true };
-    }
-    static url(control, protocolRequired = false) {
-        if (!control.value) {
-            return null;
-        }
-        if (!url(control.value)) {
-            return { url: true };
-        }
-        if (protocolRequired) {
-            const pattern = new RegExp(/^http(s)?:\/\//gm);
-            if (!String(control.value).match(pattern)) {
-                return { urlProtocol: true };
-            }
-        }
-        return null;
-    }
-    static dateRange(control) {
-        if (!control.value) {
-            return null;
-        }
-        if (isObject(control.value)) {
-            const start = control.value.start;
-            const end = control.value.end;
-            if ((!start && !end) || (isValid(start) && isValid(end))) {
-                return null;
-            }
-        }
-        return { dateRange: true };
-    }
-    static func(control, formFunction, data) {
-        let result;
-        let stream$;
-        try {
-            result = formFunction(control, data);
-        }
-        catch (err) {
-            const error = err instanceof Error ? err.message : err;
-            stream$ = throwError(error);
-        }
-        if (!stream$) {
-            if (result instanceof Promise) {
-                stream$ = from(result);
-            }
-            else if (isObservable(result)) {
-                stream$ = result;
-            }
-            else {
-                stream$ = of(null);
-            }
-        }
-        return stream$
-            .pipe(mapTo(null), catchError((err) => {
-            return of({ validationError: err });
-        }), take(1));
-    }
+class FsValidators {
+    static email(control) {
+        if (!control.value || email(control.value)) {
+            return null;
+        }
+        return { email: true };
+    }
+    static emails(control) {
+        const model = control.value || '';
+        const hasInvalidEmails = model
+            .split(',')
+            .some((part) => !email(part));
+        return hasInvalidEmails ? { email: true } : null;
+    }
+    static numeric(control) {
+        if (isEmpty(control.value) || isNumeric(control.value)) {
+            return null;
+        }
+        return { numeric: true };
+    }
+    static integer(control) {
+        if (!control.value || String(control.value) === '' || (control.value % 1 === 0)) {
+            return null;
+        }
+        return { integer: true };
+    }
+    static phone(control) {
+        if (!control.value || phone(control.value)) {
+            return null;
+        }
+        return { phone: true };
+    }
+    static url(control, protocolRequired = false) {
+        if (!control.value) {
+            return null;
+        }
+        if (!url(control.value)) {
+            return { url: true };
+        }
+        if (protocolRequired) {
+            const pattern = new RegExp(/^http(s)?:\/\//gm);
+            if (!String(control.value).match(pattern)) {
+                return { urlProtocol: true };
+            }
+        }
+        return null;
+    }
+    static dateRange(control) {
+        if (!control.value) {
+            return null;
+        }
+        if (isObject(control.value)) {
+            const start = control.value.start;
+            const end = control.value.end;
+            if ((!start && !end) || (isValid(start) && isValid(end))) {
+                return null;
+            }
+        }
+        return { dateRange: true };
+    }
+    static func(control, formFunction, data) {
+        let result;
+        let stream$;
+        try {
+            result = formFunction(control, data);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err.message : err;
+            stream$ = throwError(error);
+        }
+        if (!stream$) {
+            if (result instanceof Promise) {
+                stream$ = from(result);
+            }
+            else if (isObservable(result)) {
+                stream$ = result;
+            }
+            else {
+                stream$ = of(null);
+            }
+        }
+        return stream$
+            .pipe(mapTo(null), catchError((err) => {
+            return of({ validationError: err });
+        }), take(1));
+    }
 }
 
-function isEnabled(value) {
-    return value !== 'false' && (value || value === '');
+function isEnabled(value) {
+    return value !== 'false' && (value || value === '');
 }
 
-class FsFormDateRangeDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.dateRange = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormDateRange)) {
-            return FsValidators.dateRange(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-}
-FsFormDateRangeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormDateRangeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormDateRangeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormDateRangeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormDateRange]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormDateRange: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormDateRangeMessage']
+class FsFormDateRangeDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.dateRange = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormDateRange)) {
+            return FsValidators.dateRange(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+}
+FsFormDateRangeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormDateRangeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormDateRangeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormDateRangeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormDateRange]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormDateRange: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormDateRangeMessage']
             }] } });
 
-class FsFormEmailDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.email = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormEmail)) {
-            return FsValidators.email(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-}
-FsFormEmailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormEmailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormEmailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormEmailDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormEmail]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormEmail: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormEmailMessage']
+class FsFormEmailDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.email = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormEmail)) {
+            return FsValidators.email(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+}
+FsFormEmailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormEmailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormEmailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormEmailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormEmail]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormEmail: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormEmailMessage']
             }] } });
 
-class FsFormEmailsDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.emails = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormEmails)) {
-            return FsValidators.emails(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-}
-FsFormEmailsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormEmailsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormEmailsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormEmailsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormEmails]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormEmails: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormEmailsMessage']
+class FsFormEmailsDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.emails = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormEmails)) {
+            return FsValidators.emails(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+}
+FsFormEmailsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormEmailsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormEmailsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormEmailsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormEmails]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormEmails: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormEmailsMessage']
             }] } });
 
-class FsFormFunctionDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.validateOnSubmit = false;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validateAsync(control) {
-        if (this.validateOnSubmit && !this.formDirective.validating) {
-            return of(null);
-        }
-        return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
-    }
-}
-FsFormFunctionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormFunctionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormFunctionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormFunctionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormFunction]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER,
-                    ],
-                }]
-        }], propDecorators: { fsFormFunction: [{
-                type: Input
-            }], fsFormFunctionData: [{
-                type: Input
-            }], validateOnSubmit: [{
-                type: Input
+class FsFormFunctionDirective extends FsControlDirective {
+    constructor() {
+        super(...arguments);
+        this.validateOnSubmit = false;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validateAsync(control) {
+        if (this.validateOnSubmit && !this.formDirective.validating) {
+            return of(null);
+        }
+        return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
+    }
+}
+FsFormFunctionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormFunctionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormFunctionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormFunctionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormFunction]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER,
+                    ],
+                }]
+        }], propDecorators: { fsFormFunction: [{
+                type: Input
+            }], fsFormFunctionData: [{
+                type: Input
+            }], validateOnSubmit: [{
+                type: Input
             }] } });
 
-class FsFormGreaterEqualDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.greater = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        const greater = parseFloat(this.fsFormGreaterEqual);
-        const value = parseFloat(this._control.value);
-        if (!isNaN(greater) && !isNaN(value) && value < greater) {
-            return { greaterEqual: { greater, actual: value } };
-        }
-        return FsValidators.numeric(this._control);
-    }
-}
-FsFormGreaterEqualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormGreaterEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormGreaterEqualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormGreaterEqualDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormGreaterEqual]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormGreaterEqual: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormGreaterEqualMessage']
+class FsFormGreaterEqualDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.greater = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        const greater = parseFloat(this.fsFormGreaterEqual);
+        const value = parseFloat(this._control.value);
+        if (!isNaN(greater) && !isNaN(value) && value < greater) {
+            return { greaterEqual: { greater, actual: value } };
+        }
+        return FsValidators.numeric(this._control);
+    }
+}
+FsFormGreaterEqualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormGreaterEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormGreaterEqualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormGreaterEqualDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormGreaterEqual]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormGreaterEqual: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormGreaterEqualMessage']
             }] } });
 
-class FsFormGreaterDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.greater = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        const greater = parseFloat(this.fsFormGreater);
-        const value = parseFloat(this._control.value);
-        if (!isNaN(greater) && !isNaN(value) && value <= greater) {
-            return { greater: { greater, actual: value } };
-        }
-        return FsValidators.numeric(this._control);
-    }
-}
-FsFormGreaterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormGreaterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormGreaterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormGreaterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormGreater]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormGreater: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormGreaterMessage']
+class FsFormGreaterDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.greater = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        const greater = parseFloat(this.fsFormGreater);
+        const value = parseFloat(this._control.value);
+        if (!isNaN(greater) && !isNaN(value) && value <= greater) {
+            return { greater: { greater, actual: value } };
+        }
+        return FsValidators.numeric(this._control);
+    }
+}
+FsFormGreaterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormGreaterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormGreaterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormGreaterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormGreater]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormGreater: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormGreaterMessage']
             }] } });
 
-class FsFormIntegerDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.integer = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormInteger)) {
-            return FsValidators.integer(this._control);
-        }
-        return null;
-    }
-}
-FsFormIntegerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormIntegerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormIntegerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormIntegerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormInteger]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER,
-                    ],
-                }]
-        }], propDecorators: { fsFormInteger: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormIntegerMessage']
+class FsFormIntegerDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.integer = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormInteger)) {
+            return FsValidators.integer(this._control);
+        }
+        return null;
+    }
+}
+FsFormIntegerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormIntegerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormIntegerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormIntegerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormInteger]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER,
+                    ],
+                }]
+        }], propDecorators: { fsFormInteger: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormIntegerMessage']
             }] } });
 
-class FsFormLesserEqualDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.lesser = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        const lesser = parseFloat(this.fsFormLesserEqual);
-        const value = parseFloat(this._control.value);
-        if (!isNaN(lesser) && !isNaN(value) && value > lesser) {
-            return { lesserEqual: { lesser, actual: value } };
-        }
-        return FsValidators.numeric(this._control);
-    }
-}
-FsFormLesserEqualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormLesserEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormLesserEqualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormLesserEqualDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormLesserEqual]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormLesserEqual: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormLesserEqualMessage']
+class FsFormLesserEqualDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.lesser = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        const lesser = parseFloat(this.fsFormLesserEqual);
+        const value = parseFloat(this._control.value);
+        if (!isNaN(lesser) && !isNaN(value) && value > lesser) {
+            return { lesserEqual: { lesser, actual: value } };
+        }
+        return FsValidators.numeric(this._control);
+    }
+}
+FsFormLesserEqualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormLesserEqualDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormLesserEqualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormLesserEqualDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormLesserEqual]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormLesserEqual: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormLesserEqualMessage']
             }] } });
 
-class FsFormLesserDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.lesser = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        const lesser = parseFloat(this.fsFormLesser);
-        const value = parseFloat(this._control.value);
-        if (!isNaN(lesser) && !isNaN(value) && value >= lesser) {
-            return { lesser: { lesser, actual: value } };
-        }
-        return FsValidators.numeric(this._control);
-    }
-}
-FsFormLesserDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormLesserDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormLesserDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormLesserDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormLesser]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormLesser: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormLesserMessage']
+class FsFormLesserDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.lesser = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        const lesser = parseFloat(this.fsFormLesser);
+        const value = parseFloat(this._control.value);
+        if (!isNaN(lesser) && !isNaN(value) && value >= lesser) {
+            return { lesser: { lesser, actual: value } };
+        }
+        return FsValidators.numeric(this._control);
+    }
+}
+FsFormLesserDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormLesserDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormLesserDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormLesserDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormLesser]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormLesser: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormLesserMessage']
             }] } });
 
-class FsFormMaxDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.max = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        return FsValidators.numeric(this._control) || Validators.max(this.fsFormMax)(this._control);
-    }
-}
-FsFormMaxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormMaxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormMaxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormMaxDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormMax]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormMax: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormMaxMessage']
+class FsFormMaxDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.max = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        return FsValidators.numeric(this._control) || Validators.max(this.fsFormMax)(this._control);
+    }
+}
+FsFormMaxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormMaxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormMaxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormMaxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormMax]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormMax: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormMaxMessage']
             }] } });
 
-class FsFormMaxLengthDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.maxlength = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        return Validators.maxLength(this.fsFormMaxLength)(this._control);
-    }
-}
-FsFormMaxLengthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormMaxLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormMaxLengthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormMaxLengthDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormMaxLength]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormMaxLength: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormMaxLengthMessage']
+class FsFormMaxLengthDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.maxlength = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        return Validators.maxLength(this.fsFormMaxLength)(this._control);
+    }
+}
+FsFormMaxLengthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormMaxLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormMaxLengthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormMaxLengthDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormMaxLength]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormMaxLength: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormMaxLengthMessage']
             }] } });
 
-class FsFormMinDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.min = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        return FsValidators.numeric(this._control) || Validators.min(parseFloat(this.fsFormMin))(this._control);
-    }
-}
-FsFormMinDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormMinDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormMinDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormMinDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormMin]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormMin: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormMinMessage']
+class FsFormMinDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.min = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        return FsValidators.numeric(this._control) || Validators.min(parseFloat(this.fsFormMin))(this._control);
+    }
+}
+FsFormMinDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormMinDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormMinDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormMinDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormMin]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormMin: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormMinMessage']
             }] } });
 
-class FsFormMinLengthDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.minlength = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        return Validators.minLength(this.fsFormMinLength)(this._control);
-    }
-}
-FsFormMinLengthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormMinLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormMinLengthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormMinLengthDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormMinLength]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormMinLength: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormMinLengthMessage']
+class FsFormMinLengthDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.minlength = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        return Validators.minLength(this.fsFormMinLength)(this._control);
+    }
+}
+FsFormMinLengthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormMinLengthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormMinLengthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormMinLengthDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormMinLength]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormMinLength: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormMinLengthMessage']
             }] } });
 
-/**
- * This directive required for cases when we have custom Control like <fs-phone-field> but without any of our validators applied
- *
- * This directive required for automatic validation messages
- */
-class FsFormNoFsValidatorsDirective extends FsControlDirective {
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    _subscribeToStatusChagnes() {
-        if (!!this._control.validator || !!this._control.asyncValidator) {
-            super._subscribeToStatusChagnes();
-        }
-    }
-}
-FsFormNoFsValidatorsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormNoFsValidatorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormNoFsValidatorsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormNoFsValidatorsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    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
-                    ],
-                }]
+/**
+ * This directive required for cases when we have custom Control like <fs-phone-field> but without any of our validators applied
+ *
+ * This directive required for automatic validation messages
+ */
+class FsFormNoFsValidatorsDirective extends FsControlDirective {
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    _subscribeToStatusChagnes() {
+        if (!!this._control.validator || !!this._control.asyncValidator) {
+            super._subscribeToStatusChagnes();
+        }
+    }
+}
+FsFormNoFsValidatorsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormNoFsValidatorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormNoFsValidatorsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormNoFsValidatorsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    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
+                    ],
+                }]
         }] });
 
-class FsFormNumericDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.numeric = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormNumeric)) {
-            return FsValidators.numeric(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-}
-FsFormNumericDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormNumericDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormNumericDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormNumericDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormNumeric]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormNumeric: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormNumericMessage']
+class FsFormNumericDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.numeric = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormNumeric)) {
+            return FsValidators.numeric(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+}
+FsFormNumericDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormNumericDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormNumericDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormNumericDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormNumeric]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormNumeric: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormNumericMessage']
             }] } });
 
-class FsFormPatternDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.pattern = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        return Validators.pattern(this.fsFormPattern)(this._control);
-    }
-}
-FsFormPatternDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormPatternDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormPatternDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormPatternDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormPattern]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormPattern: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormPatternMessage']
+class FsFormPatternDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.pattern = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        return Validators.pattern(this.fsFormPattern)(this._control);
+    }
+}
+FsFormPatternDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormPatternDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormPatternDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormPatternDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormPattern]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormPattern: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormPatternMessage']
             }] } });
 
-class FsFormPhoneDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.phone = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormPhone)) {
-            return FsValidators.phone(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-}
-FsFormPhoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormPhoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormPhoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormPhoneDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormPhone]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { fsFormPhone: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormPhoneMessage']
+class FsFormPhoneDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.phone = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormPhone)) {
+            return FsValidators.phone(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+}
+FsFormPhoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormPhoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormPhoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormPhoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormPhone]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { fsFormPhone: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormPhoneMessage']
             }] } });
 
-class FsFormRequiredDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.required = false;
-    }
-    set setFsFormRequired(value) {
-        this.required = isEnabled(value);
-    }
-    set setRequired(value) {
-        this.required = isEnabled(value);
-    }
-    set validationMessage(value) {
-        this._validateMessages.required = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (this.required) {
-            return Validators.required(this._control);
-        }
-        return null;
-    }
-    render() {
-        const wrapper = this.getWrapperElement();
-        if (wrapper && this.getlabelSelector()) {
-            const labelWrapper = wrapper.querySelector(this.getlabelSelector());
-            // Adding class fs-form-label-requried adds the * to the label
-            if (labelWrapper) {
-                if (this.required) {
-                    this.renderer2.addClass(labelWrapper, 'fs-form-label-required');
-                }
-                else {
-                    this.renderer2.removeClass(labelWrapper, 'fs-form-label-required');
-                }
-            }
-        }
-        super.render();
-    }
-}
-FsFormRequiredDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormRequiredDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormRequiredDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormRequiredDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormRequired],[ngModel][required]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER,
-                    ],
-                }]
-        }], propDecorators: { setFsFormRequired: [{
-                type: Input,
-                args: ['fsFormRequired']
-            }], setRequired: [{
-                type: Input,
-                args: ['required']
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormRequiredMessage']
+class FsFormRequiredDirective extends FsControlDirective {
+    constructor() {
+        super(...arguments);
+        this.required = false;
+    }
+    set setFsFormRequired(value) {
+        this.required = isEnabled(value);
+    }
+    set setRequired(value) {
+        this.required = isEnabled(value);
+    }
+    set validationMessage(value) {
+        this._validateMessages.required = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (this.required) {
+            return Validators.required(this._control);
+        }
+        return null;
+    }
+    render() {
+        const wrapper = this.getWrapperElement();
+        if (wrapper && this.getlabelSelector()) {
+            const labelWrapper = wrapper.querySelector(this.getlabelSelector());
+            // Adding class fs-form-label-requried adds the * to the label
+            if (labelWrapper) {
+                if (this.required) {
+                    this.renderer2.addClass(labelWrapper, 'fs-form-label-required');
+                }
+                else {
+                    this.renderer2.removeClass(labelWrapper, 'fs-form-label-required');
+                }
+            }
+        }
+        super.render();
+    }
+}
+FsFormRequiredDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormRequiredDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormRequiredDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormRequiredDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormRequired],[ngModel][required]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER,
+                    ],
+                }]
+        }], propDecorators: { setFsFormRequired: [{
+                type: Input,
+                args: ['fsFormRequired']
+            }], setRequired: [{
+                type: Input,
+                args: ['required']
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormRequiredMessage']
             }] } });
 
-class FsFormUrlDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.fsFormUrlProtocol = true;
-    }
-    set validationMessage(value) {
-        this._validateMessages.url = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormUrl)) {
-            return FsValidators.url(this._control, this.fsFormUrlProtocol);
-        }
-        return null;
-    }
-}
-FsFormUrlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormUrlDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormUrlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormUrlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormUrl]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER,
-                    ],
-                }]
-        }], propDecorators: { fsFormUrl: [{
-                type: Input
-            }], fsFormUrlProtocol: [{
-                type: Input
-            }], validationMessage: [{
-                type: Input,
-                args: ['fsFormUrlMessage']
+class FsFormUrlDirective extends FsControlDirective {
+    constructor() {
+        super(...arguments);
+        this.fsFormUrlProtocol = true;
+    }
+    set validationMessage(value) {
+        this._validateMessages.url = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormUrl)) {
+            return FsValidators.url(this._control, this.fsFormUrlProtocol);
+        }
+        return null;
+    }
+}
+FsFormUrlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormUrlDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormUrlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormUrlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormUrl]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER,
+                    ],
+                }]
+        }], propDecorators: { fsFormUrl: [{
+                type: Input
+            }], fsFormUrlProtocol: [{
+                type: Input
+            }], validationMessage: [{
+                type: Input,
+                args: ['fsFormUrlMessage']
             }] } });
 
-class FsFormValidateDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.validateOnSubmit = false;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validateAsync(control) {
-        if (this.validateOnSubmit && !this.formDirective.validating) {
-            return of(null);
-        }
-        return FsValidators.func(this._control, this.validateFn, this.validateFnData);
-    }
-}
-FsFormValidateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormValidateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormValidateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormValidateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[validate]',
-                    providers: [
-                        VALIDATE_MESSAGE_PROVIDER
-                    ],
-                }]
-        }], propDecorators: { validateFn: [{
-                type: Input,
-                args: ['validate']
-            }], validateFnData: [{
-                type: Input,
-                args: ['validateData']
-            }], validateOnSubmit: [{
-                type: Input
+class FsFormValidateDirective extends FsControlDirective {
+    constructor() {
+        super(...arguments);
+        this.validateOnSubmit = false;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validateAsync(control) {
+        if (this.validateOnSubmit && !this.formDirective.validating) {
+            return of(null);
+        }
+        return FsValidators.func(this._control, this.validateFn, this.validateFnData);
+    }
+}
+FsFormValidateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormValidateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsFormValidateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormValidateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[validate]',
+                    providers: [
+                        VALIDATE_MESSAGE_PROVIDER
+                    ],
+                }]
+        }], propDecorators: { validateFn: [{
+                type: Input,
+                args: ['validate']
+            }], validateFnData: [{
+                type: Input,
+                args: ['validateData']
+            }], validateOnSubmit: [{
+                type: Input
             }] } });
 
-class FsFormModule {
-    static forRoot() {
-        /**
-         * Hack: https://github.com/angular/components/issues/20097
-         */
-        ErrorStateMatcher.prototype
-            .isErrorState = (control, form) => {
-            return control?.invalid && control?.touched && control?.dirty;
-        };
-        return {
-            ngModule: FsFormModule,
-        };
-    }
-}
-FsFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormModule, providers: [
-        {
-            provide: ErrorStateMatcher,
-            useClass: ShowOnDirtyErrorStateMatcher,
-        },
-    ], imports: [[
-            CommonModule,
-            FormsModule,
-            MatButtonModule,
-            MatDialogModule,
-            MatDialogModule,
-            FsDialogModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        MatDialogModule,
-                        FsDialogModule,
-                    ],
-                    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,
-                    ],
-                    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,
-                    ],
-                    providers: [
-                        {
-                            provide: ErrorStateMatcher,
-                            useClass: ShowOnDirtyErrorStateMatcher,
-                        },
-                    ],
-                }]
+class FsFormModule {
+    static forRoot() {
+        /**
+         * Hack: https://github.com/angular/components/issues/20097
+         */
+        ErrorStateMatcher.prototype
+            .isErrorState = (control, form) => {
+            return control?.invalid && control?.touched && control?.dirty;
+        };
+        return {
+            ngModule: FsFormModule,
+        };
+    }
+}
+FsFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: FsFormModule, providers: [
+        {
+            provide: ErrorStateMatcher,
+            useClass: ShowOnDirtyErrorStateMatcher,
+        },
+    ], imports: [[
+            CommonModule,
+            FormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatDialogModule,
+            FsDialogModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatDialogModule,
+                        FsDialogModule,
+                    ],
+                    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,
+                    ],
+                    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,
+                    ],
+                    providers: [
+                        {
+                            provide: ErrorStateMatcher,
+                            useClass: ShowOnDirtyErrorStateMatcher,
+                        },
+                    ],
+                }]
         }] });
 
 // Modules
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ConfirmResult, FormDeactivateGuard, FormStatus, FsButtonDirective, FsControlDirective, FsForm, FsFormCompareDirective, FsFormDateRangeDirective, FsFormDialogActionsComponent, FsFormDialogCloseDirective, FsFormDirective, FsFormEmailDirective, FsFormEmailsDirective, FsFormFunctionDirective, FsFormGreaterDirective, FsFormGreaterEqualDirective, FsFormIntegerDirective, FsFormLesserDirective, FsFormLesserEqualDirective, FsFormMaxDirective, FsFormMaxLengthDirective, FsFormMinDirective, FsFormMinLengthDirective, FsFormModule, FsFormNoFsValidatorsDirective, FsFormNumericDirective, FsFormPatternDirective, FsFormPhoneDirective, FsFormRequiredDirective, FsFormTemplateComponent, FsFormTemplateDirective, FsFormTemplateOutletComponent, FsFormUrlDirective, FsFormValidateDirective, FsSubmitButtonDirective, FsValidators };