@firestitch/form 9.7.6 → 9.7.7

package/bundles/firestitch-form.umd.js

@@ -218,2377 +218,2374 @@
         return value;
     }
 
-    (function (ConfirmResult) {
-        ConfirmResult["Save"] = "save";
-        ConfirmResult["Discard"] = "discard";
-        ConfirmResult["Review"] = "review";
-        ConfirmResult["Invalid"] = "invalid";
-        ConfirmResult["Pristine"] = "pristine";
+    (function (ConfirmResult) {
+        ConfirmResult["Save"] = "save";
+        ConfirmResult["Discard"] = "discard";
+        ConfirmResult["Review"] = "review";
+        ConfirmResult["Invalid"] = "invalid";
+        ConfirmResult["Pristine"] = "pristine";
     })(exports.ConfirmResult || (exports.ConfirmResult = {}));
 
-    function confirmUnsaved(form, prompt) {
-        return new rxjs.Observable(function (observer) {
-            if (!form.confirm || !form.ngForm.dirty) {
-                observer.next(exports.ConfirmResult.Pristine);
-                observer.complete();
-                return;
-            }
-            var title = 'You Have Unsaved Changes';
-            var message = 'What would you like to do with your changes?';
-            var saveLabel = 'Save & Continue';
-            var discardLabel = 'Discard Changes & Continue';
-            var 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;
-            }
-            prompt.confirm({
-                title: title,
-                template: message,
-                dialogConfig: { width: 'auto' },
-                buttons: [
-                    {
-                        label: saveLabel,
-                        color: 'primary',
-                        value: 'save'
-                    },
-                    {
-                        label: discardLabel,
-                        value: 'discard'
-                    },
-                    {
-                        label: cancelLabel,
-                        cancel: true
-                    }
-                ]
-            }).subscribe(function (value) {
-                if (value === 'discard') {
-                    observer.next(exports.ConfirmResult.Discard);
-                    observer.complete();
-                    form.reset();
-                }
-                if (value === 'save') {
-                    form.submitted
-                        .pipe(operators.first())
-                        .subscribe(function () {
-                        observer.next(exports.ConfirmResult.Save);
-                        observer.complete();
-                    });
-                    form.invalid
-                        .pipe(operators.first())
-                        .subscribe(function () {
-                        observer.next(exports.ConfirmResult.Invalid);
-                        observer.complete();
-                    });
-                    form.ngForm.control.markAsPristine();
-                    form.ngForm.ngSubmit.emit();
-                }
-            }, function (error) {
-                observer.next(exports.ConfirmResult.Review);
-                observer.complete();
-            });
-        });
+    function confirmUnsaved(form, prompt) {
+        return new rxjs.Observable(function (observer) {
+            if (!form.confirm || !form.ngForm.dirty) {
+                observer.next(exports.ConfirmResult.Pristine);
+                observer.complete();
+                return;
+            }
+            var title = 'You Have Unsaved Changes';
+            var message = 'What would you like to do with your changes?';
+            var saveLabel = 'Save & Continue';
+            var discardLabel = 'Discard Changes & Continue';
+            var 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;
+            }
+            prompt.confirm({
+                title: title,
+                template: message,
+                dialogConfig: { width: 'auto' },
+                buttons: [
+                    {
+                        label: saveLabel,
+                        color: 'primary',
+                        value: 'save'
+                    },
+                    {
+                        label: discardLabel,
+                        value: 'discard'
+                    },
+                    {
+                        label: cancelLabel,
+                        cancel: true
+                    }
+                ]
+            }).subscribe(function (value) {
+                if (value === 'discard') {
+                    observer.next(exports.ConfirmResult.Discard);
+                    observer.complete();
+                    form.reset();
+                }
+                if (value === 'save') {
+                    form.submitted
+                        .pipe(operators.first())
+                        .subscribe(function () {
+                        observer.next(exports.ConfirmResult.Save);
+                        observer.complete();
+                    });
+                    form.invalid
+                        .pipe(operators.first())
+                        .subscribe(function () {
+                        observer.next(exports.ConfirmResult.Invalid);
+                        observer.complete();
+                    });
+                    form.ngForm.control.markAsPristine();
+                    form.ngForm.ngSubmit.emit();
+                }
+            }, function (error) {
+                observer.next(exports.ConfirmResult.Review);
+                observer.complete();
+            });
+        });
     }
 
-    var FsFormDialogCloseDirective = /** @class */ (function () {
-        function FsFormDialogCloseDirective() {
-            this.clicked$ = new rxjs.Subject();
-            this.registered = false;
-            this.type = 'button';
-        }
-        FsFormDialogCloseDirective.prototype.click = function () {
-            this.clicked$.next();
-        };
-        FsFormDialogCloseDirective.prototype.ngOnDestroy = function () {
-            this.clicked$.complete();
-        };
-        __decorate([
-            core.HostBinding('attr.type'),
-            __metadata("design:type", Object)
-        ], FsFormDialogCloseDirective.prototype, "type", void 0);
-        __decorate([
-            core.HostListener('click', ['$event.target']),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], FsFormDialogCloseDirective.prototype, "click", null);
-        FsFormDialogCloseDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormDialogClose],[fs-form-dialog-close]'
-            })
-        ], FsFormDialogCloseDirective);
-        return FsFormDialogCloseDirective;
+    var FsFormDialogCloseDirective = /** @class */ (function () {
+        function FsFormDialogCloseDirective() {
+            this.clicked$ = new rxjs.Subject();
+            this.registered = false;
+            this.type = 'button';
+        }
+        FsFormDialogCloseDirective.prototype.click = function () {
+            this.clicked$.next();
+        };
+        FsFormDialogCloseDirective.prototype.ngOnDestroy = function () {
+            this.clicked$.complete();
+        };
+        __decorate([
+            core.HostBinding('attr.type'),
+            __metadata("design:type", Object)
+        ], FsFormDialogCloseDirective.prototype, "type", void 0);
+        __decorate([
+            core.HostListener('click', ['$event.target']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], FsFormDialogCloseDirective.prototype, "click", null);
+        FsFormDialogCloseDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormDialogClose],[fs-form-dialog-close]'
+            })
+        ], FsFormDialogCloseDirective);
+        return FsFormDialogCloseDirective;
     }());
 
