@firestitch/form 9.7.3 → 9.7.7

package/fesm5/firestitch-form.js

@@ -15,2348 +15,2382 @@ import { first, filter, map, take, mergeMap, tap, switchMap, catchError, takeUnt
 import { values, keys, isObject } from 'lodash-es';
 import { isValid } from 'date-fns';
 
-var ConfirmResult;
-(function (ConfirmResult) {
-    ConfirmResult["Save"] = "save";
-    ConfirmResult["Discard"] = "discard";
-    ConfirmResult["Review"] = "review";
-    ConfirmResult["Invalid"] = "invalid";
-    ConfirmResult["Pristine"] = "pristine";
+var ConfirmResult;
+(function (ConfirmResult) {
+    ConfirmResult["Save"] = "save";
+    ConfirmResult["Discard"] = "discard";
+    ConfirmResult["Review"] = "review";
+    ConfirmResult["Invalid"] = "invalid";
+    ConfirmResult["Pristine"] = "pristine";
 })(ConfirmResult || (ConfirmResult = {}));
 
-function confirmUnsaved(form, prompt) {
-    return new Observable(function (observer) {
-        if (!form.confirm || !form.ngForm.dirty) {
-            observer.next(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(ConfirmResult.Discard);
-                observer.complete();
-                form.reset();
-            }
-            if (value === 'save') {
-                form.submitted
-                    .pipe(first())
-                    .subscribe(function () {
-                    observer.next(ConfirmResult.Save);
-                    observer.complete();
-                });
-                form.invalid
-                    .pipe(first())
-                    .subscribe(function () {
-                    observer.next(ConfirmResult.Invalid);
-                    observer.complete();
-                });
-                form.ngForm.control.markAsPristine();
-                form.ngForm.ngSubmit.emit();
-            }
-        }, function (error) {
-            observer.next(ConfirmResult.Review);
-            observer.complete();
-        });
-    });
+function confirmUnsaved(form, prompt) {
+    return new Observable(function (observer) {
+        if (!form.confirm || !form.ngForm.dirty) {
+            observer.next(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(ConfirmResult.Discard);
+                observer.complete();
+                form.reset();
+            }
+            if (value === 'save') {
+                form.submitted
+                    .pipe(first())
+                    .subscribe(function () {
+                    observer.next(ConfirmResult.Save);
+                    observer.complete();
+                });
+                form.invalid
+                    .pipe(first())
+                    .subscribe(function () {
+                    observer.next(ConfirmResult.Invalid);
+                    observer.complete();
+                });
+                form.ngForm.control.markAsPristine();
+                form.ngForm.ngSubmit.emit();
+            }
+        }, function (error) {
+            observer.next(ConfirmResult.Review);
+            observer.complete();
+        });
+    });
 }
 
-var FsFormDialogCloseDirective = /** @class */ (function () {
-    function FsFormDialogCloseDirective() {
-        this.clicked$ = new Subject();
-        this.registered = false;
-        this.type = 'button';
-    }
-    FsFormDialogCloseDirective.prototype.click = function () {
-        this.clicked$.next();
-    };
-    FsFormDialogCloseDirective.prototype.ngOnDestroy = function () {
-        this.clicked$.complete();
-    };
-    __decorate([
-        HostBinding('attr.type'),
-        __metadata("design:type", Object)
-    ], FsFormDialogCloseDirective.prototype, "type", void 0);
-    __decorate([
-        HostListener('click', ['$event.target']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], FsFormDialogCloseDirective.prototype, "click", null);
-    FsFormDialogCloseDirective = __decorate([
-        Directive({
-            selector: '[fsFormDialogClose],[fs-form-dialog-close]'
-        })
-    ], FsFormDialogCloseDirective);
-    return FsFormDialogCloseDirective;
+var FsFormDialogCloseDirective = /** @class */ (function () {
+    function FsFormDialogCloseDirective() {
+        this.clicked$ = new Subject();
+        this.registered = false;
+        this.type = 'button';
+    }
+    FsFormDialogCloseDirective.prototype.click = function () {
+        this.clicked$.next();
+    };
+    FsFormDialogCloseDirective.prototype.ngOnDestroy = function () {
+        this.clicked$.complete();
+    };
+    __decorate([
+        HostBinding('attr.type'),
+        __metadata("design:type", Object)
+    ], FsFormDialogCloseDirective.prototype, "type", void 0);
+    __decorate([
+        HostListener('click', ['$event.target']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FsFormDialogCloseDirective.prototype, "click", null);
+    FsFormDialogCloseDirective = __decorate([
+        Directive({
+            selector: '[fsFormDialogClose],[fs-form-dialog-close]'
+        })
+    ], FsFormDialogCloseDirective);
+    return FsFormDialogCloseDirective;
 }());
 
-var FsForm = /** @class */ (function () {
-    function FsForm() {
-        this._eventBus = new Subject();
-    }
-    FsForm.prototype.broadcast = function (key, data) {
-        this._eventBus.next({ key: key, data: data });
-    };
-    FsForm.prototype.on = function (key) {
-        return this._eventBus.asObservable()
-            .pipe(filter(function (event) { return event.key === key; }), map(function (event) { return event.data; }));
-    };
-    FsForm.ɵprov = ɵɵdefineInjectable({ factory: function FsForm_Factory() { return new FsForm(); }, token: FsForm, providedIn: "root" });
-    FsForm = __decorate([
-        Injectable({
-            providedIn: 'root',
-        }),
-        __metadata("design:paramtypes", [])
-    ], FsForm);
-    return FsForm;
+var FsForm = /** @class */ (function () {
+    function FsForm() {
+        this._eventBus = new Subject();
+    }
+    FsForm.prototype.broadcast = function (key, data) {
+        this._eventBus.next({ key: key, data: data });
+    };
+    FsForm.prototype.on = function (key) {
+        return this._eventBus.asObservable()
+            .pipe(filter(function (event) { return event.key === key; }), map(function (event) { return event.data; }));
+    };
+    FsForm.ɵprov = ɵɵdefineInjectable({ factory: function FsForm_Factory() { return new FsForm(); }, token: FsForm, providedIn: "root" });
+    FsForm = __decorate([
+        Injectable({
+            providedIn: 'root',
+        }),
+        __metadata("design:paramtypes", [])
+    ], FsForm);
+    return FsForm;
 }());
 
-var FormStatus;
-(function (FormStatus) {
-    FormStatus["Valid"] = "valid";
-    FormStatus["Invalid"] = "invalid";
-    FormStatus["Submitting"] = "submitting";
-    FormStatus["Submitted"] = "submitted";
-    FormStatus["Error"] = "error";
-    FormStatus["Success"] = "success";
-    FormStatus["Completing"] = "completing";
+var FormStatus;
+(function (FormStatus) {
+    FormStatus["Valid"] = "valid";
+    FormStatus["Invalid"] = "invalid";
+    FormStatus["Submitting"] = "submitting";
+    FormStatus["Submitted"] = "submitted";
+    FormStatus["Error"] = "error";
+    FormStatus["Success"] = "success";
+    FormStatus["Completing"] = "completing";
 })(FormStatus || (FormStatus = {}));
 
-function confirmResultContinue(result) {
-    return result === ConfirmResult.Discard || result === ConfirmResult.Save || result === ConfirmResult.Pristine;
+function confirmResultContinue(result) {
+    return result === ConfirmResult.Discard || result === ConfirmResult.Save || result === ConfirmResult.Pristine;
 }
 
-function getFormErrors(control, key) {
-    var _a;
-    var errors = null;
-    if (control.invalid && control.errors) {
-        errors = (_a = {},
-            _a[key] = __assign({}, control.errors),
-            _a);
-    }
-    if (control instanceof 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 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 EventEmitter();
-        this.invalid = new EventEmitter();
-        this.valid = new EventEmitter();
-        this.submitted = new EventEmitter();
-        this.fsformClass = true;
-        this._tabGroups = new QueryList();
-        this._submitButtons = new QueryList();
-        this._dialogBackdropEscape = false;
-        this._snapshot = {};
-        this._status$ = new BehaviorSubject(FormStatus.Valid);
-        this._destroy$ = new Subject();
-    }
-    Object.defineProperty(FsFormDirective.prototype, "submitting", {
-        get: function () {
-            return this._status$.getValue() === FormStatus.Submitting;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FsFormDirective.prototype, "completing", {
-        get: function () {
-            return this._status$.getValue() === 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 of(submittedEvent);
-            }
-            var result = this.submit(this._submitEvent);
-            if (!isObservable(result)) {
-                return of(submittedEvent);
-            }
-            return result
-                .pipe(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 = 'Changes not saved. Please review errors highlighted in red.';
-            this._message.error(message, { mode: MessageMode.Toast });
-            var el = this._element.nativeElement.querySelector('.ng-invalid');
-            if (el) {
-                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-            return 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]);
-        });
-    };
-    FsFormDirective.prototype.clear = function () {
-        this.ngForm.resetForm();
-    };
-    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() : of({});
-        return submitted
-            .pipe(take(1), 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(tap(function (event) {
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-        }), filter(function () {
-            return [FormStatus.Valid, FormStatus.Invalid]
-                .includes(_this._status$.getValue());
-        }), tap(function () { return _this._markControlsAsTouchedAndUpdateValidity(); }), tap(function () { return _this._broadcastSubmittingEvents(); }), switchMap(function () { return _this._waitUntilStatusPending(); }), tap(function () { return _this._setupActiveSubmitButton(); }), mergeMap(function () {
-            return _this.ngForm.status === 'INVALID'
-                ? _this._formInvalidState$
-                : _this._formValidState$;
-        }), catchError(function (e, source$) {
-            _this._handleError(e);
-            return source$;
-        }), tap(function (submittedEvent) {
-            _this._completeSubmit(true, submittedEvent);
-        }), takeUntil(this._destroy$))
-            .subscribe(function () { });
-    };
-    FsFormDirective.prototype._listenWindowClose = function () {
-        var _this = this;
-        fromEvent(window, 'beforeunload')
-            .pipe(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 () {
-            fromEvent(document, 'keydown')
-                .pipe(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(filter(function (result) { return confirmResultContinue(result); }), switchMap(function (result) {
-                return result === ConfirmResult.Pristine || result === ConfirmResult.Discard
-                    ? of(null)
-                    : _this.submitted.asObservable();
-            }), 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(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(FormStatus.Submitted);
-        if (success) {
-            this._status$.next(FormStatus.Success);
-        }
-        else {
-            this._status$.next(FormStatus.Error);
-        }
-        this._status$.next(FormStatus.Completing);
-        var resetDelay = success ? this.successDelay : this.errorDelay;
-        of(true)
-            .pipe(delay(resetDelay), first(), takeUntil(this._destroy$)).subscribe(function () {
-            if (_this.ngForm.form.status === 'VALID') {
-                _this._status$.next(FormStatus.Valid);
-            }
-            else {
-                _this._status$.next(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(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(takeUntil(this._destroy$))
-                .subscribe(function (subscriber) {
-                if (_this.submitting) {
-                    _this._status$
-                        .pipe(filter(function (status) { return status === FormStatus.Success || status === FormStatus.Error; }), takeUntil(_this._destroy$))
-                        .subscribe(function (status) {
-                        if (status === 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(switchMap(function (subscriber) {
-                return iif(function () { return _this.confirm && _this.confirmDrawer; }, _this.triggerConfirm()
-                    .pipe(map(function (result) { return confirmResultContinue(result); }), tap(function (result) {
-                    if (result) {
-                        subscriber.next();
-                        subscriber.complete();
-                    }
-                    else {
-                        subscriber.error();
-                    }
-                })), defer(function () {
-                    subscriber.next();
-                    subscriber.complete();
-                }));
-            }), 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(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 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(takeUntil(this._destroy$))
-            .subscribe(function (event) {
-            if (!_this.submitting) {
-                if (_this.confirm && _this.confirmTabs) {
-                    _this.triggerConfirm()
-                        .pipe(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(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(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 + '_' + 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(takeUntil(this._destroy$))
-            .subscribe(function () {
-            _this._updateDirtySubmitButtons();
-        });
-        this._submitButtons.changes
-            .pipe(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(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(startWith(this.ngForm.status), 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: NgForm, decorators: [{ type: Inject, args: [NgForm,] }] },
-        { type: FsForm },
-        { type: ElementRef },
-        { type: FsMessage },
-        { type: FsPrompt },
-        { type: NgZone },
-        { type: MatDialogRef, decorators: [{ type: Optional }, { type: Inject, args: [MatDialogRef,] }] },
-        { type: DrawerRef, decorators: [{ type: Optional }, { type: Inject, args: [DrawerRef,] }] }
-    ]; };
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "wrapperSelector", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "messageSelector", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "hintSelector", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "labelSelector", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "autocomplete", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "shortcuts", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "confirm", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "confirmDialog", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "confirmDrawer", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "confirmBrowser", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "confirmTabs", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "dirtySubmitButton", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], FsFormDirective.prototype, "submit", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "successDelay", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "errorDelay", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", MatTabGroup)
-    ], FsFormDirective.prototype, "tabGroup", void 0);
-    __decorate([
-        Output('fsForm'),
-        __metadata("design:type", EventEmitter)
-    ], FsFormDirective.prototype, "submitEvent", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], FsFormDirective.prototype, "invalid", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], FsFormDirective.prototype, "valid", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], FsFormDirective.prototype, "submitted", void 0);
-    __decorate([
-        HostBinding('class.fs-form'),
-        __metadata("design:type", Object)
-    ], FsFormDirective.prototype, "fsformClass", void 0);
-    __decorate([
-        ContentChildren(FsFormDialogCloseDirective, { descendants: true }),
-        __metadata("design:type", QueryList)
-    ], FsFormDirective.prototype, "formDialogClose", void 0);
-    __decorate([
-        ContentChildren(MatTabGroup, { descendants: true }),
-        __metadata("design:type", QueryList)
-    ], FsFormDirective.prototype, "_tabGroups", void 0);
-    FsFormDirective = __decorate([
-        Directive({
-            selector: '[fsForm]',
-        }),
-        __param(0, Inject(NgForm)),
-        __param(6, Optional()), __param(6, Inject(MatDialogRef)),
-        __param(7, Optional()), __param(7, Inject(DrawerRef)),
-        __metadata("design:paramtypes", [NgForm,
-            FsForm,
-            ElementRef,
-            FsMessage,
-            FsPrompt,
-            NgZone,
-            MatDialogRef,
-            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 EventEmitter();
+        this.invalid = new EventEmitter();
+        this.valid = new EventEmitter();
+        this.submitted = new EventEmitter();
+        this.reseted = new EventEmitter();
+        this.cleared = new EventEmitter();
+        this.fsformClass = true;
+        this._tabGroups = new QueryList();
+        this._submitButtons = new QueryList();
+        this._dialogBackdropEscape = false;
+        this._snapshot = {};
+        this._status$ = new BehaviorSubject(FormStatus.Valid);
+        this._destroy$ = new Subject();
+    }
+    Object.defineProperty(FsFormDirective.prototype, "submitting", {
+        get: function () {
+            return this._status$.getValue() === FormStatus.Submitting;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FsFormDirective.prototype, "completing", {
+        get: function () {
+            return this._status$.getValue() === 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 of(submittedEvent);
+            }
+            var result = this.submit(this._submitEvent);
+            if (!isObservable(result)) {
+                return of(submittedEvent);
+            }
+            return result
+                .pipe(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 = 'Changes not saved. Please review errors highlighted in red.';
+            this._message.error(message, { mode: MessageMode.Toast });
+            var el = this._element.nativeElement.querySelector('.ng-invalid');
+            if (el) {
+                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+            return 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() : of({});
+        return submitted
+            .pipe(take(1), 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(tap(function (event) {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+        }), filter(function () {
+            return [FormStatus.Valid, FormStatus.Invalid]
+                .includes(_this._status$.getValue());
+        }), tap(function () { return _this._markControlsAsTouchedAndUpdateValidity(); }), tap(function () { return _this._broadcastSubmittingEvents(); }), switchMap(function () { return _this._waitUntilStatusPending(); }), tap(function () { return _this._setupActiveSubmitButton(); }), mergeMap(function () {
+            return _this.ngForm.status === 'INVALID'
+                ? _this._formInvalidState$
+                : _this._formValidState$;
+        }), catchError(function (e, source$) {
+            _this._handleError(e);
+            return source$;
+        }), tap(function (submittedEvent) {
+            _this._completeSubmit(true, submittedEvent);
+        }), takeUntil(this._destroy$))
+            .subscribe(function () { });
+    };
+    FsFormDirective.prototype._listenWindowClose = function () {
+        var _this = this;
+        fromEvent(window, 'beforeunload')
+            .pipe(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 () {
+            fromEvent(document, 'keydown')
+                .pipe(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(filter(function (result) { return confirmResultContinue(result); }), switchMap(function (result) {
+                return result === ConfirmResult.Pristine || result === ConfirmResult.Discard
+                    ? of(null)
+                    : _this.submitted.asObservable();
+            }), 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(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(FormStatus.Submitted);
+        if (success) {
+            this._status$.next(FormStatus.Success);
+        }
+        else {
+            this._status$.next(FormStatus.Error);
+        }
+        this._status$.next(FormStatus.Completing);
+        var resetDelay = success ? this.successDelay : this.errorDelay;
+        of(true)
+            .pipe(delay(resetDelay), first(), takeUntil(this._destroy$)).subscribe(function () {
+            if (_this.ngForm.form.status === 'VALID') {
+                _this._status$.next(FormStatus.Valid);
+            }
+            else {
+                _this._status$.next(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(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(takeUntil(this._destroy$))
+                .subscribe(function (subscriber) {
+                if (_this.submitting) {
+                    _this._status$
+                        .pipe(filter(function (status) { return status === FormStatus.Success || status === FormStatus.Error; }), takeUntil(_this._destroy$))
+                        .subscribe(function (status) {
+                        if (status === 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(switchMap(function (subscriber) {
+                return iif(function () { return _this.confirm && _this.confirmDrawer; }, _this.triggerConfirm()
+                    .pipe(map(function (result) { return confirmResultContinue(result); }), tap(function (result) {
+                    if (result) {
+                        subscriber.next();
+                        subscriber.complete();
+                    }
+                })), defer(function () {
+                    subscriber.next();
+                    subscriber.complete();
+                }));
+            }), 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(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 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(takeUntil(this._destroy$))
+            .subscribe(function (event) {
+            if (!_this.submitting) {
+                if (_this.confirm && _this.confirmTabs) {
+                    _this.triggerConfirm()
+                        .pipe(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(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(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 + '_' + 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(takeUntil(this._destroy$))
+            .subscribe(function () {
+            _this._updateDirtySubmitButtons();
+        });
+        this._submitButtons.changes
+            .pipe(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(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(startWith(this.ngForm.status), 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: NgForm, decorators: [{ type: Inject, args: [NgForm,] }] },
+        { type: FsForm },
+        { type: ElementRef },
+        { type: FsMessage },
+        { type: FsPrompt },
+        { type: NgZone },
+        { type: MatDialogRef, decorators: [{ type: Optional }, { type: Inject, args: [MatDialogRef,] }] },
+        { type: DrawerRef, decorators: [{ type: Optional }, { type: Inject, args: [DrawerRef,] }] }
+    ]; };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "wrapperSelector", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "messageSelector", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "hintSelector", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "labelSelector", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "autocomplete", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "shortcuts", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "confirm", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "confirmDialog", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "confirmDrawer", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "confirmBrowser", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "confirmTabs", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "dirtySubmitButton", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], FsFormDirective.prototype, "submit", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "successDelay", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "errorDelay", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", MatTabGroup)
+    ], FsFormDirective.prototype, "tabGroup", void 0);
+    __decorate([
+        Output('fsForm'),
+        __metadata("design:type", EventEmitter)
+    ], FsFormDirective.prototype, "submitEvent", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], FsFormDirective.prototype, "invalid", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], FsFormDirective.prototype, "valid", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], FsFormDirective.prototype, "submitted", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], FsFormDirective.prototype, "reseted", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], FsFormDirective.prototype, "cleared", void 0);
+    __decorate([
+        HostBinding('class.fs-form'),
+        __metadata("design:type", Object)
+    ], FsFormDirective.prototype, "fsformClass", void 0);
+    __decorate([
+        ContentChildren(FsFormDialogCloseDirective, { descendants: true }),
+        __metadata("design:type", QueryList)
+    ], FsFormDirective.prototype, "formDialogClose", void 0);
+    __decorate([
+        ContentChildren(MatTabGroup, { descendants: true }),
+        __metadata("design:type", QueryList)
+    ], FsFormDirective.prototype, "_tabGroups", void 0);
+    FsFormDirective = __decorate([
+        Directive({
+            selector: '[fsForm]',
+        }),
+        __param(0, Inject(NgForm)),
+        __param(6, Optional()), __param(6, Inject(MatDialogRef)),
+        __param(7, Optional()), __param(7, Inject(DrawerRef)),
+        __metadata("design:paramtypes", [NgForm,
+            FsForm,
+            ElementRef,
+            FsMessage,
+            FsPrompt,
+            NgZone,
+            MatDialogRef,
+            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 InjectionToken('fs.form.validate-messages');
-var VALIDATE_MESSAGE_PROVIDER = {
-    provide: VALIDATE_MESSAGES,
-    useFactory: messageProviderFactory,
-};
-function messageProviderFactory() {
-    return __assign({}, ERROR_MESSAGES);
+var VALIDATE_MESSAGES = new 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 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(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) {
-        values(args)
-            .forEach(function (name) {
-            message = message.replace(/\$\(\d\)/, name);
-        });
-        return message;
-    };
-    FsControlDirective.prototype.getError = function (controlRef) {
-        var name = 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: ElementRef },
-        { type: Renderer2 },
-        { type: Injector },
-        { type: undefined, decorators: [{ type: Self }, { type: Inject, args: [VALIDATE_MESSAGES,] }] },
-        { type: NgControl, decorators: [{ type: Optional }] },
-        { type: FsFormDirective, decorators: [{ type: Optional }, { type: Inject, args: [FsFormDirective,] }] }
-    ]; };
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsControlDirective.prototype, "wrapperSelector", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsControlDirective.prototype, "messageSelector", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsControlDirective.prototype, "hintSelector", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsControlDirective.prototype, "labelSelector", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsControlDirective.prototype, "appendMessageClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsControlDirective.prototype, "appendLabelClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsControlDirective.prototype, "appendErrorClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsControlDirective.prototype, "appendHintClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], FsControlDirective.prototype, "validateMessages", null);
-    FsControlDirective = __decorate([
-        Directive({
-            selector: '[fsFormControl]',
-            providers: [
-                VALIDATE_MESSAGE_PROVIDER
-            ],
-        }),
-        __param(3, Self()), __param(3, Inject(VALIDATE_MESSAGES)),
-        __param(4, Optional()),
-        __param(5, Optional()), __param(5, Inject(FsFormDirective)),
-        __metadata("design:paramtypes", [ElementRef,
-            Renderer2,
-            Injector, Object, 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 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(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) {
+        values(args)
+            .forEach(function (name) {
+            message = message.replace(/\$\(\d\)/, name);
+        });
+        return message;
+    };
+    FsControlDirective.prototype.getError = function (controlRef) {
+        var name = 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: ElementRef },
+        { type: Renderer2 },
+        { type: Injector },
+        { type: undefined, decorators: [{ type: Self }, { type: Inject, args: [VALIDATE_MESSAGES,] }] },
+        { type: NgControl, decorators: [{ type: Optional }] },
+        { type: FsFormDirective, decorators: [{ type: Optional }, { type: Inject, args: [FsFormDirective,] }] }
+    ]; };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsControlDirective.prototype, "wrapperSelector", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsControlDirective.prototype, "messageSelector", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsControlDirective.prototype, "hintSelector", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsControlDirective.prototype, "labelSelector", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsControlDirective.prototype, "appendMessageClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsControlDirective.prototype, "appendLabelClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsControlDirective.prototype, "appendErrorClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsControlDirective.prototype, "appendHintClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], FsControlDirective.prototype, "validateMessages", null);
+    FsControlDirective = __decorate([
+        Directive({
+            selector: '[fsFormControl]',
+            providers: [
+                VALIDATE_MESSAGE_PROVIDER
+            ],
+        }),
+        __param(3, Self()), __param(3, Inject(VALIDATE_MESSAGES)),
+        __param(4, Optional()),
+        __param(5, Optional()), __param(5, Inject(FsFormDirective)),
+        __metadata("design:paramtypes", [ElementRef,
+            Renderer2,
+            Injector, Object, 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 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([
-        Input('fsFormRequired'),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], FsFormRequiredDirective.prototype, "setFsFormRequired", null);
-    __decorate([
-        Input('required'),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], FsFormRequiredDirective.prototype, "setRequired", null);
-    __decorate([
-        Input('fsFormRequiredMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormRequiredDirective.prototype, "validationMessage", null);
-    FsFormRequiredDirective = __decorate([
-        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 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([
+        Input('fsFormRequired'),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], FsFormRequiredDirective.prototype, "setFsFormRequired", null);
+    __decorate([
+        Input('required'),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], FsFormRequiredDirective.prototype, "setRequired", null);
+    __decorate([
+        Input('fsFormRequiredMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormRequiredDirective.prototype, "validationMessage", null);
+    FsFormRequiredDirective = __decorate([
+        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 || email(control.value)) {
-            return null;
-        }
-        return { email: true };
-    };
-    FsValidators.emails = function (control) {
-        var model = control.value || '';
-        var hasInvalidEmails = model
-            .split(',')
-            .some(function (part) { return !email(part); });
-        return hasInvalidEmails ? { email: true } : null;
-    };
-    FsValidators.numeric = function (control) {
-        if (isEmpty(control.value) || 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 || 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 (!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 (isObject(control.value)) {
-            var start = control.value.start;
-            var end = control.value.end;
-            if ((!start && !end) || (isValid(start) && 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$ = throwError(err);
-        }
-        if (!stream$) {
-            if (result instanceof Promise) {
-                stream$ = from(result);
-            }
-            else if (isObservable(result)) {
-                stream$ = result;
-            }
-            else {
-                stream$ = of(null);
-            }
-        }
-        return stream$
-            .pipe(map(function () { return null; }), catchError(function (err) {
-            return of({ validationError: err });
-        }), take(1));
-    };
-    return FsValidators;
+var FsValidators = /** @class */ (function () {
+    function FsValidators() {
+    }
+    FsValidators.email = function (control) {
+        if (!control.value || email(control.value)) {
+            return null;
+        }
+        return { email: true };
+    };
+    FsValidators.emails = function (control) {
+        var model = control.value || '';
+        var hasInvalidEmails = model
+            .split(',')
+            .some(function (part) { return !email(part); });
+        return hasInvalidEmails ? { email: true } : null;
+    };
+    FsValidators.numeric = function (control) {
+        if (isEmpty(control.value) || 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 || 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 (!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 (isObject(control.value)) {
+            var start = control.value.start;
+            var end = control.value.end;
+            if ((!start && !end) || (isValid(start) && 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$ = throwError(err);
+        }
+        if (!stream$) {
+            if (result instanceof Promise) {
+                stream$ = from(result);
+            }
+            else if (isObservable(result)) {
+                stream$ = result;
+            }
+            else {
+                stream$ = of(null);
+            }
+        }
+        return stream$
+            .pipe(map(function () { return null; }), catchError(function (err) {
+            return of({ validationError: err });
+        }), 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) || Validators.min(parseFloat(this.fsFormMin))(this._control);
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormMinDirective.prototype, "fsFormMin", void 0);
-    __decorate([
-        Input('fsFormMinMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormMinDirective.prototype, "validationMessage", null);
-    FsFormMinDirective = __decorate([
-        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) || Validators.min(parseFloat(this.fsFormMin))(this._control);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormMinDirective.prototype, "fsFormMin", void 0);
+    __decorate([
+        Input('fsFormMinMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormMinDirective.prototype, "validationMessage", null);
+    FsFormMinDirective = __decorate([
+        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) || Validators.max(this.fsFormMax)(this._control);
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], FsFormMaxDirective.prototype, "fsFormMax", void 0);
-    __decorate([
-        Input('fsFormMaxMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormMaxDirective.prototype, "validationMessage", null);
-    FsFormMaxDirective = __decorate([
-        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) || Validators.max(this.fsFormMax)(this._control);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], FsFormMaxDirective.prototype, "fsFormMax", void 0);
+    __decorate([
+        Input('fsFormMaxMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormMaxDirective.prototype, "validationMessage", null);
+    FsFormMaxDirective = __decorate([
+        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 Validators.minLength(this.fsFormMinLength)(this._control);
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], FsFormMinLengthDirective.prototype, "fsFormMinLength", void 0);
-    __decorate([
-        Input('fsFormMinLengthMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormMinLengthDirective.prototype, "validationMessage", null);
-    FsFormMinLengthDirective = __decorate([
-        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 Validators.minLength(this.fsFormMinLength)(this._control);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], FsFormMinLengthDirective.prototype, "fsFormMinLength", void 0);
+    __decorate([
+        Input('fsFormMinLengthMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormMinLengthDirective.prototype, "validationMessage", null);
+    FsFormMinLengthDirective = __decorate([
+        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 Validators.maxLength(this.fsFormMaxLength)(this._control);
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], FsFormMaxLengthDirective.prototype, "fsFormMaxLength", void 0);
-    __decorate([
-        Input('fsFormMaxLengthMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormMaxLengthDirective.prototype, "validationMessage", null);
-    FsFormMaxLengthDirective = __decorate([
-        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 Validators.maxLength(this.fsFormMaxLength)(this._control);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], FsFormMaxLengthDirective.prototype, "fsFormMaxLength", void 0);
+    __decorate([
+        Input('fsFormMaxLengthMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormMaxLengthDirective.prototype, "validationMessage", null);
+    FsFormMaxLengthDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormEmailDirective.prototype, "fsFormEmail", void 0);
-    __decorate([
-        Input('fsFormEmailMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormEmailDirective.prototype, "validationMessage", null);
-    FsFormEmailDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormEmailDirective.prototype, "fsFormEmail", void 0);
+    __decorate([
+        Input('fsFormEmailMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormEmailDirective.prototype, "validationMessage", null);
+    FsFormEmailDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormEmailsDirective.prototype, "fsFormEmails", void 0);
-    __decorate([
-        Input('fsFormEmailsMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormEmailsDirective.prototype, "validationMessage", null);
-    FsFormEmailsDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormEmailsDirective.prototype, "fsFormEmails", void 0);
+    __decorate([
+        Input('fsFormEmailsMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormEmailsDirective.prototype, "validationMessage", null);
+    FsFormEmailsDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormPhoneDirective.prototype, "fsFormPhone", void 0);
-    __decorate([
-        Input('fsFormPhoneMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormPhoneDirective.prototype, "validationMessage", null);
-    FsFormPhoneDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormPhoneDirective.prototype, "fsFormPhone", void 0);
+    __decorate([
+        Input('fsFormPhoneMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormPhoneDirective.prototype, "validationMessage", null);
+    FsFormPhoneDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormCompareDirective.prototype, "fsFormCompare", void 0);
-    __decorate([
-        Input('fsFormCompareMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormCompareDirective.prototype, "validationMessage", null);
-    FsFormCompareDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormCompareDirective.prototype, "fsFormCompare", void 0);
+    __decorate([
+        Input('fsFormCompareMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormCompareDirective.prototype, "validationMessage", null);
+    FsFormCompareDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormIntegerDirective.prototype, "fsFormInteger", void 0);
-    __decorate([
-        Input('fsFormIntegerMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormIntegerDirective.prototype, "validationMessage", null);
-    FsFormIntegerDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormIntegerDirective.prototype, "fsFormInteger", void 0);
+    __decorate([
+        Input('fsFormIntegerMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormIntegerDirective.prototype, "validationMessage", null);
+    FsFormIntegerDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormNumericDirective.prototype, "fsFormNumeric", void 0);
-    __decorate([
-        Input('fsFormNumericMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormNumericDirective.prototype, "validationMessage", null);
-    FsFormNumericDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormNumericDirective.prototype, "fsFormNumeric", void 0);
+    __decorate([
+        Input('fsFormNumericMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormNumericDirective.prototype, "validationMessage", null);
+    FsFormNumericDirective = __decorate([
+        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 Validators.pattern(this.fsFormPattern)(this._control);
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", RegExp)
-    ], FsFormPatternDirective.prototype, "fsFormPattern", void 0);
-    __decorate([
-        Input('fsFormPatternMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormPatternDirective.prototype, "validationMessage", null);
-    FsFormPatternDirective = __decorate([
-        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 Validators.pattern(this.fsFormPattern)(this._control);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", RegExp)
+    ], FsFormPatternDirective.prototype, "fsFormPattern", void 0);
+    __decorate([
+        Input('fsFormPatternMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormPatternDirective.prototype, "validationMessage", null);
+    FsFormPatternDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormFunctionDirective.prototype, "fsFormFunction", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormFunctionDirective.prototype, "fsFormFunctionData", void 0);
-    FsFormFunctionDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormFunctionDirective.prototype, "fsFormFunction", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormFunctionDirective.prototype, "fsFormFunctionData", void 0);
+    FsFormFunctionDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormGreaterDirective.prototype, "fsFormGreater", void 0);
-    __decorate([
-        Input('fsFormGreaterMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormGreaterDirective.prototype, "validationMessage", null);
-    FsFormGreaterDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormGreaterDirective.prototype, "fsFormGreater", void 0);
+    __decorate([
+        Input('fsFormGreaterMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormGreaterDirective.prototype, "validationMessage", null);
+    FsFormGreaterDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDateRangeDirective.prototype, "fsFormDateRange", void 0);
-    __decorate([
-        Input('fsFormDateRangeMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormDateRangeDirective.prototype, "validationMessage", null);
-    FsFormDateRangeDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDateRangeDirective.prototype, "fsFormDateRange", void 0);
+    __decorate([
+        Input('fsFormDateRangeMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormDateRangeDirective.prototype, "validationMessage", null);
+    FsFormDateRangeDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormLesserDirective.prototype, "fsFormLesser", void 0);
-    __decorate([
-        Input('fsFormLesserMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormLesserDirective.prototype, "validationMessage", null);
-    FsFormLesserDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormLesserDirective.prototype, "fsFormLesser", void 0);
+    __decorate([
+        Input('fsFormLesserMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormLesserDirective.prototype, "validationMessage", null);
+    FsFormLesserDirective = __decorate([
+        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([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormUrlDirective.prototype, "fsFormUrl", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormUrlDirective.prototype, "fsFormUrlProtocol", void 0);
-    __decorate([
-        Input('fsFormUrlMessage'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], FsFormUrlDirective.prototype, "validationMessage", null);
-    FsFormUrlDirective = __decorate([
-        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([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormUrlDirective.prototype, "fsFormUrl", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormUrlDirective.prototype, "fsFormUrlProtocol", void 0);
+    __decorate([
+        Input('fsFormUrlMessage'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FsFormUrlDirective.prototype, "validationMessage", null);
+    FsFormUrlDirective = __decorate([
+        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 Subject();
-    }
-    FsSubmitButtonDirective.prototype.ngOnInit = function () {
-        var _this = this;
-        if (this._form) {
-            this._form.addSubmitButton(this);
-            fromEvent(this.element, 'click')
-                .pipe(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: MatButton, decorators: [{ type: Optional }, { type: Host }] },
-        { type: FsFormDirective, decorators: [{ type: Optional }] },
-        { type: ElementRef },
-        { type: ChangeDetectorRef }
-    ]; };
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsSubmitButtonDirective.prototype, "name", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsSubmitButtonDirective.prototype, "dirtySubmit", void 0);
-    __decorate([
-        HostBinding('style.transition'),
-        __metadata("design:type", Object)
-    ], FsSubmitButtonDirective.prototype, "transitionStyle", void 0);
-    FsSubmitButtonDirective = __decorate([
-        Directive({
-            selector: 'button[type="submit"]',
-        }),
-        __param(0, Optional()), __param(0, Host()),
-        __param(1, Optional()),
-        __metadata("design:paramtypes", [MatButton,
-            FsFormDirective,
-            ElementRef,
-            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 Subject();
+    }
+    FsSubmitButtonDirective.prototype.ngOnInit = function () {
+        var _this = this;
+        if (this._form) {
+            this._form.addSubmitButton(this);
+            fromEvent(this.element, 'click')
+                .pipe(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: MatButton, decorators: [{ type: Optional }, { type: Host }] },
+        { type: FsFormDirective, decorators: [{ type: Optional }] },
+        { type: ElementRef },
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsSubmitButtonDirective.prototype, "name", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsSubmitButtonDirective.prototype, "dirtySubmit", void 0);
+    __decorate([
+        HostBinding('style.transition'),
+        __metadata("design:type", Object)
+    ], FsSubmitButtonDirective.prototype, "transitionStyle", void 0);
+    FsSubmitButtonDirective = __decorate([
+        Directive({
+            selector: 'button[type="submit"]',
+        }),
+        __param(0, Optional()), __param(0, Host()),
+        __param(1, Optional()),
+        __metadata("design:paramtypes", [MatButton,
+            FsFormDirective,
+            ElementRef,
+            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([
-        Input('validate'),
-        __metadata("design:type", Object)
-    ], FsFormValidateDirective.prototype, "validateFn", void 0);
-    __decorate([
-        Input('validateData'),
-        __metadata("design:type", Object)
-    ], FsFormValidateDirective.prototype, "validateFnData", void 0);
-    FsFormValidateDirective = __decorate([
-        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([
+        Input('validate'),
+        __metadata("design:type", Object)
+    ], FsFormValidateDirective.prototype, "validateFn", void 0);
+    __decorate([
+        Input('validateData'),
+        __metadata("design:type", Object)
+    ], FsFormValidateDirective.prototype, "validateFnData", void 0);
+    FsFormValidateDirective = __decorate([
+        Directive({
+            selector: '[validate]',
+            providers: [
+                VALIDATE_MESSAGE_PROVIDER
+            ],
+        })
+    ], FsFormValidateDirective);
+    return FsFormValidateDirective;
 }(FsControlDirective));
 
-var FsFormDialogActionsComponent = /** @class */ (function () {
-    function FsFormDialogActionsComponent(_form, _cdRef) {
-        this._form = _form;
-        this._cdRef = _cdRef;
-        this.save = true;
-        this.create = false;
-        this.close = false;
-        this.dirty = false;
-        this._destroy$ = new Subject();
-    }
-    FsFormDialogActionsComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this._form.ngForm.valueChanges
-            .pipe(filter(function () { return (!_this.dirty); }), takeUntil(this._destroy$))
-            .subscribe(function () {
-            _this.dirty = _this._form.ngForm.dirty;
-            _this._cdRef.markForCheck();
-        });
-        this._form.submitted
-            .pipe(delay(50), takeUntil(this._destroy$))
-            .subscribe(function () {
-            _this.dirty = false;
-            _this._cdRef.markForCheck();
-        });
-    };
-    FsFormDialogActionsComponent.prototype.ngOnDestroy = function () {
-        this._destroy$.next();
-        this._destroy$.complete();
-    };
-    FsFormDialogActionsComponent.ctorParameters = function () { return [
-        { type: FsFormDirective, decorators: [{ type: Optional }] },
-        { type: ChangeDetectorRef }
-    ]; };
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDialogActionsComponent.prototype, "save", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDialogActionsComponent.prototype, "create", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsFormDialogActionsComponent.prototype, "close", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], FsFormDialogActionsComponent.prototype, "name", void 0);
-    FsFormDialogActionsComponent = __decorate([
-        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        [matDialogClose]=\"null\">\r\n      Close\r\n    </button>\r\n  </div>\r\n</div>",
-            changeDetection: 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}"]
-        }),
-        __param(0, Optional()),
-        __metadata("design:paramtypes", [FsFormDirective,
-            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 Subject();
+    }
+    FsFormDialogActionsComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        if (this._form) {
+            this._form.ngForm.valueChanges
+                .pipe(filter(function () { return (!_this.dirty); }), takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.dirty = _this._form.ngForm.dirty;
+                _this._cdRef.markForCheck();
+            });
+            this._form.submitted
+                .pipe(delay(50), takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.dirty = false;
+                _this._cdRef.markForCheck();
+            });
+            this._form.reseted
+                .pipe(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(filter(function (confirmResult) { return (confirmResult !== ConfirmResult.Review); }), 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: Optional }] },
+        { type: MatDialogRef, decorators: [{ type: Optional }] },
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDialogActionsComponent.prototype, "save", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDialogActionsComponent.prototype, "create", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsFormDialogActionsComponent.prototype, "close", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], FsFormDialogActionsComponent.prototype, "name", void 0);
+    FsFormDialogActionsComponent = __decorate([
+        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: 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, Optional()),
+        __param(1, Optional()),
+        __metadata("design:paramtypes", [FsFormDirective,
+            MatDialogRef,
+            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([
-        NgModule({
-            imports: [
-                CommonModule,
-                FormsModule,
-                MatButtonModule,
-                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: ErrorStateMatcher,
-                    useClass: 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([
+        NgModule({
+            imports: [
+                CommonModule,
+                FormsModule,
+                MatButtonModule,
+                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: ErrorStateMatcher,
+                    useClass: 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 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 of(true);
-        }
-        return confirmUnsaved(form, this._prompt)
-            .pipe(map(function (result) {
-            return confirmResultContinue(result);
-        }));
-    };
-    FormDeactivateGuard.ctorParameters = function () { return [
-        { type: FsPrompt }
-    ]; };
-    FormDeactivateGuard.ɵprov = ɵɵdefineInjectable({ factory: function FormDeactivateGuard_Factory() { return new FormDeactivateGuard(ɵɵinject(FsPrompt)); }, token: FormDeactivateGuard, providedIn: "root" });
-    FormDeactivateGuard = __decorate([
-        Injectable({
-            providedIn: 'root'
-        }),
-        __metadata("design:paramtypes", [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 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 of(true);
+        }
+        return confirmUnsaved(form, this._prompt)
+            .pipe(map(function (result) {
+            return confirmResultContinue(result);
+        }));
+    };
+    FormDeactivateGuard.ctorParameters = function () { return [
+        { type: FsPrompt }
+    ]; };
+    FormDeactivateGuard.ɵprov = ɵɵdefineInjectable({ factory: function FormDeactivateGuard_Factory() { return new FormDeactivateGuard(ɵɵinject(FsPrompt)); }, token: FormDeactivateGuard, providedIn: "root" });
+    FormDeactivateGuard = __decorate([
+        Injectable({
+            providedIn: 'root'
+        }),
+        __metadata("design:paramtypes", [FsPrompt])
+    ], FormDeactivateGuard);
+    return FormDeactivateGuard;
 }());
 
 // Modules
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { ConfirmResult, FormDeactivateGuard, FormStatus, FsForm, FsFormDialogActionsComponent, FsFormDirective, FsFormModule, FsValidators, FsFormDialogCloseDirective as ɵa, FsControlDirective as ɵb, VALIDATE_MESSAGES as ɵc, VALIDATE_MESSAGE_PROVIDER as ɵd, messageProviderFactory as ɵe, FsFormRequiredDirective as ɵf, FsFormMinDirective as ɵg, FsFormMaxDirective as ɵh, FsFormMinLengthDirective as ɵi, FsFormMaxLengthDirective as ɵj, FsFormEmailDirective as ɵk, FsFormEmailsDirective as ɵl, FsFormPhoneDirective as ɵm, FsFormCompareDirective as ɵn, FsFormIntegerDirective as ɵo, FsFormNumericDirective as ɵp, FsFormPatternDirective as ɵq, FsFormFunctionDirective as ɵr, FsFormDateRangeDirective as ɵs, FsFormGreaterDirective as ɵt, FsFormLesserDirective as ɵu, FsFormUrlDirective as ɵv, FsSubmitButtonDirective as ɵw, FsFormValidateDirective as ɵx, FsFormDialogActionsComponent as ɵy };
+export { ConfirmResult, FormDeactivateGuard, FormStatus, FsForm, FsFormDialogActionsComponent, FsFormDirective, FsFormModule, FsValidators, FsFormDialogCloseDirective as ɵa, FsControlDirective as ɵb, VALIDATE_MESSAGES as ɵc, VALIDATE_MESSAGE_PROVIDER as ɵd, messageProviderFactory as ɵe, FsFormRequiredDirective as ɵf, FsFormMinDirective as ɵg, FsFormMaxDirective as ɵh, FsFormMinLengthDirective as ɵi, FsFormMaxLengthDirective as ɵj, FsFormEmailDirective as ɵk, FsFormEmailsDirective as ɵl, FsFormPhoneDirective as ɵm, FsFormCompareDirective as ɵn, FsFormIntegerDirective as ɵo, FsFormNumericDirective as ɵp, FsFormPatternDirective as ɵq, FsFormFunctionDirective as ɵr, FsFormDateRangeDirective as ɵs, FsFormGreaterDirective as ɵt, FsFormLesserDirective as ɵu, FsFormUrlDirective as ɵv, FsSubmitButtonDirective as ɵw, FsFormValidateDirective as ɵx };
 //# sourceMappingURL=firestitch-form.js.map