-    var FsForm = /** @class */ (function () {
-        function FsForm() {
-            this._eventBus = new rxjs.Subject();
-        }
-        FsForm.prototype.broadcast = function (key, data) {
-            this._eventBus.next({ key: key, data: data });
-        };
-        FsForm.prototype.on = function (key) {
-            return this._eventBus.asObservable()
-                .pipe(operators.filter(function (event) { return event.key === key; }), operators.map(function (event) { return event.data; }));
-        };
-        FsForm.ɵprov = core.ɵɵdefineInjectable({ factory: function FsForm_Factory() { return new FsForm(); }, token: FsForm, providedIn: "root" });
-        FsForm = __decorate([
-            core.Injectable({
-                providedIn: 'root',
-            }),
-            __metadata("design:paramtypes", [])
-        ], FsForm);
-        return FsForm;
+    var FsForm = /** @class */ (function () {
+        function FsForm() {
+            this._eventBus = new rxjs.Subject();
+        }
+        FsForm.prototype.broadcast = function (key, data) {
+            this._eventBus.next({ key: key, data: data });
+        };
+        FsForm.prototype.on = function (key) {
+            return this._eventBus.asObservable()
+                .pipe(operators.filter(function (event) { return event.key === key; }), operators.map(function (event) { return event.data; }));
+        };
+        FsForm.ɵprov = core.ɵɵdefineInjectable({ factory: function FsForm_Factory() { return new FsForm(); }, token: FsForm, providedIn: "root" });
+        FsForm = __decorate([
+            core.Injectable({
+                providedIn: 'root',
+            }),
+            __metadata("design:paramtypes", [])
+        ], FsForm);
+        return FsForm;
     }());
 
-
-    (function (FormStatus) {
-        FormStatus["Valid"] = "valid";
-        FormStatus["Invalid"] = "invalid";
-        FormStatus["Submitting"] = "submitting";
-        FormStatus["Submitted"] = "submitted";
-        FormStatus["Error"] = "error";
-        FormStatus["Success"] = "success";
-        FormStatus["Completing"] = "completing";
+
+    (function (FormStatus) {
+        FormStatus["Valid"] = "valid";
+        FormStatus["Invalid"] = "invalid";
+        FormStatus["Submitting"] = "submitting";
+        FormStatus["Submitted"] = "submitted";
+        FormStatus["Error"] = "error";
+        FormStatus["Success"] = "success";
+        FormStatus["Completing"] = "completing";
     })(exports.FormStatus || (exports.FormStatus = {}));
 
-    function confirmResultContinue(result) {
-        return result === exports.ConfirmResult.Discard || result === exports.ConfirmResult.Save || result === exports.ConfirmResult.Pristine;
+    function confirmResultContinue(result) {
+        return result === exports.ConfirmResult.Discard || result === exports.ConfirmResult.Save || result === exports.ConfirmResult.Pristine;
     }
 
-    function getFormErrors(control, key) {
-        var _a;
-        var errors = null;
-        if (control.invalid && control.errors) {
-            errors = (_a = {},
-                _a[key] = __assign({}, control.errors),
-                _a);
-        }
-        if (control instanceof forms.FormGroup) {
-            Object.entries(control.controls)
-                .forEach(function (_a) {
-                var _b = __read(_a, 2), name = _b[0], childControl = _b[1];
-                var childErrors = getFormErrors(childControl, name);
-                if (childErrors) {
-                    if (!errors) {
-                        errors = __assign({}, childErrors);
-                    }
-                    else {
-                        Object.assign(errors, childErrors);
-                    }
-                }
-            });
-        }
-        return errors;
+    function getFormErrors(control, key) {
+        var _a;
+        var errors = null;
+        if (control.invalid && control.errors) {
+            errors = (_a = {},
+                _a[key] = __assign({}, control.errors),
+                _a);
+        }
+        if (control instanceof forms.FormGroup) {
+            Object.entries(control.controls)
+                .forEach(function (_a) {
+                var _b = __read(_a, 2), name = _b[0], childControl = _b[1];
+                var childErrors = getFormErrors(childControl, name);
+                if (childErrors) {
+                    if (!errors) {
+                        errors = __assign({}, childErrors);
+                    }
+                    else {
+                        Object.assign(errors, childErrors);
+                    }
+                }
+            });
+        }
+        return errors;
     }
 
-    var FsFormDirective = /** @class */ (function () {
-        function FsFormDirective(ngForm, _form, _element, _message, _prompt, _ngZone, _dialogRef, _drawerRef) {
-            this.ngForm = ngForm;
-            this._form = _form;
-            this._element = _element;
-            this._message = _message;
-            this._prompt = _prompt;
-            this._ngZone = _ngZone;
-            this._dialogRef = _dialogRef;
-            this._drawerRef = _drawerRef;
-            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.submitEvent = new core.EventEmitter();
-            this.invalid = new core.EventEmitter();
-            this.valid = new core.EventEmitter();
-            this.submitted = new core.EventEmitter();
-            this.reseted = new core.EventEmitter();
-            this.cleared = new core.EventEmitter();
-            this.fsformClass = true;
-            this._tabGroups = new core.QueryList();
-            this._submitButtons = new core.QueryList();
-            this._dialogBackdropEscape = false;
-            this._snapshot = {};
-            this._status$ = new rxjs.BehaviorSubject(exports.FormStatus.Valid);
-            this._destroy$ = new rxjs.Subject();
-        }
-        Object.defineProperty(FsFormDirective.prototype, "submitting", {
-            get: function () {
-                return this._status$.getValue() === exports.FormStatus.Submitting;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(FsFormDirective.prototype, "completing", {
-            get: function () {
-                return this._status$.getValue() === exports.FormStatus.Completing;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(FsFormDirective.prototype, "_submitEvent", {
-            get: function () {
-                return {
-                    ngForm: this.ngForm,
-                    submitter: this._submitter,
-                };
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(FsFormDirective.prototype, "_formValidState$", {
-            get: function () {
-                this._form.broadcast('valid', this._submitEvent);
-                this.submitEvent.emit(this._submitEvent);
-                this.valid.emit(this._submitEvent);
-                var submittedEvent = {
-                    ngForm: this.ngForm,
-                    submitter: this._submitter,
-                    response: null
-                };
-                if (!this.submit) {
-                    return rxjs.of(submittedEvent);
-                }
-                var result = this.submit(this._submitEvent);
-                if (!rxjs.isObservable(result)) {
-                    return rxjs.of(submittedEvent);
-                }
-                return result
-                    .pipe(operators.map(function (response) {
-                    submittedEvent.response = response;
-                    return submittedEvent;
-                }));
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(FsFormDirective.prototype, "_formInvalidState$", {
-            get: function () {
-                this._form.broadcast('invalid', this._submitEvent);
-                if (this.invalid) {
-                    this.invalid.emit(this._submitEvent);
-                }
-                var message$1 = 'Changes not saved. Please review errors highlighted in red.';
-                this._message.error(message$1, { mode: message.MessageMode.Toast });
-                var el = this._element.nativeElement.querySelector('.ng-invalid');
-                if (el) {
-                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                }
-                return rxjs.throwError('Form validation error');
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(FsFormDirective.prototype, "_submitter", {
-            get: function () {
-                return this._activeSubmitButton
-                    ? this._activeSubmitButton.name
-                    : null;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormDirective.prototype.ngOnInit = function () {
-            this._registerConfirmDialogBackdropEscape();
-            this._listenHotKeys();
-            this._listenWindowClose();
-            this._listenSubmit();
-            if (!this.autocomplete) {
-                this._registerAutocomplete();
-            }
-        };
-        FsFormDirective.prototype.ngOnChanges = function (changes) {
-            if (changes.confirm) {
-                this._updateDirtySubmitButtons();
-            }
-        };
-        FsFormDirective.prototype.ngAfterContentInit = function () {
-            this._registerConfirm();
-            this._registerConfirmDialogClose();
-            this._registerConfirmDrawerClose();
-            this._registerConfirmTabs();
-            this._registerDrawerClose();
-            this._registerDirtySubmitButton();
-        };
-        FsFormDirective.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsFormDirective.prototype.createSnapshot = function () {
-            this._snapshot = this.ngForm.value;
-        };
-        FsFormDirective.prototype.reset = function () {
-            var _this = this;
-            this.ngForm.resetForm();
-            Object.keys(this.ngForm.controls)
-                .forEach(function (name) {
-                var control = _this.ngForm.controls[name];
-                control.reset(_this._snapshot[name]);
-            });
-            this.reseted.emit();
-        };
-        FsFormDirective.prototype.clear = function () {
-            this.ngForm.resetForm();
-            this.cleared.emit();
-        };
-        FsFormDirective.prototype.dirty = function () {
-            this.ngForm.form.markAsDirty();
-            this._updateDirtySubmitButtons();
-        };
-        FsFormDirective.prototype.triggerSubmit = function () {
-            this.ngForm.ngSubmit.next();
-        };
-        FsFormDirective.prototype.triggerConfirm = function () {
-            var _this = this;
-            var submitted = this.submitting ? this.submitted.asObservable() : rxjs.of({});
-            return submitted
-                .pipe(operators.take(1), operators.mergeMap(function () { return confirmUnsaved(_this, _this._prompt); }));
-        };
-        FsFormDirective.prototype.enable = function () {
-            this.ngForm.control.enable();
-            this._updateDirtySubmitButtons();
-        };
-        FsFormDirective.prototype.disable = function () {
-            this.ngForm.control.disable();
-            this._submitButtons.forEach(function (button) {
-                button.disable();
-            });
-        };
-        FsFormDirective.prototype.addSubmitButton = function (submitButton) {
-            this._submitButtons.reset(__spread(this._submitButtons.toArray(), [
-                submitButton,
-            ]));
-        };
-        FsFormDirective.prototype.removeSubmitButton = function (submitButton) {
-            this._submitButtons.reset(__spread(this._submitButtons.toArray()
-                .filter(function (submitButton_) { return (submitButton !== submitButton_); })));
-        };
-        FsFormDirective.prototype._listenSubmit = function () {
-            var _this = this;
-            this.ngForm
-                .ngSubmit
-                .pipe(operators.tap(function (event) {
-                event === null || event === void 0 ? void 0 : event.preventDefault();
-            }), operators.filter(function () {
-                return [exports.FormStatus.Valid, exports.FormStatus.Invalid]
-                    .includes(_this._status$.getValue());
-            }), operators.tap(function () { return _this._markControlsAsTouchedAndUpdateValidity(); }), operators.tap(function () { return _this._broadcastSubmittingEvents(); }), operators.switchMap(function () { return _this._waitUntilStatusPending(); }), operators.tap(function () { return _this._setupActiveSubmitButton(); }), operators.mergeMap(function () {
-                return _this.ngForm.status === 'INVALID'
-                    ? _this._formInvalidState$
-                    : _this._formValidState$;
-            }), operators.catchError(function (e, source$) {
-                _this._handleError(e);
-                return source$;
-            }), operators.tap(function (submittedEvent) {
-                _this._completeSubmit(true, submittedEvent);
-            }), operators.takeUntil(this._destroy$))
-                .subscribe(function () { });
-        };
-        FsFormDirective.prototype._listenWindowClose = function () {
-            var _this = this;
-            rxjs.fromEvent(window, 'beforeunload')
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (event) {
-                if (_this.confirm && _this.confirmBrowser && _this.ngForm.dirty) {
-                    event.returnValue = false;
-                }
-            });
-        };
-        FsFormDirective.prototype._listenHotKeys = function () {
-            var _this = this;
-            this._ngZone.runOutsideAngular(function () {
-                rxjs.fromEvent(document, 'keydown')
-                    .pipe(operators.takeUntil(_this._destroy$))
-                    .subscribe(function (event) {
-                    if (_this._dialogBackdropEscape && event.code === 'Escape') {
-                        var dialog_1 = document.getElementById(_this._dialogRef.id);
-                        var paths = event.composedPath();
-                        if (paths) {
-                            paths.forEach(function (item) {
-                                if (dialog_1 === item) {
-                                    _this._ngZone.run(function () {
-                                        _this._formClose();
-                                    });
-                                }
-                            });
-                        }
-                    }
-                    if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
-                        event.preventDefault();
-                        if (_this.shortcuts) {
-                            if (_this._elementInForm(document.activeElement)) {
-                                _this.ngForm.ngSubmit.next();
-                            }
-                        }
-                    }
-                });
-            });
-        };
-        FsFormDirective.prototype._formClose = function () {
-            var _this = this;
-            if (this.confirm && this.confirmDialog) {
-                this.triggerConfirm()
-                    .pipe(operators.filter(function (result) { return confirmResultContinue(result); }), operators.switchMap(function (result) {
-                    return result === exports.ConfirmResult.Pristine || result === exports.ConfirmResult.Discard
-                        ? rxjs.of(null)
-                        : _this.submitted.asObservable();
-                }), operators.takeUntil(this._destroy$))
-                    .subscribe(function (result) {
-                    _this._dialogRef.close(result === null || result === void 0 ? void 0 : result.response);
-                });
-            }
-            else {
-                this._dialogRef.close(null);
-            }
-        };
-        FsFormDirective.prototype._registerDialogClose = function (directive) {
-            var _this = this;
-            if (!directive.registered) {
-                directive.registered = true;
-                directive.clicked$
-                    .pipe(operators.takeUntil(this._destroy$))
-                    .subscribe(function () {
-                    _this._formClose();
-                });
-            }
-        };
-        FsFormDirective.prototype._getActiveButton = function () {
-            var activeButton = this._submitButtons.find(function (button) {
-                return button.active;
-            });
-            return activeButton ? activeButton : this._submitButtons.first;
-        };
-        FsFormDirective.prototype._elementInForm = function (el) {
-            if (el.isSameNode(this._element.nativeElement)) {
-                return true;
-            }
-            else if (el.parentElement) {
-                return this._elementInForm(el.parentElement);
-            }
-            return false;
-        };
-        FsFormDirective.prototype._completeSubmit = function (success, submitEvent) {
-            var _this = this;
-            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(exports.FormStatus.Submitted);
-            if (success) {
-                this._status$.next(exports.FormStatus.Success);
-            }
-            else {
-                this._status$.next(exports.FormStatus.Error);
-            }
-            this._status$.next(exports.FormStatus.Completing);
-            var resetDelay = success ? this.successDelay : this.errorDelay;
-            rxjs.of(true)
-                .pipe(operators.delay(resetDelay), operators.first(), operators.takeUntil(this._destroy$)).subscribe(function () {
-                if (_this.ngForm.form.status === 'VALID') {
-                    _this._status$.next(exports.FormStatus.Valid);
-                }
-                else {
-                    _this._status$.next(exports.FormStatus.Invalid);
-                }
-                _this._resetButtons();
-                _this._updateDirtySubmitButtons();
-            });
-        };
-        FsFormDirective.prototype._resetButtons = function () {
-            this._submitButtons.forEach(function (button) {
-                button.reset();
-            });
-        };
-        FsFormDirective.prototype._registerConfirm = function () {
-            var _this = this;
-            this.ngForm.form.valueChanges
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (changes) {
-                if (_this.confirm) {
-                    var existing_1 = Object.keys(_this._snapshot);
-                    Object.keys(changes)
-                        .forEach(function (name) {
-                        if (existing_1.indexOf(name) === -1) {
-                            _this._snapshot[name] = changes[name];
-                        }
-                    });
-                }
-            });
-        };
-        FsFormDirective.prototype._registerDrawerClose = function () {
-            var _this = this;
-            if (this._drawerRef) {
-                this._drawerRef.closeStart$
-                    .pipe(operators.takeUntil(this._destroy$))
-                    .subscribe(function (subscriber) {
-                    if (_this.submitting) {
-                        _this._status$
-                            .pipe(operators.filter(function (status) { return status === exports.FormStatus.Success || status === exports.FormStatus.Error; }), operators.takeUntil(_this._destroy$))
-                            .subscribe(function (status) {
-                            if (status === exports.FormStatus.Success) {
-                                subscriber.next();
-                                subscriber.complete();
-                            }
-                            else {
-                                subscriber.error();
-                            }
-                        });
-                    }
-                    else {
-                        subscriber.next();
-                        subscriber.complete();
-                    }
-                });
-            }
-        };
-        FsFormDirective.prototype._registerConfirmDrawerClose = function () {
-            var _this = this;
-            if (this._drawerRef) {
-                this._drawerRef.closeStart$
-                    .pipe(operators.switchMap(function (subscriber) {
-                    return rxjs.iif(function () { return _this.confirm && _this.confirmDrawer; }, _this.triggerConfirm()
-                        .pipe(operators.map(function (result) { return confirmResultContinue(result); }), operators.tap(function (result) {
-                        if (result) {
-                            subscriber.next();
-                            subscriber.complete();
-                        }
-                        else {
-                            subscriber.error();
-                        }
-                    })), rxjs.defer(function () {
-                        subscriber.next();
-                        subscriber.complete();
-                    }));
-                }), operators.takeUntil(this._destroy$))
-                    .subscribe();
-            }
-        };
-        FsFormDirective.prototype._registerConfirmTabs = function () {
-            var _this = this;
-            if (this.tabGroup) {
-                this.registerConfirmTabGroup(this.tabGroup);
-            }
-            this.registerConfirmTabGroups(this._tabGroups.toArray());
-            this._tabGroups.changes
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.registerConfirmTabGroups(_this._tabGroups.toArray());
-            });
-        };
-        FsFormDirective.prototype.registerConfirmTabGroups = function (tabGroups) {
-            var _this = this;
-            tabGroups.forEach(function (tabGroup) {
-                _this.registerConfirmTabGroup(tabGroup);
-            });
-        };
-        FsFormDirective.prototype.registerConfirmTabGroup = function (tabGroup) {
-            var _this = this;
-            var confirmTabGroup = tabGroup;
-            if (!confirmTabGroup._originalHandleClick) {
-                confirmTabGroup._originalHandleClick = tabGroup._handleClick;
-                confirmTabGroup._handlClick$ = new rxjs.Subject();
-                confirmTabGroup._handleClick = function (tab, tabHeader, idx) {
-                    if (confirmTabGroup._handlClick$.observers.length) {
-                        confirmTabGroup._handlClick$.next({ tab: tab, tabHeader: tabHeader, idx: idx });
-                    }
-                    else {
-                        confirmTabGroup._originalHandleClick(tab, tabHeader, idx);
-                    }
-                };
-            }
-            confirmTabGroup._handlClick$
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (event) {
-                if (!_this.submitting) {
-                    if (_this.confirm && _this.confirmTabs) {
-                        _this.triggerConfirm()
-                            .pipe(operators.takeUntil(_this._destroy$))
-                            .subscribe(function (result) {
-                            if (confirmResultContinue(result)) {
-                                confirmTabGroup.selectedIndex = event.idx;
-                            }
-                        });
-                    }
-                    else {
-                        confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
-                    }
-                }
-            });
-        };
-        FsFormDirective.prototype._registerConfirmDialogClose = function () {
-            var _this = this;
-            if (this._dialogRef) {
-                this.formDialogClose.forEach(function (item) {
-                    _this._registerDialogClose(item);
-                });
-                this.formDialogClose.changes
-                    .pipe(operators.takeUntil(this._destroy$))
-                    .subscribe(function (e) {
-                    e.forEach(function (item) {
-                        _this._registerDialogClose(item);
-                    });
-                });
-            }
-        };
-        FsFormDirective.prototype._registerConfirmDialogBackdropEscape = function () {
-            var _this = this;
-            this._dialogBackdropEscape = this._dialogRef && this._dialogRef.disableClose !== true;
-            if (this._dialogRef && !this._dialogRef.disableClose) {
-                this._dialogRef.disableClose = true;
-                this._dialogRef.backdropClick()
-                    .pipe(operators.takeUntil(this._destroy$))
-                    .subscribe(function () {
-                    _this._formClose();
-                });
-                this._destroy$
-                    .subscribe(function () {
-                    _this._dialogRef.disableClose = false;
-                });
-            }
-        };
-        FsFormDirective.prototype._registerAutocomplete = function () {
-            var _this = this;
-            this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);
-            this.ngForm.form.registerControl = function (name, control) {
-                var el = _this._element.nativeElement.querySelector("input[name='" + name + "']");
-                if (el) {
-                    el.setAttribute('name', name + '_' + common$1.guid());
-                    if (!el.getAttribute('autocomplete')) {
-                        el.setAttribute('autocomplete', 'none');
-                    }
-                }
-                return _this._registerControl(name, control);
-            };
-        };
-        FsFormDirective.prototype._registerDirtySubmitButton = function () {
-            var _this = this;
-            if (!this.ngForm) {
-                return;
-            }
-            this.ngForm.form.valueChanges
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this._updateDirtySubmitButtons();
-            });
-            this._submitButtons.changes
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this._updateDirtySubmitButtons();
-            });
-        };
-        FsFormDirective.prototype._updateDirtySubmitButtons = function () {
-            var _this = this;
-            this._submitButtons
-                .forEach(function (submitButton) {
-                if (!_this.confirm || !_this.dirtySubmitButton || _this.ngForm.dirty || !submitButton.dirtySubmit) {
-                    submitButton.enable();
-                }
-                else {
-                    submitButton.disable();
-                }
-            });
-        };
-        FsFormDirective.prototype._broadcastSubmittingEvents = function () {
-            this._status$.next(exports.FormStatus.Submitting);
-            this._form.broadcast('submit', this.ngForm);
-        };
-        FsFormDirective.prototype._markControlsAsTouchedAndUpdateValidity = function () {
-            Object.values(this.ngForm.controls)
-                .forEach(function (control) {
-                control.markAsDirty();
-                control.markAsTouched();
-                control.updateValueAndValidity();
-            });
-        };
-        FsFormDirective.prototype._setupActiveSubmitButton = function () {
-            this._activeSubmitButton = this._getActiveButton();
-            this._resetButtons();
-            if (this._activeSubmitButton) {
-                this._activeSubmitButton.process();
-            }
-        };
-        FsFormDirective.prototype._waitUntilStatusPending = function () {
-            return this.ngForm.statusChanges
-                .pipe(operators.startWith(this.ngForm.status), operators.first(function (state) { return state !== 'PENDING'; }));
-        };
-        FsFormDirective.prototype._handleError = function (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) {
-                var errors = getFormErrors(this.ngForm.control, null);
-                console.log('Validation Errors: ', errors);
-            }
-            console.groupEnd();
-            this._completeSubmit(false, null);
-        };
-        FsFormDirective.ctorParameters = function () { return [
-            { type: forms.NgForm, decorators: [{ type: core.Inject, args: [forms.NgForm,] }] },
-            { type: FsForm },
-            { type: core.ElementRef },
-            { type: message.FsMessage },
-            { type: prompt.FsPrompt },
-            { type: core.NgZone },
-            { type: dialog.MatDialogRef, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog.MatDialogRef,] }] },
-            { type: drawer.DrawerRef, decorators: [{ type: core.Optional }, { type: core.Inject, args: [drawer.DrawerRef,] }] }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "wrapperSelector", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "messageSelector", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "hintSelector", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "labelSelector", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "autocomplete", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "shortcuts", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "confirm", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "confirmDialog", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "confirmDrawer", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "confirmBrowser", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "confirmTabs", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "dirtySubmitButton", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], FsFormDirective.prototype, "submit", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "successDelay", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "errorDelay", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", tabs.MatTabGroup)
-        ], FsFormDirective.prototype, "tabGroup", void 0);
-        __decorate([
-            core.Output('fsForm'),
-            __metadata("design:type", core.EventEmitter)
-        ], FsFormDirective.prototype, "submitEvent", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", core.EventEmitter)
-        ], FsFormDirective.prototype, "invalid", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", core.EventEmitter)
-        ], FsFormDirective.prototype, "valid", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", core.EventEmitter)
-        ], FsFormDirective.prototype, "submitted", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", core.EventEmitter)
-        ], FsFormDirective.prototype, "reseted", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", core.EventEmitter)
-        ], FsFormDirective.prototype, "cleared", void 0);
-        __decorate([
-            core.HostBinding('class.fs-form'),
-            __metadata("design:type", Object)
-        ], FsFormDirective.prototype, "fsformClass", void 0);
-        __decorate([
-            core.ContentChildren(FsFormDialogCloseDirective, { descendants: true }),
-            __metadata("design:type", core.QueryList)
-        ], FsFormDirective.prototype, "formDialogClose", void 0);
-        __decorate([
-            core.ContentChildren(tabs.MatTabGroup, { descendants: true }),
-            __metadata("design:type", core.QueryList)
-        ], FsFormDirective.prototype, "_tabGroups", void 0);
-        FsFormDirective = __decorate([
-            core.Directive({
-                selector: '[fsForm]',
-            }),
-            __param(0, core.Inject(forms.NgForm)),
-            __param(6, core.Optional()), __param(6, core.Inject(dialog.MatDialogRef)),
-            __param(7, core.Optional()), __param(7, core.Inject(drawer.DrawerRef)),
-            __metadata("design:paramtypes", [forms.NgForm,
-                FsForm,
-                core.ElementRef,
-                message.FsMessage,
-                prompt.FsPrompt,
-                core.NgZone,
-                dialog.MatDialogRef,
-                drawer.DrawerRef])
-        ], FsFormDirective);
-        return FsFormDirective;
+    var FsFormDirective = /** @class */ (function () {
+        function FsFormDirective(ngForm, _form, _element, _message, _prompt, _ngZone, _dialogRef, _drawerRef) {
+            this.ngForm = ngForm;
+            this._form = _form;
+            this._element = _element;
+            this._message = _message;
+            this._prompt = _prompt;
+            this._ngZone = _ngZone;
+            this._dialogRef = _dialogRef;
+            this._drawerRef = _drawerRef;
+            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.submitEvent = new core.EventEmitter();
+            this.invalid = new core.EventEmitter();
+            this.valid = new core.EventEmitter();
+            this.submitted = new core.EventEmitter();
+            this.reseted = new core.EventEmitter();
+            this.cleared = new core.EventEmitter();
+            this.fsformClass = true;
+            this._tabGroups = new core.QueryList();
+            this._submitButtons = new core.QueryList();
+            this._dialogBackdropEscape = false;
+            this._snapshot = {};
+            this._status$ = new rxjs.BehaviorSubject(exports.FormStatus.Valid);
+            this._destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(FsFormDirective.prototype, "submitting", {
+            get: function () {
+                return this._status$.getValue() === exports.FormStatus.Submitting;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(FsFormDirective.prototype, "completing", {
+            get: function () {
+                return this._status$.getValue() === exports.FormStatus.Completing;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(FsFormDirective.prototype, "_submitEvent", {
+            get: function () {
+                return {
+                    ngForm: this.ngForm,
+                    submitter: this._submitter,
+                };
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(FsFormDirective.prototype, "_formValidState$", {
+            get: function () {
+                this._form.broadcast('valid', this._submitEvent);
+                this.submitEvent.emit(this._submitEvent);
+                this.valid.emit(this._submitEvent);
+                var submittedEvent = {
+                    ngForm: this.ngForm,
+                    submitter: this._submitter,
+                    response: null
+                };
+                if (!this.submit) {
+                    return rxjs.of(submittedEvent);
+                }
+                var result = this.submit(this._submitEvent);
+                if (!rxjs.isObservable(result)) {
+                    return rxjs.of(submittedEvent);
+                }
+                return result
+                    .pipe(operators.map(function (response) {
+                    submittedEvent.response = response;
+                    return submittedEvent;
+                }));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(FsFormDirective.prototype, "_formInvalidState$", {
+            get: function () {
+                this._form.broadcast('invalid', this._submitEvent);
+                if (this.invalid) {
+                    this.invalid.emit(this._submitEvent);
+                }
+                var message$1 = 'Changes not saved. Please review errors highlighted in red.';
+                this._message.error(message$1, { mode: message.MessageMode.Toast });
+                var el = this._element.nativeElement.querySelector('.ng-invalid');
+                if (el) {
+                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+                return rxjs.throwError('Form validation error');
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(FsFormDirective.prototype, "_submitter", {
+            get: function () {
+                return this._activeSubmitButton
+                    ? this._activeSubmitButton.name
+                    : null;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormDirective.prototype.ngOnInit = function () {
+            this._registerConfirmDialogBackdropEscape();
+            this._listenHotKeys();
+            this._listenWindowClose();
+            this._listenSubmit();
+            if (!this.autocomplete) {
+                this._registerAutocomplete();
+            }
+        };
+        FsFormDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.confirm) {
+                this._updateDirtySubmitButtons();
+            }
+        };
+        FsFormDirective.prototype.ngAfterContentInit = function () {
+            this._registerConfirm();
+            this._registerConfirmDialogClose();
+            this._registerConfirmDrawerClose();
+            this._registerConfirmTabs();
+            this._registerDrawerClose();
+            this._registerDirtySubmitButton();
+        };
+        FsFormDirective.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsFormDirective.prototype.createSnapshot = function () {
+            this._snapshot = this.ngForm.value;
+        };
+        FsFormDirective.prototype.reset = function () {
+            var _this = this;
+            this.ngForm.resetForm();
+            Object.keys(this.ngForm.controls)
+                .forEach(function (name) {
+                var control = _this.ngForm.controls[name];
+                control.reset(_this._snapshot[name]);
+            });
+            this.reseted.emit();
+        };
+        FsFormDirective.prototype.clear = function () {
+            this.ngForm.resetForm();
+            this.cleared.emit();
+        };
+        FsFormDirective.prototype.dirty = function () {
+            this.ngForm.form.markAsDirty();
+            this._updateDirtySubmitButtons();
+        };
+        FsFormDirective.prototype.triggerSubmit = function () {
+            this.ngForm.ngSubmit.next();
+        };
+        FsFormDirective.prototype.triggerConfirm = function () {
+            var _this = this;
+            var submitted = this.submitting ? this.submitted.asObservable() : rxjs.of({});
+            return submitted
+                .pipe(operators.take(1), operators.mergeMap(function () { return confirmUnsaved(_this, _this._prompt); }));
+        };
+        FsFormDirective.prototype.enable = function () {
+            this.ngForm.control.enable();
+            this._updateDirtySubmitButtons();
+        };
+        FsFormDirective.prototype.disable = function () {
+            this.ngForm.control.disable();
+            this._submitButtons.forEach(function (button) {
+                button.disable();
+            });
+        };
+        FsFormDirective.prototype.addSubmitButton = function (submitButton) {
+            this._submitButtons.reset(__spread(this._submitButtons.toArray(), [
+                submitButton,
+            ]));
+        };
+        FsFormDirective.prototype.removeSubmitButton = function (submitButton) {
+            this._submitButtons.reset(__spread(this._submitButtons.toArray()
+                .filter(function (submitButton_) { return (submitButton !== submitButton_); })));
+        };
+        FsFormDirective.prototype._listenSubmit = function () {
+            var _this = this;
+            this.ngForm
+                .ngSubmit
+                .pipe(operators.tap(function (event) {
+                event === null || event === void 0 ? void 0 : event.preventDefault();
+            }), operators.filter(function () {
+                return [exports.FormStatus.Valid, exports.FormStatus.Invalid]
+                    .includes(_this._status$.getValue());
+            }), operators.tap(function () { return _this._markControlsAsTouchedAndUpdateValidity(); }), operators.tap(function () { return _this._broadcastSubmittingEvents(); }), operators.switchMap(function () { return _this._waitUntilStatusPending(); }), operators.tap(function () { return _this._setupActiveSubmitButton(); }), operators.mergeMap(function () {
+                return _this.ngForm.status === 'INVALID'
+                    ? _this._formInvalidState$
+                    : _this._formValidState$;
+            }), operators.catchError(function (e, source$) {
+                _this._handleError(e);
+                return source$;
+            }), operators.tap(function (submittedEvent) {
+                _this._completeSubmit(true, submittedEvent);
+            }), operators.takeUntil(this._destroy$))
+                .subscribe(function () { });
+        };
+        FsFormDirective.prototype._listenWindowClose = function () {
+            var _this = this;
+            rxjs.fromEvent(window, 'beforeunload')
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (event) {
+                if (_this.confirm && _this.confirmBrowser && _this.ngForm.dirty) {
+                    event.returnValue = false;
+                }
+            });
+        };
+        FsFormDirective.prototype._listenHotKeys = function () {
+            var _this = this;
+            this._ngZone.runOutsideAngular(function () {
+                rxjs.fromEvent(document, 'keydown')
+                    .pipe(operators.takeUntil(_this._destroy$))
+                    .subscribe(function (event) {
+                    if (_this._dialogBackdropEscape && event.code === 'Escape') {
+                        var dialog_1 = document.getElementById(_this._dialogRef.id);
+                        var paths = event.composedPath();
+                        if (paths) {
+                            paths.forEach(function (item) {
+                                if (dialog_1 === item) {
+                                    _this._ngZone.run(function () {
+                                        _this._formClose();
+                                    });
+                                }
+                            });
+                        }
+                    }
+                    if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
+                        event.preventDefault();
+                        if (_this.shortcuts) {
+                            if (_this._elementInForm(document.activeElement)) {
+                                _this.ngForm.ngSubmit.next();
+                            }
+                        }
+                    }
+                });
+            });
+        };
+        FsFormDirective.prototype._formClose = function () {
+            var _this = this;
+            if (this.confirm && this.confirmDialog) {
+                this.triggerConfirm()
+                    .pipe(operators.filter(function (result) { return confirmResultContinue(result); }), operators.switchMap(function (result) {
+                    return result === exports.ConfirmResult.Pristine || result === exports.ConfirmResult.Discard
+                        ? rxjs.of(null)
+                        : _this.submitted.asObservable();
+                }), operators.takeUntil(this._destroy$))
+                    .subscribe(function (result) {
+                    _this._dialogRef.close(result === null || result === void 0 ? void 0 : result.response);
+                });
+            }
+            else {
+                this._dialogRef.close(null);
+            }
+        };
+        FsFormDirective.prototype._registerDialogClose = function (directive) {
+            var _this = this;
+            if (!directive.registered) {
+                directive.registered = true;
+                directive.clicked$
+                    .pipe(operators.takeUntil(this._destroy$))
+                    .subscribe(function () {
+                    _this._formClose();
+                });
+            }
+        };
+        FsFormDirective.prototype._getActiveButton = function () {
+            var activeButton = this._submitButtons.find(function (button) {
+                return button.active;
+            });
+            return activeButton ? activeButton : this._submitButtons.first;
+        };
+        FsFormDirective.prototype._elementInForm = function (el) {
+            if (el.isSameNode(this._element.nativeElement)) {
+                return true;
+            }
+            else if (el.parentElement) {
+                return this._elementInForm(el.parentElement);
+            }
+            return false;
+        };
+        FsFormDirective.prototype._completeSubmit = function (success, submitEvent) {
+            var _this = this;
+            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(exports.FormStatus.Submitted);
+            if (success) {
+                this._status$.next(exports.FormStatus.Success);
+            }
+            else {
+                this._status$.next(exports.FormStatus.Error);
+            }
+            this._status$.next(exports.FormStatus.Completing);
+            var resetDelay = success ? this.successDelay : this.errorDelay;
+            rxjs.of(true)
+                .pipe(operators.delay(resetDelay), operators.first(), operators.takeUntil(this._destroy$)).subscribe(function () {
+                if (_this.ngForm.form.status === 'VALID') {
+                    _this._status$.next(exports.FormStatus.Valid);
+                }
+                else {
+                    _this._status$.next(exports.FormStatus.Invalid);
+                }
+                _this._resetButtons();
+                _this._updateDirtySubmitButtons();
+            });
+        };
+        FsFormDirective.prototype._resetButtons = function () {
+            this._submitButtons.forEach(function (button) {
+                button.reset();
+            });
+        };
+        FsFormDirective.prototype._registerConfirm = function () {
+            var _this = this;
+            this.ngForm.form.valueChanges
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (changes) {
+                if (_this.confirm) {
+                    var existing_1 = Object.keys(_this._snapshot);
+                    Object.keys(changes)
+                        .forEach(function (name) {
+                        if (existing_1.indexOf(name) === -1) {
+                            _this._snapshot[name] = changes[name];
+                        }
+                    });
+                }
+            });
+        };
+        FsFormDirective.prototype._registerDrawerClose = function () {
+            var _this = this;
+            if (this._drawerRef) {
+                this._drawerRef.closeStart$
+                    .pipe(operators.takeUntil(this._destroy$))
+                    .subscribe(function (subscriber) {
+                    if (_this.submitting) {
+                        _this._status$
+                            .pipe(operators.filter(function (status) { return status === exports.FormStatus.Success || status === exports.FormStatus.Error; }), operators.takeUntil(_this._destroy$))
+                            .subscribe(function (status) {
+                            if (status === exports.FormStatus.Success) {
+                                subscriber.next();
+                                subscriber.complete();
+                            }
+                            else {
+                                subscriber.error();
+                            }
+                        });
+                    }
+                    else {
+                        subscriber.next();
+                        subscriber.complete();
+                    }
+                });
+            }
+        };
+        FsFormDirective.prototype._registerConfirmDrawerClose = function () {
+            var _this = this;
+            if (this._drawerRef) {
+                this._drawerRef.closeStart$
+                    .pipe(operators.switchMap(function (subscriber) {
+                    return rxjs.iif(function () { return _this.confirm && _this.confirmDrawer; }, _this.triggerConfirm()
+                        .pipe(operators.map(function (result) { return confirmResultContinue(result); }), operators.tap(function (result) {
+                        if (result) {
+                            subscriber.next();
+                            subscriber.complete();
+                        }
+                    })), rxjs.defer(function () {
+                        subscriber.next();
+                        subscriber.complete();
+                    }));
+                }), operators.takeUntil(this._destroy$))
+                    .subscribe();
+            }
+        };
+        FsFormDirective.prototype._registerConfirmTabs = function () {
+            var _this = this;
+            if (this.tabGroup) {
+                this.registerConfirmTabGroup(this.tabGroup);
+            }
+            this.registerConfirmTabGroups(this._tabGroups.toArray());
+            this._tabGroups.changes
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.registerConfirmTabGroups(_this._tabGroups.toArray());
+            });
+        };
+        FsFormDirective.prototype.registerConfirmTabGroups = function (tabGroups) {
+            var _this = this;
+            tabGroups.forEach(function (tabGroup) {
+                _this.registerConfirmTabGroup(tabGroup);
+            });
+        };
+        FsFormDirective.prototype.registerConfirmTabGroup = function (tabGroup) {
+            var _this = this;
+            var confirmTabGroup = tabGroup;
+            if (!confirmTabGroup._originalHandleClick) {
+                confirmTabGroup._originalHandleClick = tabGroup._handleClick;
+                confirmTabGroup._handlClick$ = new rxjs.Subject();
+                confirmTabGroup._handleClick = function (tab, tabHeader, idx) {
+                    if (confirmTabGroup._handlClick$.observers.length) {
+                        confirmTabGroup._handlClick$.next({ tab: tab, tabHeader: tabHeader, idx: idx });
+                    }
+                    else {
+                        confirmTabGroup._originalHandleClick(tab, tabHeader, idx);
+                    }
+                };
+            }
+            confirmTabGroup._handlClick$
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (event) {
+                if (!_this.submitting) {
+                    if (_this.confirm && _this.confirmTabs) {
+                        _this.triggerConfirm()
+                            .pipe(operators.takeUntil(_this._destroy$))
+                            .subscribe(function (result) {
+                            if (confirmResultContinue(result)) {
+                                confirmTabGroup.selectedIndex = event.idx;
+                            }
+                        });
+                    }
+                    else {
+                        confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
+                    }
+                }
+            });
+        };
+        FsFormDirective.prototype._registerConfirmDialogClose = function () {
+            var _this = this;
+            if (this._dialogRef) {
+                this.formDialogClose.forEach(function (item) {
+                    _this._registerDialogClose(item);
+                });
+                this.formDialogClose.changes
+                    .pipe(operators.takeUntil(this._destroy$))
+                    .subscribe(function (e) {
+                    e.forEach(function (item) {
+                        _this._registerDialogClose(item);
+                    });
+                });
+            }
+        };
+        FsFormDirective.prototype._registerConfirmDialogBackdropEscape = function () {
+            var _this = this;
+            this._dialogBackdropEscape = this._dialogRef && this._dialogRef.disableClose !== true;
+            if (this._dialogRef && !this._dialogRef.disableClose) {
+                this._dialogRef.disableClose = true;
+                this._dialogRef.backdropClick()
+                    .pipe(operators.takeUntil(this._destroy$))
+                    .subscribe(function () {
+                    _this._formClose();
+                });
+                this._destroy$
+                    .subscribe(function () {
+                    _this._dialogRef.disableClose = false;
+                });
+            }
+        };
+        FsFormDirective.prototype._registerAutocomplete = function () {
+            var _this = this;
+            this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);
+            this.ngForm.form.registerControl = function (name, control) {
+                var el = _this._element.nativeElement.querySelector("input[name='" + name + "']");
+                if (el) {
+                    el.setAttribute('name', name + '_' + common$1.guid());
+                    if (!el.getAttribute('autocomplete')) {
+                        el.setAttribute('autocomplete', 'none');
+                    }
+                }
+                return _this._registerControl(name, control);
+            };
+        };
+        FsFormDirective.prototype._registerDirtySubmitButton = function () {
+            var _this = this;
+            if (!this.ngForm) {
+                return;
+            }
+            this.ngForm.form.valueChanges
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._updateDirtySubmitButtons();
+            });
+            this._submitButtons.changes
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._updateDirtySubmitButtons();
+            });
+        };
+        FsFormDirective.prototype._updateDirtySubmitButtons = function () {
+            var _this = this;
+            this._submitButtons
+                .forEach(function (submitButton) {
+                if (!_this.confirm || !_this.dirtySubmitButton || _this.ngForm.dirty || !submitButton.dirtySubmit) {
+                    submitButton.enable();
+                }
+                else {
+                    submitButton.disable();
+                }
+            });
+        };
+        FsFormDirective.prototype._broadcastSubmittingEvents = function () {
+            this._status$.next(exports.FormStatus.Submitting);
+            this._form.broadcast('submit', this.ngForm);
+        };
+        FsFormDirective.prototype._markControlsAsTouchedAndUpdateValidity = function () {
+            Object.values(this.ngForm.controls)
+                .forEach(function (control) {
+                control.markAsDirty();
+                control.markAsTouched();
+                control.updateValueAndValidity();
+            });
+        };
+        FsFormDirective.prototype._setupActiveSubmitButton = function () {
+            this._activeSubmitButton = this._getActiveButton();
+            this._resetButtons();
+            if (this._activeSubmitButton) {
+                this._activeSubmitButton.process();
+            }
+        };
+        FsFormDirective.prototype._waitUntilStatusPending = function () {
+            return this.ngForm.statusChanges
+                .pipe(operators.startWith(this.ngForm.status), operators.first(function (state) { return state !== 'PENDING'; }));
+        };
+        FsFormDirective.prototype._handleError = function (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) {
+                var errors = getFormErrors(this.ngForm.control, null);
+                console.log('Validation Errors: ', errors);
+            }
+            console.groupEnd();
+            this._completeSubmit(false, null);
+        };
+        FsFormDirective.ctorParameters = function () { return [
+            { type: forms.NgForm, decorators: [{ type: core.Inject, args: [forms.NgForm,] }] },
+            { type: FsForm },
+            { type: core.ElementRef },
+            { type: message.FsMessage },
+            { type: prompt.FsPrompt },
+            { type: core.NgZone },
+            { type: dialog.MatDialogRef, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog.MatDialogRef,] }] },
+            { type: drawer.DrawerRef, decorators: [{ type: core.Optional }, { type: core.Inject, args: [drawer.DrawerRef,] }] }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "wrapperSelector", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "messageSelector", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "hintSelector", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "labelSelector", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "autocomplete", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "shortcuts", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "confirm", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "confirmDialog", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "confirmDrawer", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "confirmBrowser", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "confirmTabs", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "dirtySubmitButton", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], FsFormDirective.prototype, "submit", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "successDelay", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "errorDelay", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", tabs.MatTabGroup)
+        ], FsFormDirective.prototype, "tabGroup", void 0);
+        __decorate([
+            core.Output('fsForm'),
+            __metadata("design:type", core.EventEmitter)
+        ], FsFormDirective.prototype, "submitEvent", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], FsFormDirective.prototype, "invalid", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], FsFormDirective.prototype, "valid", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], FsFormDirective.prototype, "submitted", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], FsFormDirective.prototype, "reseted", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], FsFormDirective.prototype, "cleared", void 0);
+        __decorate([
+            core.HostBinding('class.fs-form'),
+            __metadata("design:type", Object)
+        ], FsFormDirective.prototype, "fsformClass", void 0);
+        __decorate([
+            core.ContentChildren(FsFormDialogCloseDirective, { descendants: true }),
+            __metadata("design:type", core.QueryList)
+        ], FsFormDirective.prototype, "formDialogClose", void 0);
+        __decorate([
+            core.ContentChildren(tabs.MatTabGroup, { descendants: true }),
+            __metadata("design:type", core.QueryList)
+        ], FsFormDirective.prototype, "_tabGroups", void 0);
+        FsFormDirective = __decorate([
+            core.Directive({
+                selector: '[fsForm]',
+            }),
+            __param(0, core.Inject(forms.NgForm)),
+            __param(6, core.Optional()), __param(6, core.Inject(dialog.MatDialogRef)),
+            __param(7, core.Optional()), __param(7, core.Inject(drawer.DrawerRef)),
+            __metadata("design:paramtypes", [forms.NgForm,
+                FsForm,
+                core.ElementRef,
+                message.FsMessage,
+                prompt.FsPrompt,
+                core.NgZone,
+                dialog.MatDialogRef,
+                drawer.DrawerRef])
+        ], FsFormDirective);
+        return FsFormDirective;
     }());
 
-    var 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)',
+    var 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)',
     };
 
-    var VALIDATE_MESSAGES = new core.InjectionToken('fs.form.validate-messages');
-    var VALIDATE_MESSAGE_PROVIDER = {
-        provide: VALIDATE_MESSAGES,
-        useFactory: messageProviderFactory,
-    };
-    function messageProviderFactory() {
-        return __assign({}, ERROR_MESSAGES);
+    var VALIDATE_MESSAGES = new core.InjectionToken('fs.form.validate-messages');
+    var VALIDATE_MESSAGE_PROVIDER = {
+        provide: VALIDATE_MESSAGES,
+        useFactory: messageProviderFactory,
+    };
+    function messageProviderFactory() {
+        return __assign({}, ERROR_MESSAGES);
     }
 
-    var FsControlDirective = /** @class */ (function () {
-        function FsControlDirective(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 = [];
-            // protected _validateMessages = { ...ERROR_MESSAGES };
-            this._destroy$ = new rxjs.Subject();
-            if (ngControl) {
-                this._control = ngControl.control;
-            }
-            else {
-                console.error('The element does not have a valid ngModel', this.elementRef.nativeElement);
-            }
-        }
-        Object.defineProperty(FsControlDirective.prototype, "validateMessages", {
-            set: function (messages) {
-                this._validateMessages = __assign(__assign({}, this._validateMessages), messages);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsControlDirective.prototype.ngOnInit = function () {
-            this._setupValidators();
-        };
-        FsControlDirective.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsControlDirective.prototype.ngAfterContentInit = function () {
-            if (this._control) {
-                /*
-                  Ensure that statusChanges has one subscription per control. Multiple can happen
-                  when multiple fsForm validation directives are applied to the same element
-                */
-                if (!this._control.statusChangesSubscribe) {
-                    this._control.statusChanges
-                        .pipe(operators.takeUntil(this._destroy$))
-                        .subscribe(this.render.bind(this));
-                    this._control.statusChangesSubscribe = true;
-                }
-            }
-        };
-        FsControlDirective.prototype.getMessageSelector = function () {
-            if (this.messageSelector === false) {
-                return '';
-            }
-            if (this.messageSelector) {
-                return this.messageSelector;
-            }
-            else if (this.formDirective && this.formDirective.messageSelector) {
-                return this.formDirective.messageSelector;
-            }
-        };
-        FsControlDirective.prototype.getHintWrapperSelector = function () {
-            if (this.hintSelector === false) {
-                return '';
-            }
-            if (this.hintSelector) {
-                return this.hintSelector;
-            }
-            else if (this.formDirective && this.formDirective.hintSelector) {
-                return this.formDirective.hintSelector;
-            }
-        };
-        FsControlDirective.prototype.getWrapperSelector = function () {
-            if (this.wrapperSelector === false) {
-                return '';
-            }
-            if (this.wrapperSelector) {
-                return this.wrapperSelector;
-            }
-            else if (this.formDirective && this.formDirective.wrapperSelector) {
-                return this.formDirective.wrapperSelector;
-            }
-        };
-        FsControlDirective.prototype.getlabelSelector = function () {
-            if (this.labelSelector === false) {
-                return '';
-            }
-            if (this.labelSelector) {
-                return this.labelSelector;
-            }
-            else if (this.formDirective && this.formDirective.labelSelector) {
-                return this.formDirective.labelSelector;
-            }
-        };
-        FsControlDirective.prototype.getWrapperElement = function () {
-            var 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>
-        */
-        FsControlDirective.prototype.render = function () {
-            var _a;
-            if (this.ngControl) {
-                var renderer = this.renderer2;
-                var wrapper = this.getWrapperElement();
-                var error = this.ngControl.dirty ? this.getError(this.ngControl) : null;
-                if (!this.getMessageSelector()) {
-                    return;
-                }
-                var messageWrapper = wrapper.querySelector(this.getMessageSelector());
-                if (!messageWrapper) {
-                    return console.warn('Failed to locate ' + this.getMessageSelector(), this.elementRef.nativeElement);
-                }
-                if (this.getlabelSelector()) {
-                    var 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()) {
-                    var hint = messageWrapper.querySelector(this.getHintWrapperSelector());
-                    if (hint) {
-                        renderer.setStyle(hint, 'display', error ? 'none' : 'block');
-                        if (this.appendHintClass) {
-                            renderer.addClass(hint, this.appendHintClass);
-                        }
-                    }
-                }
-                var errorWrapper = wrapper.querySelector('.fs-form-error-target');
-                if (errorWrapper) {
-                    errorWrapper.remove();
-                }
-                wrapper.classList.remove('ng-invalid');
-                var shouldErrorBeRendered = this.ngControl.invalid
-                    && (this.ngControl.dirty || ((_a = this.formDirective.ngForm) === null || _a === void 0 ? void 0 : _a.submitted));
-                if (!shouldErrorBeRendered || !error) {
-                    return;
-                }
-                wrapper.classList.add('ng-invalid');
-                errorWrapper = renderer.createElement('div');
-                renderer.addClass(errorWrapper, 'fs-form-error-target');
-                renderer.addClass(errorWrapper, this.appendErrorClass);
-                renderer.addClass(errorWrapper, this.appendErrorClass + '-' + error.name);
-                var errorText = renderer.createText(error.message);
-                renderer.appendChild(errorWrapper, errorText);
-                messageWrapper.appendChild(errorWrapper);
-            }
-        };
-        FsControlDirective.prototype.getWrapper = function (node, count) {
-            if (count === void 0) { count = 0; }
-            if (!node || count > 10) {
-                return null;
-            }
-            if (node.parentNode && node.parentNode.querySelector(this.getWrapperSelector())) {
-                return node;
-            }
-            return this.getWrapper(node.parentNode, ++count);
-        };
-        FsControlDirective.prototype.parseErrorMessage = function (message, args) {
-            lodashEs.values(args)
-                .forEach(function (name) {
-                message = message.replace(/\$\(\d\)/, name);
-            });
-            return message;
-        };
-        FsControlDirective.prototype.getError = function (controlRef) {
-            var name = lodashEs.keys(controlRef.control.errors)[0];
-            if (!name) {
-                return null;
-            }
-            var message = controlRef.control.errors[name];
-            if (this._validateMessages[name]) {
-                message = this.parseErrorMessage(this._validateMessages[name], message);
-            }
-            return { name: name, message: message };
-        };
-        FsControlDirective.prototype._setupValidators = function () {
-            var control = this._control;
-            if (this.validate) {
-                var validators = control.validator
-                    ? [control.validator, this.validate.bind(this)]
-                    : this.validate.bind(this);
-                control.setValidators(validators);
-            }
-            if (this.validateAsync) {
-                var asyncValidators = control.asyncValidator
-                    ? [control.asyncValidator, this.validateAsync.bind(this)]
-                    : this.validateAsync.bind(this);
-                control.setAsyncValidators(asyncValidators);
-            }
-            control.updateValueAndValidity();
-        };
-        FsControlDirective.ctorParameters = function () { return [
-            { type: core.ElementRef },
-            { type: core.Renderer2 },
-            { type: core.Injector },
-            { type: undefined, decorators: [{ type: core.Self }, { type: core.Inject, args: [VALIDATE_MESSAGES,] }] },
-            { type: forms.NgControl, decorators: [{ type: core.Optional }] },
-            { type: FsFormDirective, decorators: [{ type: core.Optional }, { type: core.Inject, args: [FsFormDirective,] }] }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsControlDirective.prototype, "wrapperSelector", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsControlDirective.prototype, "messageSelector", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsControlDirective.prototype, "hintSelector", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsControlDirective.prototype, "labelSelector", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsControlDirective.prototype, "appendMessageClass", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsControlDirective.prototype, "appendLabelClass", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsControlDirective.prototype, "appendErrorClass", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsControlDirective.prototype, "appendHintClass", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], FsControlDirective.prototype, "validateMessages", null);
-        FsControlDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormControl]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            }),
-            __param(3, core.Self()), __param(3, core.Inject(VALIDATE_MESSAGES)),
-            __param(4, core.Optional()),
-            __param(5, core.Optional()), __param(5, core.Inject(FsFormDirective)),
-            __metadata("design:paramtypes", [core.ElementRef,
-                core.Renderer2,
-                core.Injector, Object, forms.NgControl,
-                FsFormDirective])
-        ], FsControlDirective);
-        return FsControlDirective;
+    var FsControlDirective = /** @class */ (function () {
+        function FsControlDirective(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 = [];
+            // protected _validateMessages = { ...ERROR_MESSAGES };
+            this._destroy$ = new rxjs.Subject();
+            if (ngControl) {
+                this._control = ngControl.control;
+            }
+            else {
+                console.error('The element does not have a valid ngModel', this.elementRef.nativeElement);
+            }
+        }
+        Object.defineProperty(FsControlDirective.prototype, "validateMessages", {
+            set: function (messages) {
+                this._validateMessages = __assign(__assign({}, this._validateMessages), messages);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsControlDirective.prototype.ngOnInit = function () {
+            this._setupValidators();
+        };
+        FsControlDirective.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsControlDirective.prototype.ngAfterContentInit = function () {
+            if (this._control) {
+                /*
+                  Ensure that statusChanges has one subscription per control. Multiple can happen
+                  when multiple fsForm validation directives are applied to the same element
+                */
+                if (!this._control.statusChangesSubscribe) {
+                    this._control.statusChanges
+                        .pipe(operators.takeUntil(this._destroy$))
+                        .subscribe(this.render.bind(this));
+                    this._control.statusChangesSubscribe = true;
+                }
+            }
+        };
+        FsControlDirective.prototype.getMessageSelector = function () {
+            if (this.messageSelector === false) {
+                return '';
+            }
+            if (this.messageSelector) {
+                return this.messageSelector;
+            }
+            else if (this.formDirective && this.formDirective.messageSelector) {
+                return this.formDirective.messageSelector;
+            }
+        };
+        FsControlDirective.prototype.getHintWrapperSelector = function () {
+            if (this.hintSelector === false) {
+                return '';
+            }
+            if (this.hintSelector) {
+                return this.hintSelector;
+            }
+            else if (this.formDirective && this.formDirective.hintSelector) {
+                return this.formDirective.hintSelector;
+            }
+        };
+        FsControlDirective.prototype.getWrapperSelector = function () {
+            if (this.wrapperSelector === false) {
+                return '';
+            }
+            if (this.wrapperSelector) {
+                return this.wrapperSelector;
+            }
+            else if (this.formDirective && this.formDirective.wrapperSelector) {
+                return this.formDirective.wrapperSelector;
+            }
+        };
+        FsControlDirective.prototype.getlabelSelector = function () {
+            if (this.labelSelector === false) {
+                return '';
+            }
+            if (this.labelSelector) {
+                return this.labelSelector;
+            }
+            else if (this.formDirective && this.formDirective.labelSelector) {
+                return this.formDirective.labelSelector;
+            }
+        };
+        FsControlDirective.prototype.getWrapperElement = function () {
+            var 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>
+        */
+        FsControlDirective.prototype.render = function () {
+            var _a;
+            if (this.ngControl) {
+                var renderer = this.renderer2;
+                var wrapper = this.getWrapperElement();
+                var error = this.ngControl.dirty ? this.getError(this.ngControl) : null;
+                if (!this.getMessageSelector()) {
+                    return;
+                }
+                var messageWrapper = wrapper.querySelector(this.getMessageSelector());
+                if (!messageWrapper) {
+                    return console.warn('Failed to locate ' + this.getMessageSelector(), this.elementRef.nativeElement);
+                }
+                if (this.getlabelSelector()) {
+                    var 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()) {
+                    var hint = messageWrapper.querySelector(this.getHintWrapperSelector());
+                    if (hint) {
+                        renderer.setStyle(hint, 'display', error ? 'none' : 'block');
+                        if (this.appendHintClass) {
+                            renderer.addClass(hint, this.appendHintClass);
+                        }
+                    }
+                }
+                var errorWrapper = wrapper.querySelector('.fs-form-error-target');
+                if (errorWrapper) {
+                    errorWrapper.remove();
+                }
+                wrapper.classList.remove('ng-invalid');
+                var shouldErrorBeRendered = this.ngControl.invalid
+                    && (this.ngControl.dirty || ((_a = this.formDirective.ngForm) === null || _a === void 0 ? void 0 : _a.submitted));
+                if (!shouldErrorBeRendered || !error) {
+                    return;
+                }
+                wrapper.classList.add('ng-invalid');
+                errorWrapper = renderer.createElement('div');
+                renderer.addClass(errorWrapper, 'fs-form-error-target');
+                renderer.addClass(errorWrapper, this.appendErrorClass);
+                renderer.addClass(errorWrapper, this.appendErrorClass + '-' + error.name);
+                var errorText = renderer.createText(error.message);
+                renderer.appendChild(errorWrapper, errorText);
+                messageWrapper.appendChild(errorWrapper);
+            }
+        };
+        FsControlDirective.prototype.getWrapper = function (node, count) {
+            if (count === void 0) { count = 0; }
+            if (!node || count > 10) {
+                return null;
+            }
+            if (node.parentNode && node.parentNode.querySelector(this.getWrapperSelector())) {
+                return node;
+            }
+            return this.getWrapper(node.parentNode, ++count);
+        };
+        FsControlDirective.prototype.parseErrorMessage = function (message, args) {
+            lodashEs.values(args)
+                .forEach(function (name) {
+                message = message.replace(/\$\(\d\)/, name);
+            });
+            return message;
+        };
+        FsControlDirective.prototype.getError = function (controlRef) {
+            var name = lodashEs.keys(controlRef.control.errors)[0];
+            if (!name) {
+                return null;
+            }
+            var message = controlRef.control.errors[name];
+            if (this._validateMessages[name]) {
+                message = this.parseErrorMessage(this._validateMessages[name], message);
+            }
+            return { name: name, message: message };
+        };
+        FsControlDirective.prototype._setupValidators = function () {
+            var control = this._control;
+            if (this.validate) {
+                var validators = control.validator
+                    ? [control.validator, this.validate.bind(this)]
+                    : this.validate.bind(this);
+                control.setValidators(validators);
+            }
+            if (this.validateAsync) {
+                var asyncValidators = control.asyncValidator
+                    ? [control.asyncValidator, this.validateAsync.bind(this)]
+                    : this.validateAsync.bind(this);
+                control.setAsyncValidators(asyncValidators);
+            }
+            control.updateValueAndValidity();
+        };
+        FsControlDirective.ctorParameters = function () { return [
+            { type: core.ElementRef },
+            { type: core.Renderer2 },
+            { type: core.Injector },
+            { type: undefined, decorators: [{ type: core.Self }, { type: core.Inject, args: [VALIDATE_MESSAGES,] }] },
+            { type: forms.NgControl, decorators: [{ type: core.Optional }] },
+            { type: FsFormDirective, decorators: [{ type: core.Optional }, { type: core.Inject, args: [FsFormDirective,] }] }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsControlDirective.prototype, "wrapperSelector", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsControlDirective.prototype, "messageSelector", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsControlDirective.prototype, "hintSelector", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsControlDirective.prototype, "labelSelector", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsControlDirective.prototype, "appendMessageClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsControlDirective.prototype, "appendLabelClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsControlDirective.prototype, "appendErrorClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsControlDirective.prototype, "appendHintClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], FsControlDirective.prototype, "validateMessages", null);
+        FsControlDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormControl]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            }),
+            __param(3, core.Self()), __param(3, core.Inject(VALIDATE_MESSAGES)),
+            __param(4, core.Optional()),
+            __param(5, core.Optional()), __param(5, core.Inject(FsFormDirective)),
+            __metadata("design:paramtypes", [core.ElementRef,
+                core.Renderer2,
+                core.Injector, Object, forms.NgControl,
+                FsFormDirective])
+        ], FsControlDirective);
+        return FsControlDirective;
     }());
 
-    function isEnabled(value) {
-        return value !== 'false' && (value || value === '');
+    function isEnabled(value) {
+        return value !== 'false' && (value || value === '');
     }
 
-    var FsFormRequiredDirective = /** @class */ (function (_super) {
-        __extends(FsFormRequiredDirective, _super);
-        function FsFormRequiredDirective() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.required = false;
-            return _this;
-        }
-        Object.defineProperty(FsFormRequiredDirective.prototype, "setFsFormRequired", {
-            set: function (value) {
-                this.required = isEnabled(value);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(FsFormRequiredDirective.prototype, "setRequired", {
-            set: function (value) {
-                this.required = isEnabled(value);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(FsFormRequiredDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.required = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormRequiredDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormRequiredDirective.prototype.validate = function (control) {
-            if (this.required) {
-                return forms.Validators.required(this._control);
-            }
-            else {
-                return null;
-            }
-        };
-        FsFormRequiredDirective.prototype.render = function () {
-            var wrapper = this.getWrapperElement();
-            if (wrapper && this.getlabelSelector()) {
-                var 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.prototype.render.call(this);
-        };
-        __decorate([
-            core.Input('fsFormRequired'),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], FsFormRequiredDirective.prototype, "setFsFormRequired", null);
-        __decorate([
-            core.Input('required'),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], FsFormRequiredDirective.prototype, "setRequired", null);
-        __decorate([
-            core.Input('fsFormRequiredMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormRequiredDirective.prototype, "validationMessage", null);
-        FsFormRequiredDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormRequired],[ngModel][required]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormRequiredDirective);
-        return FsFormRequiredDirective;
+    var FsFormRequiredDirective = /** @class */ (function (_super) {
+        __extends(FsFormRequiredDirective, _super);
+        function FsFormRequiredDirective() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.required = false;
+            return _this;
+        }
+        Object.defineProperty(FsFormRequiredDirective.prototype, "setFsFormRequired", {
+            set: function (value) {
+                this.required = isEnabled(value);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(FsFormRequiredDirective.prototype, "setRequired", {
+            set: function (value) {
+                this.required = isEnabled(value);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(FsFormRequiredDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.required = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormRequiredDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormRequiredDirective.prototype.validate = function (control) {
+            if (this.required) {
+                return forms.Validators.required(this._control);
+            }
+            else {
+                return null;
+            }
+        };
+        FsFormRequiredDirective.prototype.render = function () {
+            var wrapper = this.getWrapperElement();
+            if (wrapper && this.getlabelSelector()) {
+                var 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.prototype.render.call(this);
+        };
+        __decorate([
+            core.Input('fsFormRequired'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], FsFormRequiredDirective.prototype, "setFsFormRequired", null);
+        __decorate([
+            core.Input('required'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], FsFormRequiredDirective.prototype, "setRequired", null);
+        __decorate([
+            core.Input('fsFormRequiredMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormRequiredDirective.prototype, "validationMessage", null);
+        FsFormRequiredDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormRequired],[ngModel][required]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormRequiredDirective);
+        return FsFormRequiredDirective;
     }(FsControlDirective));
 
-    var FsValidators = /** @class */ (function () {
-        function FsValidators() {
-        }
-        FsValidators.email = function (control) {
-            if (!control.value || common$1.email(control.value)) {
-                return null;
-            }
-            return { email: true };
-        };
-        FsValidators.emails = function (control) {
-            var model = control.value || '';
-            var hasInvalidEmails = model
-                .split(',')
-                .some(function (part) { return !common$1.email(part); });
-            return hasInvalidEmails ? { email: true } : null;
-        };
-        FsValidators.numeric = function (control) {
-            if (common$1.isEmpty(control.value) || common$1.isNumeric(control.value)) {
-                return null;
-            }
-            else {
-                return { numeric: true };
-            }
-        };
-        FsValidators.integer = function (control) {
-            if (!control.value || String(control.value) === '' || (control.value % 1 === 0)) {
-                return null;
-            }
-            else {
-                return { integer: true };
-            }
-        };
-        FsValidators.phone = function (control) {
-            if (!control.value || common$1.phone(control.value)) {
-                return null;
-            }
-            return { phone: true };
-        };
-        FsValidators.url = function (control, protocolRequired) {
-            if (protocolRequired === void 0) { protocolRequired = false; }
-            if (!control.value) {
-                return null;
-            }
-            if (!common$1.url(control.value)) {
-                return { url: true };
-            }
-            if (protocolRequired) {
-                var pattern = new RegExp(/^http(s)?:\/\//gm);
-                if (!String(control.value).match(pattern)) {
-                    return { urlProtocol: true };
-                }
-            }
-            return null;
-        };
-        FsValidators.dateRange = function (control) {
-            if (!control.value) {
-                return null;
-            }
-            if (lodashEs.isObject(control.value)) {
-                var start = control.value.start;
-                var end = control.value.end;
-                if ((!start && !end) || (dateFns.isValid(start) && dateFns.isValid(end))) {
-                    return null;
-                }
-            }
-            return { dateRange: true };
-        };
-        FsValidators.func = function (control, formFunction, data) {
-            var result;
-            var stream$;
-            try {
-                result = formFunction(control, data);
-            }
-            catch (err) {
-                err = err instanceof Error ? err.message : err;
-                stream$ = rxjs.throwError(err);
-            }
-            if (!stream$) {
-                if (result instanceof Promise) {
-                    stream$ = rxjs.from(result);
-                }
-                else if (rxjs.isObservable(result)) {
-                    stream$ = result;
-                }
-                else {
-                    stream$ = rxjs.of(null);
-                }
-            }
-            return stream$
-                .pipe(operators.map(function () { return null; }), operators.catchError(function (err) {
-                return rxjs.of({ validationError: err });
-            }), operators.take(1));
-        };
-        return FsValidators;
+    var FsValidators = /** @class */ (function () {
+        function FsValidators() {
+        }
+        FsValidators.email = function (control) {
+            if (!control.value || common$1.email(control.value)) {
+                return null;
+            }
+            return { email: true };
+        };
+        FsValidators.emails = function (control) {
+            var model = control.value || '';
+            var hasInvalidEmails = model
+                .split(',')
+                .some(function (part) { return !common$1.email(part); });
+            return hasInvalidEmails ? { email: true } : null;
+        };
+        FsValidators.numeric = function (control) {
+            if (common$1.isEmpty(control.value) || common$1.isNumeric(control.value)) {
+                return null;
+            }
+            else {
+                return { numeric: true };
+            }
+        };
+        FsValidators.integer = function (control) {
+            if (!control.value || String(control.value) === '' || (control.value % 1 === 0)) {
+                return null;
+            }
+            else {
+                return { integer: true };
+            }
+        };
+        FsValidators.phone = function (control) {
+            if (!control.value || common$1.phone(control.value)) {
+                return null;
+            }
+            return { phone: true };
+        };
+        FsValidators.url = function (control, protocolRequired) {
+            if (protocolRequired === void 0) { protocolRequired = false; }
+            if (!control.value) {
+                return null;
+            }
+            if (!common$1.url(control.value)) {
+                return { url: true };
+            }
+            if (protocolRequired) {
+                var pattern = new RegExp(/^http(s)?:\/\//gm);
+                if (!String(control.value).match(pattern)) {
+                    return { urlProtocol: true };
+                }
+            }
+            return null;
+        };
+        FsValidators.dateRange = function (control) {
+            if (!control.value) {
+                return null;
+            }
+            if (lodashEs.isObject(control.value)) {
+                var start = control.value.start;
+                var end = control.value.end;
+                if ((!start && !end) || (dateFns.isValid(start) && dateFns.isValid(end))) {
+                    return null;
+                }
+            }
+            return { dateRange: true };
+        };
+        FsValidators.func = function (control, formFunction, data) {
+            var result;
+            var stream$;
+            try {
+                result = formFunction(control, data);
+            }
+            catch (err) {
+                err = err instanceof Error ? err.message : err;
+                stream$ = rxjs.throwError(err);
+            }
+            if (!stream$) {
+                if (result instanceof Promise) {
+                    stream$ = rxjs.from(result);
+                }
+                else if (rxjs.isObservable(result)) {
+                    stream$ = result;
+                }
+                else {
+                    stream$ = rxjs.of(null);
+                }
+            }
+            return stream$
+                .pipe(operators.map(function () { return null; }), operators.catchError(function (err) {
+                return rxjs.of({ validationError: err });
+            }), operators.take(1));
+        };
+        return FsValidators;
     }());
 
-    var FsFormMinDirective = /** @class */ (function (_super) {
-        __extends(FsFormMinDirective, _super);
-        function FsFormMinDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormMinDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.min = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormMinDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormMinDirective.prototype.validate = function (control) {
-            return FsValidators.numeric(this._control) || forms.Validators.min(parseFloat(this.fsFormMin))(this._control);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormMinDirective.prototype, "fsFormMin", void 0);
-        __decorate([
-            core.Input('fsFormMinMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormMinDirective.prototype, "validationMessage", null);
-        FsFormMinDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormMin]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormMinDirective);
-        return FsFormMinDirective;
+    var FsFormMinDirective = /** @class */ (function (_super) {
+        __extends(FsFormMinDirective, _super);
+        function FsFormMinDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormMinDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.min = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormMinDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormMinDirective.prototype.validate = function (control) {
+            return FsValidators.numeric(this._control) || forms.Validators.min(parseFloat(this.fsFormMin))(this._control);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormMinDirective.prototype, "fsFormMin", void 0);
+        __decorate([
+            core.Input('fsFormMinMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormMinDirective.prototype, "validationMessage", null);
+        FsFormMinDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormMin]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormMinDirective);
+        return FsFormMinDirective;
     }(FsControlDirective));
 
-    var FsFormMaxDirective = /** @class */ (function (_super) {
-        __extends(FsFormMaxDirective, _super);
-        function FsFormMaxDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormMaxDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.max = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormMaxDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormMaxDirective.prototype.validate = function (control) {
-            return FsValidators.numeric(this._control) || forms.Validators.max(this.fsFormMax)(this._control);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Number)
-        ], FsFormMaxDirective.prototype, "fsFormMax", void 0);
-        __decorate([
-            core.Input('fsFormMaxMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormMaxDirective.prototype, "validationMessage", null);
-        FsFormMaxDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormMax]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormMaxDirective);
-        return FsFormMaxDirective;
+    var FsFormMaxDirective = /** @class */ (function (_super) {
+        __extends(FsFormMaxDirective, _super);
+        function FsFormMaxDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormMaxDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.max = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormMaxDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormMaxDirective.prototype.validate = function (control) {
+            return FsValidators.numeric(this._control) || forms.Validators.max(this.fsFormMax)(this._control);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], FsFormMaxDirective.prototype, "fsFormMax", void 0);
+        __decorate([
+            core.Input('fsFormMaxMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormMaxDirective.prototype, "validationMessage", null);
+        FsFormMaxDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormMax]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormMaxDirective);
+        return FsFormMaxDirective;
     }(FsControlDirective));
 
-    var FsFormMinLengthDirective = /** @class */ (function (_super) {
-        __extends(FsFormMinLengthDirective, _super);
-        function FsFormMinLengthDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormMinLengthDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.minlength = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormMinLengthDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormMinLengthDirective.prototype.validate = function (control) {
-            return forms.Validators.minLength(this.fsFormMinLength)(this._control);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Number)
-        ], FsFormMinLengthDirective.prototype, "fsFormMinLength", void 0);
-        __decorate([
-            core.Input('fsFormMinLengthMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormMinLengthDirective.prototype, "validationMessage", null);
-        FsFormMinLengthDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormMinLength]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormMinLengthDirective);
-        return FsFormMinLengthDirective;
+    var FsFormMinLengthDirective = /** @class */ (function (_super) {
+        __extends(FsFormMinLengthDirective, _super);
+        function FsFormMinLengthDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormMinLengthDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.minlength = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormMinLengthDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormMinLengthDirective.prototype.validate = function (control) {
+            return forms.Validators.minLength(this.fsFormMinLength)(this._control);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], FsFormMinLengthDirective.prototype, "fsFormMinLength", void 0);
+        __decorate([
+            core.Input('fsFormMinLengthMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormMinLengthDirective.prototype, "validationMessage", null);
+        FsFormMinLengthDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormMinLength]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormMinLengthDirective);
+        return FsFormMinLengthDirective;
     }(FsControlDirective));
 
-    var FsFormMaxLengthDirective = /** @class */ (function (_super) {
-        __extends(FsFormMaxLengthDirective, _super);
-        function FsFormMaxLengthDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormMaxLengthDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.maxlength = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormMaxLengthDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormMaxLengthDirective.prototype.validate = function (control) {
-            return forms.Validators.maxLength(this.fsFormMaxLength)(this._control);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Number)
-        ], FsFormMaxLengthDirective.prototype, "fsFormMaxLength", void 0);
-        __decorate([
-            core.Input('fsFormMaxLengthMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormMaxLengthDirective.prototype, "validationMessage", null);
-        FsFormMaxLengthDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormMaxLength]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormMaxLengthDirective);
-        return FsFormMaxLengthDirective;
+    var FsFormMaxLengthDirective = /** @class */ (function (_super) {
+        __extends(FsFormMaxLengthDirective, _super);
+        function FsFormMaxLengthDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormMaxLengthDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.maxlength = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormMaxLengthDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormMaxLengthDirective.prototype.validate = function (control) {
+            return forms.Validators.maxLength(this.fsFormMaxLength)(this._control);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], FsFormMaxLengthDirective.prototype, "fsFormMaxLength", void 0);
+        __decorate([
+            core.Input('fsFormMaxLengthMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormMaxLengthDirective.prototype, "validationMessage", null);
+        FsFormMaxLengthDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormMaxLength]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormMaxLengthDirective);
+        return FsFormMaxLengthDirective;
     }(FsControlDirective));
 
-    var FsFormEmailDirective = /** @class */ (function (_super) {
-        __extends(FsFormEmailDirective, _super);
-        function FsFormEmailDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormEmailDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.email = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormEmailDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormEmailDirective.prototype.validate = function (control) {
-            if (isEnabled(this.fsFormEmail)) {
-                return FsValidators.email(this._control);
-            }
-            else {
-                return null;
-            }
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormEmailDirective.prototype, "fsFormEmail", void 0);
-        __decorate([
-            core.Input('fsFormEmailMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormEmailDirective.prototype, "validationMessage", null);
-        FsFormEmailDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormEmail]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormEmailDirective);
-        return FsFormEmailDirective;
+    var FsFormEmailDirective = /** @class */ (function (_super) {
+        __extends(FsFormEmailDirective, _super);
+        function FsFormEmailDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormEmailDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.email = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormEmailDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormEmailDirective.prototype.validate = function (control) {
+            if (isEnabled(this.fsFormEmail)) {
+                return FsValidators.email(this._control);
+            }
+            else {
+                return null;
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormEmailDirective.prototype, "fsFormEmail", void 0);
+        __decorate([
+            core.Input('fsFormEmailMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormEmailDirective.prototype, "validationMessage", null);
+        FsFormEmailDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormEmail]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormEmailDirective);
+        return FsFormEmailDirective;
     }(FsControlDirective));
 
-    var FsFormEmailsDirective = /** @class */ (function (_super) {
-        __extends(FsFormEmailsDirective, _super);
-        function FsFormEmailsDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormEmailsDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.emails = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormEmailsDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormEmailsDirective.prototype.validate = function (control) {
-            if (isEnabled(this.fsFormEmails)) {
-                return FsValidators.emails(this._control);
-            }
-            else {
-                return null;
-            }
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormEmailsDirective.prototype, "fsFormEmails", void 0);
-        __decorate([
-            core.Input('fsFormEmailsMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormEmailsDirective.prototype, "validationMessage", null);
-        FsFormEmailsDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormEmails]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormEmailsDirective);
-        return FsFormEmailsDirective;
+    var FsFormEmailsDirective = /** @class */ (function (_super) {
+        __extends(FsFormEmailsDirective, _super);
+        function FsFormEmailsDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormEmailsDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.emails = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormEmailsDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormEmailsDirective.prototype.validate = function (control) {
+            if (isEnabled(this.fsFormEmails)) {
+                return FsValidators.emails(this._control);
+            }
+            else {
+                return null;
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormEmailsDirective.prototype, "fsFormEmails", void 0);
+        __decorate([
+            core.Input('fsFormEmailsMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormEmailsDirective.prototype, "validationMessage", null);
+        FsFormEmailsDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormEmails]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormEmailsDirective);
+        return FsFormEmailsDirective;
     }(FsControlDirective));
 
-    var FsFormPhoneDirective = /** @class */ (function (_super) {
-        __extends(FsFormPhoneDirective, _super);
-        function FsFormPhoneDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormPhoneDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.phone = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormPhoneDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormPhoneDirective.prototype.validate = function (control) {
-            if (isEnabled(this.fsFormPhone)) {
-                return FsValidators.phone(this._control);
-            }
-            else {
-                return null;
-            }
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormPhoneDirective.prototype, "fsFormPhone", void 0);
-        __decorate([
-            core.Input('fsFormPhoneMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormPhoneDirective.prototype, "validationMessage", null);
-        FsFormPhoneDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormPhone]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormPhoneDirective);
-        return FsFormPhoneDirective;
+    var FsFormPhoneDirective = /** @class */ (function (_super) {
+        __extends(FsFormPhoneDirective, _super);
+        function FsFormPhoneDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormPhoneDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.phone = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormPhoneDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormPhoneDirective.prototype.validate = function (control) {
+            if (isEnabled(this.fsFormPhone)) {
+                return FsValidators.phone(this._control);
+            }
+            else {
+                return null;
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormPhoneDirective.prototype, "fsFormPhone", void 0);
+        __decorate([
+            core.Input('fsFormPhoneMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormPhoneDirective.prototype, "validationMessage", null);
+        FsFormPhoneDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormPhone]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormPhoneDirective);
+        return FsFormPhoneDirective;
     }(FsControlDirective));
 
-    var FsFormCompareDirective = /** @class */ (function (_super) {
-        __extends(FsFormCompareDirective, _super);
-        function FsFormCompareDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormCompareDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.compare = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormCompareDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormCompareDirective.prototype.validate = function (control) {
-            if (this.fsFormCompare.value === this.elementRef.nativeElement.value) {
-                return null;
-            }
-            else {
-                return { compare: true };
-            }
-        };
-        FsFormCompareDirective.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.fsFormCompare.addEventListener('keyup', function () {
-                _this._control.updateValueAndValidity();
-            }, false);
-        };
-        FsFormCompareDirective.prototype.ngOnDestroy = function () {
-            var _this = this;
-            this.fsFormCompare.removeEventListener('keyup', function () {
-                _this._control.updateValueAndValidity();
-            }, false);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormCompareDirective.prototype, "fsFormCompare", void 0);
-        __decorate([
-            core.Input('fsFormCompareMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormCompareDirective.prototype, "validationMessage", null);
-        FsFormCompareDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormCompare]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER,
-                ],
-            })
-        ], FsFormCompareDirective);
-        return FsFormCompareDirective;
+    var FsFormCompareDirective = /** @class */ (function (_super) {
+        __extends(FsFormCompareDirective, _super);
+        function FsFormCompareDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormCompareDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.compare = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormCompareDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormCompareDirective.prototype.validate = function (control) {
+            if (this.fsFormCompare.value === this.elementRef.nativeElement.value) {
+                return null;
+            }
+            else {
+                return { compare: true };
+            }
+        };
+        FsFormCompareDirective.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.fsFormCompare.addEventListener('keyup', function () {
+                _this._control.updateValueAndValidity();
+            }, false);
+        };
+        FsFormCompareDirective.prototype.ngOnDestroy = function () {
+            var _this = this;
+            this.fsFormCompare.removeEventListener('keyup', function () {
+                _this._control.updateValueAndValidity();
+            }, false);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormCompareDirective.prototype, "fsFormCompare", void 0);
+        __decorate([
+            core.Input('fsFormCompareMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormCompareDirective.prototype, "validationMessage", null);
+        FsFormCompareDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormCompare]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER,
+                ],
+            })
+        ], FsFormCompareDirective);
+        return FsFormCompareDirective;
     }(FsControlDirective));
 
-    var FsFormIntegerDirective = /** @class */ (function (_super) {
-        __extends(FsFormIntegerDirective, _super);
-        function FsFormIntegerDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormIntegerDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.integer = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormIntegerDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormIntegerDirective.prototype.validate = function (control) {
-            if (isEnabled(this.fsFormInteger)) {
-                return FsValidators.integer(this._control);
-            }
-            else {
-                return null;
-            }
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormIntegerDirective.prototype, "fsFormInteger", void 0);
-        __decorate([
-            core.Input('fsFormIntegerMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormIntegerDirective.prototype, "validationMessage", null);
-        FsFormIntegerDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormInteger]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormIntegerDirective);
-        return FsFormIntegerDirective;
+    var FsFormIntegerDirective = /** @class */ (function (_super) {
+        __extends(FsFormIntegerDirective, _super);
+        function FsFormIntegerDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormIntegerDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.integer = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormIntegerDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormIntegerDirective.prototype.validate = function (control) {
+            if (isEnabled(this.fsFormInteger)) {
+                return FsValidators.integer(this._control);
+            }
+            else {
+                return null;
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormIntegerDirective.prototype, "fsFormInteger", void 0);
+        __decorate([
+            core.Input('fsFormIntegerMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormIntegerDirective.prototype, "validationMessage", null);
+        FsFormIntegerDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormInteger]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormIntegerDirective);
+        return FsFormIntegerDirective;
     }(FsControlDirective));
 
-    var FsFormNumericDirective = /** @class */ (function (_super) {
-        __extends(FsFormNumericDirective, _super);
-        function FsFormNumericDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormNumericDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.numeric = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormNumericDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormNumericDirective.prototype.validate = function (control) {
-            if (isEnabled(this.fsFormNumeric)) {
-                return FsValidators.numeric(this._control);
-            }
-            else {
-                return null;
-            }
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormNumericDirective.prototype, "fsFormNumeric", void 0);
-        __decorate([
-            core.Input('fsFormNumericMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormNumericDirective.prototype, "validationMessage", null);
-        FsFormNumericDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormNumeric]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormNumericDirective);
-        return FsFormNumericDirective;
+    var FsFormNumericDirective = /** @class */ (function (_super) {
+        __extends(FsFormNumericDirective, _super);
+        function FsFormNumericDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormNumericDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.numeric = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormNumericDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormNumericDirective.prototype.validate = function (control) {
+            if (isEnabled(this.fsFormNumeric)) {
+                return FsValidators.numeric(this._control);
+            }
+            else {
+                return null;
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormNumericDirective.prototype, "fsFormNumeric", void 0);
+        __decorate([
+            core.Input('fsFormNumericMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormNumericDirective.prototype, "validationMessage", null);
+        FsFormNumericDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormNumeric]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormNumericDirective);
+        return FsFormNumericDirective;
     }(FsControlDirective));
 
-    var FsFormPatternDirective = /** @class */ (function (_super) {
-        __extends(FsFormPatternDirective, _super);
-        function FsFormPatternDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormPatternDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.pattern = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormPatternDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormPatternDirective.prototype.validate = function (control) {
-            return forms.Validators.pattern(this.fsFormPattern)(this._control);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", RegExp)
-        ], FsFormPatternDirective.prototype, "fsFormPattern", void 0);
-        __decorate([
-            core.Input('fsFormPatternMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormPatternDirective.prototype, "validationMessage", null);
-        FsFormPatternDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormPattern]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormPatternDirective);
-        return FsFormPatternDirective;
+    var FsFormPatternDirective = /** @class */ (function (_super) {
+        __extends(FsFormPatternDirective, _super);
+        function FsFormPatternDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormPatternDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.pattern = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormPatternDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormPatternDirective.prototype.validate = function (control) {
+            return forms.Validators.pattern(this.fsFormPattern)(this._control);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", RegExp)
+        ], FsFormPatternDirective.prototype, "fsFormPattern", void 0);
+        __decorate([
+            core.Input('fsFormPatternMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormPatternDirective.prototype, "validationMessage", null);
+        FsFormPatternDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormPattern]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormPatternDirective);
+        return FsFormPatternDirective;
     }(FsControlDirective));
 
-    var FsFormFunctionDirective = /** @class */ (function (_super) {
-        __extends(FsFormFunctionDirective, _super);
-        function FsFormFunctionDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        FsFormFunctionDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormFunctionDirective.prototype.validateAsync = function (control) {
-            return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormFunctionDirective.prototype, "fsFormFunction", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormFunctionDirective.prototype, "fsFormFunctionData", void 0);
-        FsFormFunctionDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormFunction]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormFunctionDirective);
-        return FsFormFunctionDirective;
+    var FsFormFunctionDirective = /** @class */ (function (_super) {
+        __extends(FsFormFunctionDirective, _super);
+        function FsFormFunctionDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        FsFormFunctionDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormFunctionDirective.prototype.validateAsync = function (control) {
+            return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormFunctionDirective.prototype, "fsFormFunction", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormFunctionDirective.prototype, "fsFormFunctionData", void 0);
+        FsFormFunctionDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormFunction]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormFunctionDirective);
+        return FsFormFunctionDirective;
     }(FsControlDirective));
 
-    var FsFormGreaterDirective = /** @class */ (function (_super) {
-        __extends(FsFormGreaterDirective, _super);
-        function FsFormGreaterDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormGreaterDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.greater = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormGreaterDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormGreaterDirective.prototype.validate = function (control) {
-            var greater = parseFloat(this.fsFormGreater);
-            var value = parseFloat(this._control.value);
-            if (!isNaN(greater) && !isNaN(value) && value <= greater) {
-                return { greater: { greater: greater, actual: value } };
-            }
-            return FsValidators.numeric(this._control);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormGreaterDirective.prototype, "fsFormGreater", void 0);
-        __decorate([
-            core.Input('fsFormGreaterMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormGreaterDirective.prototype, "validationMessage", null);
-        FsFormGreaterDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormGreater]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormGreaterDirective);
-        return FsFormGreaterDirective;
+    var FsFormGreaterDirective = /** @class */ (function (_super) {
+        __extends(FsFormGreaterDirective, _super);
+        function FsFormGreaterDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormGreaterDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.greater = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormGreaterDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormGreaterDirective.prototype.validate = function (control) {
+            var greater = parseFloat(this.fsFormGreater);
+            var value = parseFloat(this._control.value);
+            if (!isNaN(greater) && !isNaN(value) && value <= greater) {
+                return { greater: { greater: greater, actual: value } };
+            }
+            return FsValidators.numeric(this._control);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormGreaterDirective.prototype, "fsFormGreater", void 0);
+        __decorate([
+            core.Input('fsFormGreaterMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormGreaterDirective.prototype, "validationMessage", null);
+        FsFormGreaterDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormGreater]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormGreaterDirective);
+        return FsFormGreaterDirective;
     }(FsControlDirective));
 
-    var FsFormDateRangeDirective = /** @class */ (function (_super) {
-        __extends(FsFormDateRangeDirective, _super);
-        function FsFormDateRangeDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormDateRangeDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.dateRange = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormDateRangeDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormDateRangeDirective.prototype.validate = function (control) {
-            if (isEnabled(this.fsFormDateRange)) {
-                return FsValidators.dateRange(this._control);
-            }
-            else {
-                return null;
-            }
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDateRangeDirective.prototype, "fsFormDateRange", void 0);
-        __decorate([
-            core.Input('fsFormDateRangeMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormDateRangeDirective.prototype, "validationMessage", null);
-        FsFormDateRangeDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormDateRange]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormDateRangeDirective);
-        return FsFormDateRangeDirective;
+    var FsFormDateRangeDirective = /** @class */ (function (_super) {
+        __extends(FsFormDateRangeDirective, _super);
+        function FsFormDateRangeDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormDateRangeDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.dateRange = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormDateRangeDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormDateRangeDirective.prototype.validate = function (control) {
+            if (isEnabled(this.fsFormDateRange)) {
+                return FsValidators.dateRange(this._control);
+            }
+            else {
+                return null;
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDateRangeDirective.prototype, "fsFormDateRange", void 0);
+        __decorate([
+            core.Input('fsFormDateRangeMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormDateRangeDirective.prototype, "validationMessage", null);
+        FsFormDateRangeDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormDateRange]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormDateRangeDirective);
+        return FsFormDateRangeDirective;
     }(FsControlDirective));
 
-    var FsFormLesserDirective = /** @class */ (function (_super) {
-        __extends(FsFormLesserDirective, _super);
-        function FsFormLesserDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(FsFormLesserDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.lesser = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormLesserDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormLesserDirective.prototype.validate = function (control) {
-            var lesser = parseFloat(this.fsFormLesser);
-            var value = parseFloat(this._control.value);
-            if (!isNaN(lesser) && !isNaN(value) && value >= lesser) {
-                return { lesser: { lesser: lesser, actual: value } };
-            }
-            return FsValidators.numeric(this._control);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormLesserDirective.prototype, "fsFormLesser", void 0);
-        __decorate([
-            core.Input('fsFormLesserMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormLesserDirective.prototype, "validationMessage", null);
-        FsFormLesserDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormLesser]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormLesserDirective);
-        return FsFormLesserDirective;
+    var FsFormLesserDirective = /** @class */ (function (_super) {
+        __extends(FsFormLesserDirective, _super);
+        function FsFormLesserDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FsFormLesserDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.lesser = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormLesserDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormLesserDirective.prototype.validate = function (control) {
+            var lesser = parseFloat(this.fsFormLesser);
+            var value = parseFloat(this._control.value);
+            if (!isNaN(lesser) && !isNaN(value) && value >= lesser) {
+                return { lesser: { lesser: lesser, actual: value } };
+            }
+            return FsValidators.numeric(this._control);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormLesserDirective.prototype, "fsFormLesser", void 0);
+        __decorate([
+            core.Input('fsFormLesserMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormLesserDirective.prototype, "validationMessage", null);
+        FsFormLesserDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormLesser]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormLesserDirective);
+        return FsFormLesserDirective;
     }(FsControlDirective));
 
-    var FsFormUrlDirective = /** @class */ (function (_super) {
-        __extends(FsFormUrlDirective, _super);
-        function FsFormUrlDirective() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.fsFormUrlProtocol = false;
-            return _this;
-        }
-        Object.defineProperty(FsFormUrlDirective.prototype, "validationMessage", {
-            set: function (value) {
-                this._validateMessages.url = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsFormUrlDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormUrlDirective.prototype.validate = function (control) {
-            if (isEnabled(this.fsFormUrl)) {
-                return FsValidators.url(this._control, this.fsFormUrlProtocol);
-            }
-            else {
-                return null;
-            }
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormUrlDirective.prototype, "fsFormUrl", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormUrlDirective.prototype, "fsFormUrlProtocol", void 0);
-        __decorate([
-            core.Input('fsFormUrlMessage'),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], FsFormUrlDirective.prototype, "validationMessage", null);
-        FsFormUrlDirective = __decorate([
-            core.Directive({
-                selector: '[fsFormUrl]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormUrlDirective);
-        return FsFormUrlDirective;
+    var FsFormUrlDirective = /** @class */ (function (_super) {
+        __extends(FsFormUrlDirective, _super);
+        function FsFormUrlDirective() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.fsFormUrlProtocol = false;
+            return _this;
+        }
+        Object.defineProperty(FsFormUrlDirective.prototype, "validationMessage", {
+            set: function (value) {
+                this._validateMessages.url = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsFormUrlDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormUrlDirective.prototype.validate = function (control) {
+            if (isEnabled(this.fsFormUrl)) {
+                return FsValidators.url(this._control, this.fsFormUrlProtocol);
+            }
+            else {
+                return null;
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormUrlDirective.prototype, "fsFormUrl", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormUrlDirective.prototype, "fsFormUrlProtocol", void 0);
+        __decorate([
+            core.Input('fsFormUrlMessage'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], FsFormUrlDirective.prototype, "validationMessage", null);
+        FsFormUrlDirective = __decorate([
+            core.Directive({
+                selector: '[fsFormUrl]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormUrlDirective);
+        return FsFormUrlDirective;
     }(FsControlDirective));
 
-    var FsSubmitButtonDirective = /** @class */ (function () {
-        function FsSubmitButtonDirective(_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._destroy$ = new rxjs.Subject();
-        }
-        FsSubmitButtonDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            if (this._form) {
-                this._form.addSubmitButton(this);
-                rxjs.fromEvent(this.element, 'click')
-                    .pipe(operators.takeUntil(this._destroy$))
-                    .subscribe(function () {
-                    _this.active = true;
-                });
-                if (this.dirtySubmit) {
-                    if (this._form.dirtySubmitButton) {
-                        if (!this._form.ngForm.dirty) {
-                            this.disable();
-                        }
-                    }
-                }
-                this.transitionStyle = 'none';
-                setTimeout(function () {
-                    _this.transitionStyle = null;
-                }, 500);
-            }
-        };
-        FsSubmitButtonDirective.prototype.disable = function () {
-            if (this._matButton) {
-                this._matButton.disabled = true;
-                this._cdRef.markForCheck();
-            }
-        };
-        FsSubmitButtonDirective.prototype.enable = function () {
-            if (this._matButton) {
-                this._matButton.disabled = false;
-                this._matButton.disableRipple = true;
-                this._cdRef.markForCheck();
-            }
-        };
-        FsSubmitButtonDirective.prototype.process = function () {
-            this.setClass('process');
-            this._matButton.disableRipple = true;
-        };
-        FsSubmitButtonDirective.prototype.success = function () {
-            this.setClass('success');
-            this._matButton.disableRipple = false;
-        };
-        FsSubmitButtonDirective.prototype.error = function () {
-            this.setClass('error');
-            this._matButton.disableRipple = false;
-        };
-        FsSubmitButtonDirective.prototype.setClass = function (cls) {
-            var svg = this._getSvg(cls);
-            this._resetClass();
-            this._disableShadowAnimation();
-            this.element.classList.add("submit-" + cls);
-            this.element.append(svg);
-        };
-        Object.defineProperty(FsSubmitButtonDirective.prototype, "element", {
-            get: function () {
-                return this._elementRef.nativeElement;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FsSubmitButtonDirective.prototype.reset = function () {
-            this.active = false;
-            this.enable();
-            this.element.querySelectorAll('.svg-icon')
-                .forEach(function (el) {
-                el.remove();
-            });
-            this._matButton.disableRipple = false;
-            this._resetClass();
-        };
-        FsSubmitButtonDirective.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-            this._form.removeSubmitButton(this);
-        };
-        FsSubmitButtonDirective.prototype._disableShadowAnimation = function () {
-            // .mat-elevation-z2 removes the click shadow animation
-            //this.element.classList.add('mat-elevation-z2');
-        };
-        FsSubmitButtonDirective.prototype._resetClass = function () {
-            this.element.classList.remove('submit-success', 'submit-error', 'submit-process', 'mat-elevation-z2');
-        };
-        FsSubmitButtonDirective.prototype._getSvg = function (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\">\n      <g>\n        <g class=\"check\">\n          <g>\n            <path d=\"M29.6,11.9c-0.5-0.5-1.3-0.5-1.8,0L16.3,23.4l-6.1-6.1c-0.5-0.5-1.3-0.5-1.8,0s-0.5,1.3,0,1.8l7,7c0.3,0.3,0.6,0.4,0.9,0.4s0.7-0.1,0.9-0.4l12.4-12.4C30.1,13.2,30.1,12.4,29.6,11.9z\"/>\n          </g>\n        </g>\n      </g>\n      </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\">\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <g transform=\"translate(1 1)\" stroke-width=\"2\"><circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"/>\n          <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>\n        </g>\n      </g>\n      </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;
-            }
-        };
-        FsSubmitButtonDirective.ctorParameters = function () { return [
-            { type: button.MatButton, decorators: [{ type: core.Optional }, { type: core.Host }] },
-            { type: FsFormDirective, decorators: [{ type: core.Optional }] },
-            { type: core.ElementRef },
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsSubmitButtonDirective.prototype, "name", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsSubmitButtonDirective.prototype, "dirtySubmit", void 0);
-        __decorate([
-            core.HostBinding('style.transition'),
-            __metadata("design:type", Object)
-        ], FsSubmitButtonDirective.prototype, "transitionStyle", void 0);
-        FsSubmitButtonDirective = __decorate([
-            core.Directive({
-                selector: 'button[type="submit"]',
-            }),
-            __param(0, core.Optional()), __param(0, core.Host()),
-            __param(1, core.Optional()),
-            __metadata("design:paramtypes", [button.MatButton,
-                FsFormDirective,
-                core.ElementRef,
-                core.ChangeDetectorRef])
-        ], FsSubmitButtonDirective);
-        return FsSubmitButtonDirective;
+    var FsSubmitButtonDirective = /** @class */ (function () {
+        function FsSubmitButtonDirective(_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._destroy$ = new rxjs.Subject();
+        }
+        FsSubmitButtonDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this._form) {
+                this._form.addSubmitButton(this);
+                rxjs.fromEvent(this.element, 'click')
+                    .pipe(operators.takeUntil(this._destroy$))
+                    .subscribe(function () {
+                    _this.active = true;
+                });
+                if (this.dirtySubmit) {
+                    if (this._form.dirtySubmitButton) {
+                        if (!this._form.ngForm.dirty) {
+                            this.disable();
+                        }
+                    }
+                }
+                this.transitionStyle = 'none';
+                setTimeout(function () {
+                    _this.transitionStyle = null;
+                }, 500);
+            }
+        };
+        FsSubmitButtonDirective.prototype.disable = function () {
+            if (this._matButton) {
+                this._matButton.disabled = true;
+                this._cdRef.markForCheck();
+            }
+        };
+        FsSubmitButtonDirective.prototype.enable = function () {
+            if (this._matButton) {
+                this._matButton.disabled = false;
+                this._matButton.disableRipple = true;
+                this._cdRef.markForCheck();
+            }
+        };
+        FsSubmitButtonDirective.prototype.process = function () {
+            this.setClass('process');
+            this._matButton.disableRipple = true;
+        };
+        FsSubmitButtonDirective.prototype.success = function () {
+            this.setClass('success');
+            this._matButton.disableRipple = false;
+        };
+        FsSubmitButtonDirective.prototype.error = function () {
+            this.setClass('error');
+            this._matButton.disableRipple = false;
+        };
+        FsSubmitButtonDirective.prototype.setClass = function (cls) {
+            var svg = this._getSvg(cls);
+            this._resetClass();
+            this._disableShadowAnimation();
+            this.element.classList.add("submit-" + cls);
+            this.element.append(svg);
+        };
+        Object.defineProperty(FsSubmitButtonDirective.prototype, "element", {
+            get: function () {
+                return this._elementRef.nativeElement;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FsSubmitButtonDirective.prototype.reset = function () {
+            this.active = false;
+            this.enable();
+            this.element.querySelectorAll('.svg-icon')
+                .forEach(function (el) {
+                el.remove();
+            });
+            this._matButton.disableRipple = false;
+            this._resetClass();
+        };
+        FsSubmitButtonDirective.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+            this._form.removeSubmitButton(this);
+        };
+        FsSubmitButtonDirective.prototype._disableShadowAnimation = function () {
+            // .mat-elevation-z2 removes the click shadow animation
+            //this.element.classList.add('mat-elevation-z2');
+        };
+        FsSubmitButtonDirective.prototype._resetClass = function () {
+            this.element.classList.remove('submit-success', 'submit-error', 'submit-process', 'mat-elevation-z2');
+        };
+        FsSubmitButtonDirective.prototype._getSvg = function (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\">\n      <g>\n        <g class=\"check\">\n          <g>\n            <path d=\"M29.6,11.9c-0.5-0.5-1.3-0.5-1.8,0L16.3,23.4l-6.1-6.1c-0.5-0.5-1.3-0.5-1.8,0s-0.5,1.3,0,1.8l7,7c0.3,0.3,0.6,0.4,0.9,0.4s0.7-0.1,0.9-0.4l12.4-12.4C30.1,13.2,30.1,12.4,29.6,11.9z\"/>\n          </g>\n        </g>\n      </g>\n      </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\">\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <g transform=\"translate(1 1)\" stroke-width=\"2\"><circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"/>\n          <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>\n        </g>\n      </g>\n      </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;
+            }
+        };
+        FsSubmitButtonDirective.ctorParameters = function () { return [
+            { type: button.MatButton, decorators: [{ type: core.Optional }, { type: core.Host }] },
+            { type: FsFormDirective, decorators: [{ type: core.Optional }] },
+            { type: core.ElementRef },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsSubmitButtonDirective.prototype, "name", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsSubmitButtonDirective.prototype, "dirtySubmit", void 0);
+        __decorate([
+            core.HostBinding('style.transition'),
+            __metadata("design:type", Object)
+        ], FsSubmitButtonDirective.prototype, "transitionStyle", void 0);
+        FsSubmitButtonDirective = __decorate([
+            core.Directive({
+                selector: 'button[type="submit"]',
+            }),
+            __param(0, core.Optional()), __param(0, core.Host()),
+            __param(1, core.Optional()),
+            __metadata("design:paramtypes", [button.MatButton,
+                FsFormDirective,
+                core.ElementRef,
+                core.ChangeDetectorRef])
+        ], FsSubmitButtonDirective);
+        return FsSubmitButtonDirective;
     }());
 
-    var FsFormValidateDirective = /** @class */ (function (_super) {
-        __extends(FsFormValidateDirective, _super);
-        function FsFormValidateDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        FsFormValidateDirective.prototype.ngOnChanges = function () {
-            this._control.updateValueAndValidity();
-        };
-        FsFormValidateDirective.prototype.validateAsync = function (control) {
-            return FsValidators.func(this._control, this.validateFn, this.validateFnData);
-        };
-        __decorate([
-            core.Input('validate'),
-            __metadata("design:type", Object)
-        ], FsFormValidateDirective.prototype, "validateFn", void 0);
-        __decorate([
-            core.Input('validateData'),
-            __metadata("design:type", Object)
-        ], FsFormValidateDirective.prototype, "validateFnData", void 0);
-        FsFormValidateDirective = __decorate([
-            core.Directive({
-                selector: '[validate]',
-                providers: [
-                    VALIDATE_MESSAGE_PROVIDER
-                ],
-            })
-        ], FsFormValidateDirective);
-        return FsFormValidateDirective;
+    var FsFormValidateDirective = /** @class */ (function (_super) {
+        __extends(FsFormValidateDirective, _super);
+        function FsFormValidateDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        FsFormValidateDirective.prototype.ngOnChanges = function () {
+            this._control.updateValueAndValidity();
+        };
+        FsFormValidateDirective.prototype.validateAsync = function (control) {
+            return FsValidators.func(this._control, this.validateFn, this.validateFnData);
+        };
+        __decorate([
+            core.Input('validate'),
+            __metadata("design:type", Object)
+        ], FsFormValidateDirective.prototype, "validateFn", void 0);
+        __decorate([
+            core.Input('validateData'),
+            __metadata("design:type", Object)
+        ], FsFormValidateDirective.prototype, "validateFnData", void 0);
+        FsFormValidateDirective = __decorate([
+            core.Directive({
+                selector: '[validate]',
+                providers: [
+                    VALIDATE_MESSAGE_PROVIDER
+                ],
+            })
+        ], FsFormValidateDirective);
+        return FsFormValidateDirective;
     }(FsControlDirective));
 
-    var FsFormDialogActionsComponent = /** @class */ (function () {
-        function FsFormDialogActionsComponent(_form, _dialogRef, _cdRef) {
-            this._form = _form;
-            this._dialogRef = _dialogRef;
-            this._cdRef = _cdRef;
-            this.save = true;
-            this.create = false;
-            this.close = false;
-            this.dirty = false;
-            this._destroy$ = new rxjs.Subject();
-        }
-        FsFormDialogActionsComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            if (this._form) {
-                this._form.ngForm.valueChanges
-                    .pipe(operators.filter(function () { return (!_this.dirty); }), operators.takeUntil(this._destroy$))
-                    .subscribe(function () {
-                    _this.dirty = _this._form.ngForm.dirty;
-                    _this._cdRef.markForCheck();
-                });
-                this._form.submitted
-                    .pipe(operators.delay(50), operators.takeUntil(this._destroy$))
-                    .subscribe(function () {
-                    _this.dirty = false;
-                    _this._cdRef.markForCheck();
-                });
-                this._form.reseted
-                    .pipe(operators.takeUntil(this._destroy$))
-                    .subscribe(function () {
-                    _this.dirty = false;
-                    _this._cdRef.markForCheck();
-                });
-            }
-        };
-        FsFormDialogActionsComponent.prototype.closeClick = function () {
-            var _this = this;
-            if (this._form) {
-                this._form.triggerConfirm()
-                    .pipe(operators.filter(function (confirmResult) { return (confirmResult !== exports.ConfirmResult.Review); }), operators.takeUntil(this._destroy$))
-                    .subscribe(function () {
-                    _this._dialogRef.close(null);
-                });
-            }
-            else {
-                this._dialogRef.close(null);
-            }
-        };
-        FsFormDialogActionsComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsFormDialogActionsComponent.ctorParameters = function () { return [
-            { type: FsFormDirective, decorators: [{ type: core.Optional }] },
-            { type: dialog.MatDialogRef, decorators: [{ type: core.Optional }] },
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDialogActionsComponent.prototype, "save", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDialogActionsComponent.prototype, "create", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsFormDialogActionsComponent.prototype, "close", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], FsFormDialogActionsComponent.prototype, "name", void 0);
-        FsFormDialogActionsComponent = __decorate([
-            core.Component({
-                selector: 'fs-form-dialog-actions',
-                template: "<div class=\"buttons\">\r\n  <ng-container *ngIf=\"save\">\r\n    <button \r\n        mat-button \r\n        type=\"submit\"\r\n        color=\"primary\" \r\n        [name]=\"name\">\r\n      {{create ? 'Create' : 'Save'}}\r\n    </button>\r\n    <button \r\n        mat-button \r\n        type=\"button\"\r\n        [disabled]=\"close && !dirty && !create\"\r\n        [matDialogClose]=\"null\">\r\n      Cancel\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-content></ng-content>\r\n  <div class=\"close\" *ngIf=\"close\">\r\n    <button \r\n        mat-button \r\n        type=\"button\"\r\n        [color]=\"dirty ? 'basic' : 'primary'\"\r\n        (click)=\"closeClick()\">\r\n      Close\r\n    </button>\r\n  </div>\r\n</div>",
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [".buttons{display:flex;flex-grow:1;align-items:center}.buttons .close{display:flex;flex-grow:1;justify-content:flex-end}:host{display:flex;flex-grow:1}@media only screen and (max-width:599px){.buttons{flex-direction:column}}"]
-            }),
-            __param(0, core.Optional()),
-            __param(1, core.Optional()),
-            __metadata("design:paramtypes", [FsFormDirective,
-                dialog.MatDialogRef,
-                core.ChangeDetectorRef])
-        ], FsFormDialogActionsComponent);
-        return FsFormDialogActionsComponent;
+    var FsFormDialogActionsComponent = /** @class */ (function () {
+        function FsFormDialogActionsComponent(_form, _dialogRef, _cdRef) {
+            this._form = _form;
+            this._dialogRef = _dialogRef;
+            this._cdRef = _cdRef;
+            this.save = true;
+            this.create = false;
+            this.close = false;
+            this.dirty = false;
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsFormDialogActionsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this._form) {
+                this._form.ngForm.valueChanges
+                    .pipe(operators.filter(function () { return (!_this.dirty); }), operators.takeUntil(this._destroy$))
+                    .subscribe(function () {
+                    _this.dirty = _this._form.ngForm.dirty;
+                    _this._cdRef.markForCheck();
+                });
+                this._form.submitted
+                    .pipe(operators.delay(50), operators.takeUntil(this._destroy$))
+                    .subscribe(function () {
+                    _this.dirty = false;
+                    _this._cdRef.markForCheck();
+                });
+                this._form.reseted
+                    .pipe(operators.takeUntil(this._destroy$))
+                    .subscribe(function () {
+                    _this.dirty = false;
+                    _this._cdRef.markForCheck();
+                });
+            }
+        };
+        FsFormDialogActionsComponent.prototype.closeClick = function () {
+            var _this = this;
+            if (this._form) {
+                this._form.triggerConfirm()
+                    .pipe(operators.filter(function (confirmResult) { return (confirmResult !== exports.ConfirmResult.Review); }), operators.takeUntil(this._destroy$))
+                    .subscribe(function () {
+                    _this._dialogRef.close(null);
+                });
+            }
+            else {
+                this._dialogRef.close(null);
+            }
+        };
+        FsFormDialogActionsComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsFormDialogActionsComponent.ctorParameters = function () { return [
+            { type: FsFormDirective, decorators: [{ type: core.Optional }] },
+            { type: dialog.MatDialogRef, decorators: [{ type: core.Optional }] },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDialogActionsComponent.prototype, "save", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDialogActionsComponent.prototype, "create", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsFormDialogActionsComponent.prototype, "close", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], FsFormDialogActionsComponent.prototype, "name", void 0);
+        FsFormDialogActionsComponent = __decorate([
+            core.Component({
+                selector: 'fs-form-dialog-actions',
+                template: "<div class=\"buttons\">\r\n  <ng-container *ngIf=\"save\">\r\n    <button \r\n        mat-button \r\n        type=\"submit\"\r\n        color=\"primary\" \r\n        [name]=\"name\">\r\n      {{create ? 'Create' : 'Save'}}\r\n    </button>\r\n    <button \r\n        mat-button \r\n        type=\"button\"\r\n        [disabled]=\"close && !dirty && !create\"\r\n        [matDialogClose]=\"null\">\r\n      Cancel\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-content></ng-content>\r\n  <div class=\"close\" *ngIf=\"close\">\r\n    <button \r\n        mat-button \r\n        type=\"button\"\r\n        [color]=\"dirty ? 'basic' : 'primary'\"\r\n        (click)=\"closeClick()\">\r\n      Close\r\n    </button>\r\n  </div>\r\n</div>",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [".buttons{display:flex;flex-grow:1;align-items:center}.buttons .close{display:flex;flex-grow:1;justify-content:flex-end}:host{display:flex;flex-grow:1}@media only screen and (max-width:599px){.buttons{flex-direction:column}}"]
+            }),
+            __param(0, core.Optional()),
+            __param(1, core.Optional()),
+            __metadata("design:paramtypes", [FsFormDirective,
+                dialog.MatDialogRef,
+                core.ChangeDetectorRef])
+        ], FsFormDialogActionsComponent);
+        return FsFormDialogActionsComponent;
     }());
 
-    var FsFormModule = /** @class */ (function () {
-        function FsFormModule() {
-        }
-        FsFormModule_1 = FsFormModule;
-        FsFormModule.forRoot = function () {
-            return {
-                ngModule: FsFormModule_1,
-            };
-        };
-        var FsFormModule_1;
-        FsFormModule = FsFormModule_1 = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    forms.FormsModule,
-                    button.MatButtonModule,
-                    dialog.MatDialogModule,
-                ],
-                declarations: [
-                    FsFormDirective,
-                    FsControlDirective,
-                    FsFormRequiredDirective,
-                    FsFormMinDirective,
-                    FsFormMaxDirective,
-                    FsFormMinLengthDirective,
-                    FsFormMaxLengthDirective,
-                    FsFormEmailDirective,
-                    FsFormEmailsDirective,
-                    FsFormPhoneDirective,
-                    FsFormCompareDirective,
-                    FsFormIntegerDirective,
-                    FsFormNumericDirective,
-                    FsFormPatternDirective,
-                    FsFormFunctionDirective,
-                    FsFormDateRangeDirective,
-                    FsFormGreaterDirective,
-                    FsFormLesserDirective,
-                    FsFormUrlDirective,
-                    FsFormDialogCloseDirective,
-                    FsSubmitButtonDirective,
-                    FsFormValidateDirective,
-                    FsFormDialogActionsComponent,
-                ],
-                exports: [
-                    FsFormDirective,
-                    FsControlDirective,
-                    FsFormRequiredDirective,
-                    FsFormMinDirective,
-                    FsFormMaxDirective,
-                    FsFormMinLengthDirective,
-                    FsFormMaxLengthDirective,
-                    FsFormEmailDirective,
-                    FsFormEmailsDirective,
-                    FsFormPhoneDirective,
-                    FsFormCompareDirective,
-                    FsFormIntegerDirective,
-                    FsFormNumericDirective,
-                    FsFormPatternDirective,
-                    FsFormFunctionDirective,
-                    FsFormDateRangeDirective,
-                    FsFormGreaterDirective,
-                    FsFormLesserDirective,
-                    FsFormUrlDirective,
-                    FsFormDialogCloseDirective,
-                    FsSubmitButtonDirective,
-                    FsFormValidateDirective,
-                    FsFormDialogActionsComponent,
-                ],
-                providers: [
-                    {
-                        provide: core$1.ErrorStateMatcher,
-                        useClass: core$1.ShowOnDirtyErrorStateMatcher,
-                    },
-                ],
-            })
-        ], FsFormModule);
-        return FsFormModule;
+    var FsFormModule = /** @class */ (function () {
+        function FsFormModule() {
+        }
+        FsFormModule_1 = FsFormModule;
+        FsFormModule.forRoot = function () {
+            return {
+                ngModule: FsFormModule_1,
+            };
+        };
+        var FsFormModule_1;
+        FsFormModule = FsFormModule_1 = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    button.MatButtonModule,
+                    dialog.MatDialogModule,
+                ],
+                declarations: [
+                    FsFormDirective,
+                    FsControlDirective,
+                    FsFormRequiredDirective,
+                    FsFormMinDirective,
+                    FsFormMaxDirective,
+                    FsFormMinLengthDirective,
+                    FsFormMaxLengthDirective,
+                    FsFormEmailDirective,
+                    FsFormEmailsDirective,
+                    FsFormPhoneDirective,
+                    FsFormCompareDirective,
+                    FsFormIntegerDirective,
+                    FsFormNumericDirective,
+                    FsFormPatternDirective,
+                    FsFormFunctionDirective,
+                    FsFormDateRangeDirective,
+                    FsFormGreaterDirective,
+                    FsFormLesserDirective,
+                    FsFormUrlDirective,
+                    FsFormDialogCloseDirective,
+                    FsSubmitButtonDirective,
+                    FsFormValidateDirective,
+                    FsFormDialogActionsComponent,
+                ],
+                exports: [
+                    FsFormDirective,
+                    FsControlDirective,
+                    FsFormRequiredDirective,
+                    FsFormMinDirective,
+                    FsFormMaxDirective,
+                    FsFormMinLengthDirective,
+                    FsFormMaxLengthDirective,
+                    FsFormEmailDirective,
+                    FsFormEmailsDirective,
+                    FsFormPhoneDirective,
+                    FsFormCompareDirective,
+                    FsFormIntegerDirective,
+                    FsFormNumericDirective,
+                    FsFormPatternDirective,
+                    FsFormFunctionDirective,
+                    FsFormDateRangeDirective,
+                    FsFormGreaterDirective,
+                    FsFormLesserDirective,
+                    FsFormUrlDirective,
+                    FsFormDialogCloseDirective,
+                    FsSubmitButtonDirective,
+                    FsFormValidateDirective,
+                    FsFormDialogActionsComponent,
+                ],
+                providers: [
+                    {
+                        provide: core$1.ErrorStateMatcher,
+                        useClass: core$1.ShowOnDirtyErrorStateMatcher,
+                    },
+                ],
+            })
+        ], FsFormModule);
+        return FsFormModule;
     }());
 
-    var FormDeactivateGuard = /** @class */ (function () {
-        function FormDeactivateGuard(_prompt) {
-            this._prompt = _prompt;
-        }
-        FormDeactivateGuard.prototype.canDeactivate = function (directive) {
-            if (!('getForm' in directive)) {
-                var error = "Directive " + directive.constructor.name + " does not property implement interface FormDeactivate";
-                console.error(error);
-                return rxjs.of(true);
-            }
-            var form = directive.getForm();
-            if (!(form instanceof FsFormDirective)) {
-                var error = "Directive " + directive.constructor.name + ".getForm() does not return a valid FsFormDirective";
-                console.error(error);
-                return rxjs.of(true);
-            }
-            return confirmUnsaved(form, this._prompt)
-                .pipe(operators.map(function (result) {
-                return confirmResultContinue(result);
-            }));
-        };
-        FormDeactivateGuard.ctorParameters = function () { return [
-            { type: prompt.FsPrompt }
-        ]; };
-        FormDeactivateGuard.ɵprov = core.ɵɵdefineInjectable({ factory: function FormDeactivateGuard_Factory() { return new FormDeactivateGuard(core.ɵɵinject(prompt.FsPrompt)); }, token: FormDeactivateGuard, providedIn: "root" });
-        FormDeactivateGuard = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            }),
-            __metadata("design:paramtypes", [prompt.FsPrompt])
-        ], FormDeactivateGuard);
-        return FormDeactivateGuard;
+    var FormDeactivateGuard = /** @class */ (function () {
+        function FormDeactivateGuard(_prompt) {
+            this._prompt = _prompt;
+        }
+        FormDeactivateGuard.prototype.canDeactivate = function (directive) {
+            if (!('getForm' in directive)) {
+                var error = "Directive " + directive.constructor.name + " does not property implement interface FormDeactivate";
+                console.error(error);
+                return rxjs.of(true);
+            }
+            var form = directive.getForm();
+            if (!(form instanceof FsFormDirective)) {
+                var error = "Directive " + directive.constructor.name + ".getForm() does not return a valid FsFormDirective";
+                console.error(error);
+                return rxjs.of(true);
+            }
+            return confirmUnsaved(form, this._prompt)
+                .pipe(operators.map(function (result) {
+                return confirmResultContinue(result);
+            }));
+        };
+        FormDeactivateGuard.ctorParameters = function () { return [
+            { type: prompt.FsPrompt }
+        ]; };
+        FormDeactivateGuard.ɵprov = core.ɵɵdefineInjectable({ factory: function FormDeactivateGuard_Factory() { return new FormDeactivateGuard(core.ɵɵinject(prompt.FsPrompt)); }, token: FormDeactivateGuard, providedIn: "root" });
+        FormDeactivateGuard = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            }),
+            __metadata("design:paramtypes", [prompt.FsPrompt])
+        ], FormDeactivateGuard);
+        return FormDeactivateGuard;
     }());
 
     exports.FormDeactivateGuard = FormDeactivateGuard;