@firestitch/form 9.7.3 → 9.7.7

package/fesm2015/firestitch-form.js

@@ -15,1881 +15,1890 @@ 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(observer => {
-        if (!form.confirm || !form.ngForm.dirty) {
-            observer.next(ConfirmResult.Pristine);
-            observer.complete();
-            return;
-        }
-        let title = 'You Have Unsaved Changes';
-        let message = 'What would you like to do with your changes?';
-        let saveLabel = 'Save & Continue';
-        let discardLabel = 'Discard Changes & Continue';
-        let cancelLabel = 'Review Changes';
-        if (typeof form.confirm === 'object') {
-            title = form.confirm.title || title;
-            message = form.confirm.message || message;
-            saveLabel = form.confirm.saveLabel || saveLabel;
-            discardLabel = form.confirm.discardLabel || discardLabel;
-            cancelLabel = form.confirm.cancelLabel || cancelLabel;
-        }
-        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(value => {
-            if (value === 'discard') {
-                observer.next(ConfirmResult.Discard);
-                observer.complete();
-                form.reset();
-            }
-            if (value === 'save') {
-                form.submitted
-                    .pipe(first())
-                    .subscribe(() => {
-                    observer.next(ConfirmResult.Save);
-                    observer.complete();
-                });
-                form.invalid
-                    .pipe(first())
-                    .subscribe(() => {
-                    observer.next(ConfirmResult.Invalid);
-                    observer.complete();
-                });
-                form.ngForm.control.markAsPristine();
-                form.ngForm.ngSubmit.emit();
-            }
-        }, (error) => {
-            observer.next(ConfirmResult.Review);
-            observer.complete();
-        });
-    });
+function confirmUnsaved(form, prompt) {
+    return new Observable(observer => {
+        if (!form.confirm || !form.ngForm.dirty) {
+            observer.next(ConfirmResult.Pristine);
+            observer.complete();
+            return;
+        }
+        let title = 'You Have Unsaved Changes';
+        let message = 'What would you like to do with your changes?';
+        let saveLabel = 'Save & Continue';
+        let discardLabel = 'Discard Changes & Continue';
+        let cancelLabel = 'Review Changes';
+        if (typeof form.confirm === 'object') {
+            title = form.confirm.title || title;
+            message = form.confirm.message || message;
+            saveLabel = form.confirm.saveLabel || saveLabel;
+            discardLabel = form.confirm.discardLabel || discardLabel;
+            cancelLabel = form.confirm.cancelLabel || cancelLabel;
+        }
+        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((value) => {
+            if (value === 'discard') {
+                observer.next(ConfirmResult.Discard);
+                observer.complete();
+                form.reset();
+            }
+            if (value === 'save') {
+                form.submitted
+                    .pipe(first())
+                    .subscribe(() => {
+                    observer.next(ConfirmResult.Save);
+                    observer.complete();
+                });
+                form.invalid
+                    .pipe(first())
+                    .subscribe(() => {
+                    observer.next(ConfirmResult.Invalid);
+                    observer.complete();
+                });
+                form.ngForm.control.markAsPristine();
+                form.ngForm.ngSubmit.emit();
+            }
+        }, (error) => {
+            observer.next(ConfirmResult.Review);
+            observer.complete();
+        });
+    });
 }
 
-let FsFormDialogCloseDirective = class FsFormDialogCloseDirective {
-    constructor() {
-        this.clicked$ = new Subject();
-        this.registered = false;
-        this.type = 'button';
-    }
-    click() {
-        this.clicked$.next();
-    }
-    ngOnDestroy() {
-        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]'
-    })
+let FsFormDialogCloseDirective = class FsFormDialogCloseDirective {
+    constructor() {
+        this.clicked$ = new Subject();
+        this.registered = false;
+        this.type = 'button';
+    }
+    click() {
+        this.clicked$.next();
+    }
+    ngOnDestroy() {
+        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);
 
-let FsForm = class FsForm {
-    constructor() {
-        this._eventBus = new Subject();
-    }
-    broadcast(key, data) {
-        this._eventBus.next({ key, data });
-    }
-    on(key) {
-        return this._eventBus.asObservable()
-            .pipe(filter(event => event.key === key), map(event => event.data));
-    }
-};
-FsForm.ɵprov = ɵɵdefineInjectable({ factory: function FsForm_Factory() { return new FsForm(); }, token: FsForm, providedIn: "root" });
-FsForm = __decorate([
-    Injectable({
-        providedIn: 'root',
-    }),
-    __metadata("design:paramtypes", [])
+let FsForm = class FsForm {
+    constructor() {
+        this._eventBus = new Subject();
+    }
+    broadcast(key, data) {
+        this._eventBus.next({ key, data });
+    }
+    on(key) {
+        return this._eventBus.asObservable()
+            .pipe(filter(event => event.key === key), map(event => 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);
 
-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) {
-    let errors = null;
-    if (control.invalid && control.errors) {
-        errors = {
-            [key]: Object.assign({}, control.errors),
-        };
-    }
-    if (control instanceof FormGroup) {
-        Object.entries(control.controls)
-            .forEach(([name, childControl]) => {
-            const childErrors = getFormErrors(childControl, name);
-            if (childErrors) {
-                if (!errors) {
-                    errors = Object.assign({}, childErrors);
-                }
-                else {
-                    Object.assign(errors, childErrors);
-                }
-            }
-        });
-    }
-    return errors;
+function getFormErrors(control, key) {
+    let errors = null;
+    if (control.invalid && control.errors) {
+        errors = {
+            [key]: Object.assign({}, control.errors),
+        };
+    }
+    if (control instanceof FormGroup) {
+        Object.entries(control.controls)
+            .forEach(([name, childControl]) => {
+            const childErrors = getFormErrors(childControl, name);
+            if (childErrors) {
+                if (!errors) {
+                    errors = Object.assign({}, childErrors);
+                }
+                else {
+                    Object.assign(errors, childErrors);
+                }
+            }
+        });
+    }
+    return errors;
 }
 
-let FsFormDirective = class FsFormDirective {
-    constructor(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();
-    }
-    get submitting() {
-        return this._status$.getValue() === FormStatus.Submitting;
-    }
-    get completing() {
-        return this._status$.getValue() === FormStatus.Completing;
-    }
-    get _submitEvent() {
-        return {
-            ngForm: this.ngForm,
-            submitter: this._submitter,
-        };
-    }
-    get _formValidState$() {
-        this._form.broadcast('valid', this._submitEvent);
-        this.submitEvent.emit(this._submitEvent);
-        this.valid.emit(this._submitEvent);
-        const submittedEvent = {
-            ngForm: this.ngForm,
-            submitter: this._submitter,
-            response: null
-        };
-        if (!this.submit) {
-            return of(submittedEvent);
-        }
-        const result = this.submit(this._submitEvent);
-        if (!isObservable(result)) {
-            return of(submittedEvent);
-        }
-        return result
-            .pipe(map((response) => {
-            submittedEvent.response = response;
-            return submittedEvent;
-        }));
-    }
-    get _formInvalidState$() {
-        this._form.broadcast('invalid', this._submitEvent);
-        if (this.invalid) {
-            this.invalid.emit(this._submitEvent);
-        }
-        const message = 'Changes not saved. Please review errors highlighted in red.';
-        this._message.error(message, { mode: MessageMode.Toast });
-        const el = this._element.nativeElement.querySelector('.ng-invalid');
-        if (el) {
-            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-        return throwError('Form validation error');
-    }
-    get _submitter() {
-        return this._activeSubmitButton
-            ? this._activeSubmitButton.name
-            : null;
-    }
-    ngOnInit() {
-        this._registerConfirmDialogBackdropEscape();
-        this._listenHotKeys();
-        this._listenWindowClose();
-        this._listenSubmit();
-        if (!this.autocomplete) {
-            this._registerAutocomplete();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.confirm) {
-            this._updateDirtySubmitButtons();
-        }
-    }
-    ngAfterContentInit() {
-        this._registerConfirm();
-        this._registerConfirmDialogClose();
-        this._registerConfirmDrawerClose();
-        this._registerConfirmTabs();
-        this._registerDrawerClose();
-        this._registerDirtySubmitButton();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    createSnapshot() {
-        this._snapshot = this.ngForm.value;
-    }
-    reset() {
-        this.ngForm.resetForm();
-        Object.keys(this.ngForm.controls)
-            .forEach((name) => {
-            const control = this.ngForm.controls[name];
-            control.reset(this._snapshot[name]);
-        });
-    }
-    clear() {
-        this.ngForm.resetForm();
-    }
-    dirty() {
-        this.ngForm.form.markAsDirty();
-        this._updateDirtySubmitButtons();
-    }
-    triggerSubmit() {
-        this.ngForm.ngSubmit.next();
-    }
-    triggerConfirm() {
-        const submitted = this.submitting ? this.submitted.asObservable() : of({});
-        return submitted
-            .pipe(take(1), mergeMap(() => confirmUnsaved(this, this._prompt)));
-    }
-    enable() {
-        this.ngForm.control.enable();
-        this._updateDirtySubmitButtons();
-    }
-    disable() {
-        this.ngForm.control.disable();
-        this._submitButtons.forEach((button) => {
-            button.disable();
-        });
-    }
-    addSubmitButton(submitButton) {
-        this._submitButtons.reset([
-            ...this._submitButtons.toArray(),
-            submitButton,
-        ]);
-    }
-    removeSubmitButton(submitButton) {
-        this._submitButtons.reset([
-            ...this._submitButtons.toArray()
-                .filter((submitButton_) => (submitButton !== submitButton_)),
-        ]);
-    }
-    _listenSubmit() {
-        this.ngForm
-            .ngSubmit
-            .pipe(tap((event) => {
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-        }), filter(() => {
-            return [FormStatus.Valid, FormStatus.Invalid]
-                .includes(this._status$.getValue());
-        }), tap(() => this._markControlsAsTouchedAndUpdateValidity()), tap(() => this._broadcastSubmittingEvents()), switchMap(() => this._waitUntilStatusPending()), tap(() => this._setupActiveSubmitButton()), mergeMap(() => {
-            return this.ngForm.status === 'INVALID'
-                ? this._formInvalidState$
-                : this._formValidState$;
-        }), catchError((e, source$) => {
-            this._handleError(e);
-            return source$;
-        }), tap((submittedEvent) => {
-            this._completeSubmit(true, submittedEvent);
-        }), takeUntil(this._destroy$))
-            .subscribe(() => { });
-    }
-    _listenWindowClose() {
-        fromEvent(window, 'beforeunload')
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((event) => {
-            if (this.confirm && this.confirmBrowser && this.ngForm.dirty) {
-                event.returnValue = false;
-            }
-        });
-    }
-    _listenHotKeys() {
-        this._ngZone.runOutsideAngular(() => {
-            fromEvent(document, 'keydown')
-                .pipe(takeUntil(this._destroy$))
-                .subscribe((event) => {
-                if (this._dialogBackdropEscape && event.code === 'Escape') {
-                    const dialog = document.getElementById(this._dialogRef.id);
-                    const paths = event.composedPath();
-                    if (paths) {
-                        paths.forEach(item => {
-                            if (dialog === item) {
-                                this._ngZone.run(() => {
-                                    this._formClose();
-                                });
-                            }
-                        });
-                    }
-                }
-                if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
-                    event.preventDefault();
-                    if (this.shortcuts) {
-                        if (this._elementInForm(document.activeElement)) {
-                            this.ngForm.ngSubmit.next();
-                        }
-                    }
-                }
-            });
-        });
-    }
-    _formClose() {
-        if (this.confirm && this.confirmDialog) {
-            this.triggerConfirm()
-                .pipe(filter((result) => confirmResultContinue(result)), switchMap((result) => {
-                return result === ConfirmResult.Pristine || result === ConfirmResult.Discard
-                    ? of(null)
-                    : this.submitted.asObservable();
-            }), takeUntil(this._destroy$))
-                .subscribe((result) => {
-                this._dialogRef.close(result === null || result === void 0 ? void 0 : result.response);
-            });
-        }
-        else {
-            this._dialogRef.close(null);
-        }
-    }
-    _registerDialogClose(directive) {
-        if (!directive.registered) {
-            directive.registered = true;
-            directive.clicked$
-                .pipe(takeUntil(this._destroy$))
-                .subscribe(() => {
-                this._formClose();
-            });
-        }
-    }
-    _getActiveButton() {
-        const activeButton = this._submitButtons.find(button => {
-            return button.active;
-        });
-        return activeButton ? activeButton : this._submitButtons.first;
-    }
-    _elementInForm(el) {
-        if (el.isSameNode(this._element.nativeElement)) {
-            return true;
-        }
-        else if (el.parentElement) {
-            return this._elementInForm(el.parentElement);
-        }
-        return false;
-    }
-    _completeSubmit(success, submitEvent) {
-        if (success) {
-            this.ngForm.control.markAsPristine();
-            this.createSnapshot();
-            this.submitted.emit(submitEvent);
-        }
-        else {
-            this._resetButtons();
-        }
-        if (this._activeSubmitButton) {
-            if (success) {
-                this._activeSubmitButton.success();
-            }
-            else {
-                this._activeSubmitButton.error();
-            }
-        }
-        this._status$.next(FormStatus.Submitted);
-        if (success) {
-            this._status$.next(FormStatus.Success);
-        }
-        else {
-            this._status$.next(FormStatus.Error);
-        }
-        this._status$.next(FormStatus.Completing);
-        const resetDelay = success ? this.successDelay : this.errorDelay;
-        of(true)
-            .pipe(delay(resetDelay), first(), takeUntil(this._destroy$)).subscribe(() => {
-            if (this.ngForm.form.status === 'VALID') {
-                this._status$.next(FormStatus.Valid);
-            }
-            else {
-                this._status$.next(FormStatus.Invalid);
-            }
-            this._resetButtons();
-            this._updateDirtySubmitButtons();
-        });
-    }
-    _resetButtons() {
-        this._submitButtons.forEach((button) => {
-            button.reset();
-        });
-    }
-    _registerConfirm() {
-        this.ngForm.form.valueChanges
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((changes) => {
-            if (this.confirm) {
-                const existing = Object.keys(this._snapshot);
-                Object.keys(changes)
-                    .forEach((name) => {
-                    if (existing.indexOf(name) === -1) {
-                        this._snapshot[name] = changes[name];
-                    }
-                });
-            }
-        });
-    }
-    _registerDrawerClose() {
-        if (this._drawerRef) {
-            this._drawerRef.closeStart$
-                .pipe(takeUntil(this._destroy$))
-                .subscribe((subscriber) => {
-                if (this.submitting) {
-                    this._status$
-                        .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this._destroy$))
-                        .subscribe((status) => {
-                        if (status === FormStatus.Success) {
-                            subscriber.next();
-                            subscriber.complete();
-                        }
-                        else {
-                            subscriber.error();
-                        }
-                    });
-                }
-                else {
-                    subscriber.next();
-                    subscriber.complete();
-                }
-            });
-        }
-    }
-    _registerConfirmDrawerClose() {
-        if (this._drawerRef) {
-            this._drawerRef.closeStart$
-                .pipe(switchMap((subscriber) => {
-                return iif(() => this.confirm && this.confirmDrawer, this.triggerConfirm()
-                    .pipe(map((result) => confirmResultContinue(result)), tap((result) => {
-                    if (result) {
-                        subscriber.next();
-                        subscriber.complete();
-                    }
-                    else {
-                        subscriber.error();
-                    }
-                })), defer(() => {
-                    subscriber.next();
-                    subscriber.complete();
-                }));
-            }), takeUntil(this._destroy$))
-                .subscribe();
-        }
-    }
-    _registerConfirmTabs() {
-        if (this.tabGroup) {
-            this.registerConfirmTabGroup(this.tabGroup);
-        }
-        this.registerConfirmTabGroups(this._tabGroups.toArray());
-        this._tabGroups.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.registerConfirmTabGroups(this._tabGroups.toArray());
-        });
-    }
-    registerConfirmTabGroups(tabGroups) {
-        tabGroups.forEach((tabGroup) => {
-            this.registerConfirmTabGroup(tabGroup);
-        });
-    }
-    registerConfirmTabGroup(tabGroup) {
-        const confirmTabGroup = tabGroup;
-        if (!confirmTabGroup._originalHandleClick) {
-            confirmTabGroup._originalHandleClick = tabGroup._handleClick;
-            confirmTabGroup._handlClick$ = new Subject();
-            confirmTabGroup._handleClick = (tab, tabHeader, idx) => {
-                if (confirmTabGroup._handlClick$.observers.length) {
-                    confirmTabGroup._handlClick$.next({ tab, tabHeader, idx });
-                }
-                else {
-                    confirmTabGroup._originalHandleClick(tab, tabHeader, idx);
-                }
-            };
-        }
-        confirmTabGroup._handlClick$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((event) => {
-            if (!this.submitting) {
-                if (this.confirm && this.confirmTabs) {
-                    this.triggerConfirm()
-                        .pipe(takeUntil(this._destroy$))
-                        .subscribe((result) => {
-                        if (confirmResultContinue(result)) {
-                            confirmTabGroup.selectedIndex = event.idx;
-                        }
-                    });
-                }
-                else {
-                    confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
-                }
-            }
-        });
-    }
-    _registerConfirmDialogClose() {
-        if (this._dialogRef) {
-            this.formDialogClose.forEach(item => {
-                this._registerDialogClose(item);
-            });
-            this.formDialogClose.changes
-                .pipe(takeUntil(this._destroy$))
-                .subscribe((e) => {
-                e.forEach(item => {
-                    this._registerDialogClose(item);
-                });
-            });
-        }
-    }
-    _registerConfirmDialogBackdropEscape() {
-        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(() => {
-                this._formClose();
-            });
-            this._destroy$
-                .subscribe(() => {
-                this._dialogRef.disableClose = false;
-            });
-        }
-    }
-    _registerAutocomplete() {
-        this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);
-        this.ngForm.form.registerControl = (name, control) => {
-            const el = this._element.nativeElement.querySelector(`input[name='${name}']`);
-            if (el) {
-                el.setAttribute('name', name + '_' + guid());
-                if (!el.getAttribute('autocomplete')) {
-                    el.setAttribute('autocomplete', 'none');
-                }
-            }
-            return this._registerControl(name, control);
-        };
-    }
-    _registerDirtySubmitButton() {
-        if (!this.ngForm) {
-            return;
-        }
-        this.ngForm.form.valueChanges
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._updateDirtySubmitButtons();
-        });
-        this._submitButtons.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._updateDirtySubmitButtons();
-        });
-    }
-    _updateDirtySubmitButtons() {
-        this._submitButtons
-            .forEach((submitButton) => {
-            if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !submitButton.dirtySubmit) {
-                submitButton.enable();
-            }
-            else {
-                submitButton.disable();
-            }
-        });
-    }
-    _broadcastSubmittingEvents() {
-        this._status$.next(FormStatus.Submitting);
-        this._form.broadcast('submit', this.ngForm);
-    }
-    _markControlsAsTouchedAndUpdateValidity() {
-        Object.values(this.ngForm.controls)
-            .forEach(control => {
-            control.markAsDirty();
-            control.markAsTouched();
-            control.updateValueAndValidity();
-        });
-    }
-    _setupActiveSubmitButton() {
-        this._activeSubmitButton = this._getActiveButton();
-        this._resetButtons();
-        if (this._activeSubmitButton) {
-            this._activeSubmitButton.process();
-        }
-    }
-    _waitUntilStatusPending() {
-        return this.ngForm.statusChanges
-            .pipe(startWith(this.ngForm.status), first((state) => state !== 'PENDING'));
-    }
-    _handleError(e) {
-        console.log('%c Form Submit ', 'color: white; background-color: #D33F49', 'Error occured');
-        console.group('Error Details:');
-        console.log('Message: ', e);
-        console.log('FormRef: ', this);
-        if (this.ngForm.invalid) {
-            const errors = getFormErrors(this.ngForm.control, null);
-            console.log('Validation Errors: ', errors);
-        }
-        console.groupEnd();
-        this._completeSubmit(false, null);
-    }
-};
-FsFormDirective.ctorParameters = () => [
-    { 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])
+let FsFormDirective = class FsFormDirective {
+    constructor(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();
+    }
+    get submitting() {
+        return this._status$.getValue() === FormStatus.Submitting;
+    }
+    get completing() {
+        return this._status$.getValue() === FormStatus.Completing;
+    }
+    get _submitEvent() {
+        return {
+            ngForm: this.ngForm,
+            submitter: this._submitter,
+        };
+    }
+    get _formValidState$() {
+        this._form.broadcast('valid', this._submitEvent);
+        this.submitEvent.emit(this._submitEvent);
+        this.valid.emit(this._submitEvent);
+        const submittedEvent = {
+            ngForm: this.ngForm,
+            submitter: this._submitter,
+            response: null
+        };
+        if (!this.submit) {
+            return of(submittedEvent);
+        }
+        const result = this.submit(this._submitEvent);
+        if (!isObservable(result)) {
+            return of(submittedEvent);
+        }
+        return result
+            .pipe(map((response) => {
+            submittedEvent.response = response;
+            return submittedEvent;
+        }));
+    }
+    get _formInvalidState$() {
+        this._form.broadcast('invalid', this._submitEvent);
+        if (this.invalid) {
+            this.invalid.emit(this._submitEvent);
+        }
+        const message = 'Changes not saved. Please review errors highlighted in red.';
+        this._message.error(message, { mode: MessageMode.Toast });
+        const el = this._element.nativeElement.querySelector('.ng-invalid');
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+        return throwError('Form validation error');
+    }
+    get _submitter() {
+        return this._activeSubmitButton
+            ? this._activeSubmitButton.name
+            : null;
+    }
+    ngOnInit() {
+        this._registerConfirmDialogBackdropEscape();
+        this._listenHotKeys();
+        this._listenWindowClose();
+        this._listenSubmit();
+        if (!this.autocomplete) {
+            this._registerAutocomplete();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.confirm) {
+            this._updateDirtySubmitButtons();
+        }
+    }
+    ngAfterContentInit() {
+        this._registerConfirm();
+        this._registerConfirmDialogClose();
+        this._registerConfirmDrawerClose();
+        this._registerConfirmTabs();
+        this._registerDrawerClose();
+        this._registerDirtySubmitButton();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    createSnapshot() {
+        this._snapshot = this.ngForm.value;
+    }
+    reset() {
+        this.ngForm.resetForm();
+        Object.keys(this.ngForm.controls)
+            .forEach((name) => {
+            const control = this.ngForm.controls[name];
+            control.reset(this._snapshot[name]);
+        });
+        this.reseted.emit();
+    }
+    clear() {
+        this.ngForm.resetForm();
+        this.cleared.emit();
+    }
+    dirty() {
+        this.ngForm.form.markAsDirty();
+        this._updateDirtySubmitButtons();
+    }
+    triggerSubmit() {
+        this.ngForm.ngSubmit.next();
+    }
+    triggerConfirm() {
+        const submitted = this.submitting ? this.submitted.asObservable() : of({});
+        return submitted
+            .pipe(take(1), mergeMap(() => confirmUnsaved(this, this._prompt)));
+    }
+    enable() {
+        this.ngForm.control.enable();
+        this._updateDirtySubmitButtons();
+    }
+    disable() {
+        this.ngForm.control.disable();
+        this._submitButtons.forEach((button) => {
+            button.disable();
+        });
+    }
+    addSubmitButton(submitButton) {
+        this._submitButtons.reset([
+            ...this._submitButtons.toArray(),
+            submitButton,
+        ]);
+    }
+    removeSubmitButton(submitButton) {
+        this._submitButtons.reset([
+            ...this._submitButtons.toArray()
+                .filter((submitButton_) => (submitButton !== submitButton_)),
+        ]);
+    }
+    _listenSubmit() {
+        this.ngForm
+            .ngSubmit
+            .pipe(tap((event) => {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+        }), filter(() => {
+            return [FormStatus.Valid, FormStatus.Invalid]
+                .includes(this._status$.getValue());
+        }), tap(() => this._markControlsAsTouchedAndUpdateValidity()), tap(() => this._broadcastSubmittingEvents()), switchMap(() => this._waitUntilStatusPending()), tap(() => this._setupActiveSubmitButton()), mergeMap(() => {
+            return this.ngForm.status === 'INVALID'
+                ? this._formInvalidState$
+                : this._formValidState$;
+        }), catchError((e, source$) => {
+            this._handleError(e);
+            return source$;
+        }), tap((submittedEvent) => {
+            this._completeSubmit(true, submittedEvent);
+        }), takeUntil(this._destroy$))
+            .subscribe(() => { });
+    }
+    _listenWindowClose() {
+        fromEvent(window, 'beforeunload')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((event) => {
+            if (this.confirm && this.confirmBrowser && this.ngForm.dirty) {
+                event.returnValue = false;
+            }
+        });
+    }
+    _listenHotKeys() {
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(document, 'keydown')
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((event) => {
+                if (this._dialogBackdropEscape && event.code === 'Escape') {
+                    const dialog = document.getElementById(this._dialogRef.id);
+                    const paths = event.composedPath();
+                    if (paths) {
+                        paths.forEach(item => {
+                            if (dialog === item) {
+                                this._ngZone.run(() => {
+                                    this._formClose();
+                                });
+                            }
+                        });
+                    }
+                }
+                if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
+                    event.preventDefault();
+                    if (this.shortcuts) {
+                        if (this._elementInForm(document.activeElement)) {
+                            this.ngForm.ngSubmit.next();
+                        }
+                    }
+                }
+            });
+        });
+    }
+    _formClose() {
+        if (this.confirm && this.confirmDialog) {
+            this.triggerConfirm()
+                .pipe(filter((result) => confirmResultContinue(result)), switchMap((result) => {
+                return result === ConfirmResult.Pristine || result === ConfirmResult.Discard
+                    ? of(null)
+                    : this.submitted.asObservable();
+            }), takeUntil(this._destroy$))
+                .subscribe((result) => {
+                this._dialogRef.close(result === null || result === void 0 ? void 0 : result.response);
+            });
+        }
+        else {
+            this._dialogRef.close(null);
+        }
+    }
+    _registerDialogClose(directive) {
+        if (!directive.registered) {
+            directive.registered = true;
+            directive.clicked$
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._formClose();
+            });
+        }
+    }
+    _getActiveButton() {
+        const activeButton = this._submitButtons.find(button => {
+            return button.active;
+        });
+        return activeButton ? activeButton : this._submitButtons.first;
+    }
+    _elementInForm(el) {
+        if (el.isSameNode(this._element.nativeElement)) {
+            return true;
+        }
+        else if (el.parentElement) {
+            return this._elementInForm(el.parentElement);
+        }
+        return false;
+    }
+    _completeSubmit(success, submitEvent) {
+        if (success) {
+            this.ngForm.control.markAsPristine();
+            this.createSnapshot();
+            this.submitted.emit(submitEvent);
+        }
+        else {
+            this._resetButtons();
+        }
+        if (this._activeSubmitButton) {
+            if (success) {
+                this._activeSubmitButton.success();
+            }
+            else {
+                this._activeSubmitButton.error();
+            }
+        }
+        this._status$.next(FormStatus.Submitted);
+        if (success) {
+            this._status$.next(FormStatus.Success);
+        }
+        else {
+            this._status$.next(FormStatus.Error);
+        }
+        this._status$.next(FormStatus.Completing);
+        const resetDelay = success ? this.successDelay : this.errorDelay;
+        of(true)
+            .pipe(delay(resetDelay), first(), takeUntil(this._destroy$)).subscribe(() => {
+            if (this.ngForm.form.status === 'VALID') {
+                this._status$.next(FormStatus.Valid);
+            }
+            else {
+                this._status$.next(FormStatus.Invalid);
+            }
+            this._resetButtons();
+            this._updateDirtySubmitButtons();
+        });
+    }
+    _resetButtons() {
+        this._submitButtons.forEach((button) => {
+            button.reset();
+        });
+    }
+    _registerConfirm() {
+        this.ngForm.form.valueChanges
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((changes) => {
+            if (this.confirm) {
+                const existing = Object.keys(this._snapshot);
+                Object.keys(changes)
+                    .forEach((name) => {
+                    if (existing.indexOf(name) === -1) {
+                        this._snapshot[name] = changes[name];
+                    }
+                });
+            }
+        });
+    }
+    _registerDrawerClose() {
+        if (this._drawerRef) {
+            this._drawerRef.closeStart$
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((subscriber) => {
+                if (this.submitting) {
+                    this._status$
+                        .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this._destroy$))
+                        .subscribe((status) => {
+                        if (status === FormStatus.Success) {
+                            subscriber.next();
+                            subscriber.complete();
+                        }
+                        else {
+                            subscriber.error();
+                        }
+                    });
+                }
+                else {
+                    subscriber.next();
+                    subscriber.complete();
+                }
+            });
+        }
+    }
+    _registerConfirmDrawerClose() {
+        if (this._drawerRef) {
+            this._drawerRef.closeStart$
+                .pipe(switchMap((subscriber) => {
+                return iif(() => this.confirm && this.confirmDrawer, this.triggerConfirm()
+                    .pipe(map((result) => confirmResultContinue(result)), tap((result) => {
+                    if (result) {
+                        subscriber.next();
+                        subscriber.complete();
+                    }
+                })), defer(() => {
+                    subscriber.next();
+                    subscriber.complete();
+                }));
+            }), takeUntil(this._destroy$))
+                .subscribe();
+        }
+    }
+    _registerConfirmTabs() {
+        if (this.tabGroup) {
+            this.registerConfirmTabGroup(this.tabGroup);
+        }
+        this.registerConfirmTabGroups(this._tabGroups.toArray());
+        this._tabGroups.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.registerConfirmTabGroups(this._tabGroups.toArray());
+        });
+    }
+    registerConfirmTabGroups(tabGroups) {
+        tabGroups.forEach((tabGroup) => {
+            this.registerConfirmTabGroup(tabGroup);
+        });
+    }
+    registerConfirmTabGroup(tabGroup) {
+        const confirmTabGroup = tabGroup;
+        if (!confirmTabGroup._originalHandleClick) {
+            confirmTabGroup._originalHandleClick = tabGroup._handleClick;
+            confirmTabGroup._handlClick$ = new Subject();
+            confirmTabGroup._handleClick = (tab, tabHeader, idx) => {
+                if (confirmTabGroup._handlClick$.observers.length) {
+                    confirmTabGroup._handlClick$.next({ tab, tabHeader, idx });
+                }
+                else {
+                    confirmTabGroup._originalHandleClick(tab, tabHeader, idx);
+                }
+            };
+        }
+        confirmTabGroup._handlClick$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((event) => {
+            if (!this.submitting) {
+                if (this.confirm && this.confirmTabs) {
+                    this.triggerConfirm()
+                        .pipe(takeUntil(this._destroy$))
+                        .subscribe((result) => {
+                        if (confirmResultContinue(result)) {
+                            confirmTabGroup.selectedIndex = event.idx;
+                        }
+                    });
+                }
+                else {
+                    confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
+                }
+            }
+        });
+    }
+    _registerConfirmDialogClose() {
+        if (this._dialogRef) {
+            this.formDialogClose.forEach(item => {
+                this._registerDialogClose(item);
+            });
+            this.formDialogClose.changes
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((e) => {
+                e.forEach(item => {
+                    this._registerDialogClose(item);
+                });
+            });
+        }
+    }
+    _registerConfirmDialogBackdropEscape() {
+        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(() => {
+                this._formClose();
+            });
+            this._destroy$
+                .subscribe(() => {
+                this._dialogRef.disableClose = false;
+            });
+        }
+    }
+    _registerAutocomplete() {
+        this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);
+        this.ngForm.form.registerControl = (name, control) => {
+            const el = this._element.nativeElement.querySelector(`input[name='${name}']`);
+            if (el) {
+                el.setAttribute('name', name + '_' + guid());
+                if (!el.getAttribute('autocomplete')) {
+                    el.setAttribute('autocomplete', 'none');
+                }
+            }
+            return this._registerControl(name, control);
+        };
+    }
+    _registerDirtySubmitButton() {
+        if (!this.ngForm) {
+            return;
+        }
+        this.ngForm.form.valueChanges
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._updateDirtySubmitButtons();
+        });
+        this._submitButtons.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._updateDirtySubmitButtons();
+        });
+    }
+    _updateDirtySubmitButtons() {
+        this._submitButtons
+            .forEach((submitButton) => {
+            if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !submitButton.dirtySubmit) {
+                submitButton.enable();
+            }
+            else {
+                submitButton.disable();
+            }
+        });
+    }
+    _broadcastSubmittingEvents() {
+        this._status$.next(FormStatus.Submitting);
+        this._form.broadcast('submit', this.ngForm);
+    }
+    _markControlsAsTouchedAndUpdateValidity() {
+        Object.values(this.ngForm.controls)
+            .forEach(control => {
+            control.markAsDirty();
+            control.markAsTouched();
+            control.updateValueAndValidity();
+        });
+    }
+    _setupActiveSubmitButton() {
+        this._activeSubmitButton = this._getActiveButton();
+        this._resetButtons();
+        if (this._activeSubmitButton) {
+            this._activeSubmitButton.process();
+        }
+    }
+    _waitUntilStatusPending() {
+        return this.ngForm.statusChanges
+            .pipe(startWith(this.ngForm.status), first((state) => state !== 'PENDING'));
+    }
+    _handleError(e) {
+        console.log('%c Form Submit ', 'color: white; background-color: #D33F49', 'Error occured');
+        console.group('Error Details:');
+        console.log('Message: ', e);
+        console.log('FormRef: ', this);
+        if (this.ngForm.invalid) {
+            const errors = getFormErrors(this.ngForm.control, null);
+            console.log('Validation Errors: ', errors);
+        }
+        console.groupEnd();
+        this._completeSubmit(false, null);
+    }
+};
+FsFormDirective.ctorParameters = () => [
+    { 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);
 
-const ERROR_MESSAGES = {
-    required: 'This field is required',
-    email: 'This is not a valid email address',
-    emails: 'Input valid email addresses, comma separated',
-    phone: 'Invalid phone number',
-    numeric: 'Value should be numeric',
-    integer: 'Value should be an integer',
-    min: 'Value should not be less than $(1)',
-    max: 'Value should not be greater than $(1)',
-    minlength: 'Should not be shorter than $(1) characters',
-    maxlength: 'Should not be longer than $(1) characters',
-    compare: 'Inputs do not match',
-    pattern: 'Value should match pattern $(1)',
-    dateRange: 'Invalid date range',
-    url: 'This is not a valid url',
-    urlProtocol: 'Invalid URL. Proper http protocol is required. eg. https://google.com',
-    greater: 'Value must be greater than $(1)',
-    lesser: 'Value must be less than $(1)',
+const ERROR_MESSAGES = {
+    required: 'This field is required',
+    email: 'This is not a valid email address',
+    emails: 'Input valid email addresses, comma separated',
+    phone: 'Invalid phone number',
+    numeric: 'Value should be numeric',
+    integer: 'Value should be an integer',
+    min: 'Value should not be less than $(1)',
+    max: 'Value should not be greater than $(1)',
+    minlength: 'Should not be shorter than $(1) characters',
+    maxlength: 'Should not be longer than $(1) characters',
+    compare: 'Inputs do not match',
+    pattern: 'Value should match pattern $(1)',
+    dateRange: 'Invalid date range',
+    url: 'This is not a valid url',
+    urlProtocol: 'Invalid URL. Proper http protocol is required. eg. https://google.com',
+    greater: 'Value must be greater than $(1)',
+    lesser: 'Value must be less than $(1)',
 };
 
-const VALIDATE_MESSAGES = new InjectionToken('fs.form.validate-messages');
-const VALIDATE_MESSAGE_PROVIDER = {
-    provide: VALIDATE_MESSAGES,
-    useFactory: messageProviderFactory,
-};
-function messageProviderFactory() {
-    return Object.assign({}, ERROR_MESSAGES);
+const VALIDATE_MESSAGES = new InjectionToken('fs.form.validate-messages');
+const VALIDATE_MESSAGE_PROVIDER = {
+    provide: VALIDATE_MESSAGES,
+    useFactory: messageProviderFactory,
+};
+function messageProviderFactory() {
+    return Object.assign({}, ERROR_MESSAGES);
 }
 
-let FsControlDirective = class FsControlDirective {
-    constructor(elementRef, renderer2, injector, _validateMessages, ngControl, formDirective) {
-        this.elementRef = elementRef;
-        this.renderer2 = renderer2;
-        this.injector = injector;
-        this._validateMessages = _validateMessages;
-        this.ngControl = ngControl;
-        this.formDirective = formDirective;
-        this.appendMessageClass = 'fs-form-message';
-        this.appendLabelClass = 'fs-form-label';
-        this.appendErrorClass = 'fs-form-error';
-        this.appendHintClass = 'fs-form-hint';
-        this.errors = [];
-        // 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);
-        }
-    }
-    set validateMessages(messages) {
-        this._validateMessages = Object.assign(Object.assign({}, this._validateMessages), messages);
-    }
-    ngOnInit() {
-        this._setupValidators();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    ngAfterContentInit() {
-        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;
-            }
-        }
-    }
-    getMessageSelector() {
-        if (this.messageSelector === false) {
-            return '';
-        }
-        if (this.messageSelector) {
-            return this.messageSelector;
-        }
-        else if (this.formDirective && this.formDirective.messageSelector) {
-            return this.formDirective.messageSelector;
-        }
-    }
-    getHintWrapperSelector() {
-        if (this.hintSelector === false) {
-            return '';
-        }
-        if (this.hintSelector) {
-            return this.hintSelector;
-        }
-        else if (this.formDirective && this.formDirective.hintSelector) {
-            return this.formDirective.hintSelector;
-        }
-    }
-    getWrapperSelector() {
-        if (this.wrapperSelector === false) {
-            return '';
-        }
-        if (this.wrapperSelector) {
-            return this.wrapperSelector;
-        }
-        else if (this.formDirective && this.formDirective.wrapperSelector) {
-            return this.formDirective.wrapperSelector;
-        }
-    }
-    getlabelSelector() {
-        if (this.labelSelector === false) {
-            return '';
-        }
-        if (this.labelSelector) {
-            return this.labelSelector;
-        }
-        else if (this.formDirective && this.formDirective.labelSelector) {
-            return this.formDirective.labelSelector;
-        }
-    }
-    getWrapperElement() {
-        const wrapper = this.getWrapper(this.elementRef.nativeElement);
-        if (wrapper) {
-            return wrapper;
-        }
-        return this.elementRef.nativeElement;
-    }
-    /*
-      <mat-form-field class="mat-form-field">  <-- Field Wrapper Class. Look for parents from the native element with the matching wrapperSelector. If not found defaults to native element.
-        <input>
-        <div class="fs-form-message"> <-- Message Selector. Look for the element with class .fs-form-message or messageSelector
-          <div class="fs-form-message"></div>
-          <div class="fs-form-hint"></div> <-- Hint Selector. Look for the element with class .fs-form-hint or hintSelector
-        </div>
-      </mat-form-field>
-    */
-    render() {
-        var _a;
-        if (this.ngControl) {
-            const renderer = this.renderer2;
-            const wrapper = this.getWrapperElement();
-            const error = this.ngControl.dirty ? this.getError(this.ngControl) : null;
-            if (!this.getMessageSelector()) {
-                return;
-            }
-            const messageWrapper = wrapper.querySelector(this.getMessageSelector());
-            if (!messageWrapper) {
-                return console.warn('Failed to locate ' + this.getMessageSelector(), this.elementRef.nativeElement);
-            }
-            if (this.getlabelSelector()) {
-                const labelWrapper = wrapper.querySelector(this.getlabelSelector());
-                if (labelWrapper) {
-                    if (this.appendLabelClass) {
-                        this.renderer2.addClass(labelWrapper, this.appendLabelClass);
-                    }
-                }
-            }
-            if (this.appendMessageClass) {
-                renderer.addClass(messageWrapper, this.appendMessageClass);
-            }
-            if (this.getHintWrapperSelector()) {
-                const hint = messageWrapper.querySelector(this.getHintWrapperSelector());
-                if (hint) {
-                    renderer.setStyle(hint, 'display', error ? 'none' : 'block');
-                    if (this.appendHintClass) {
-                        renderer.addClass(hint, this.appendHintClass);
-                    }
-                }
-            }
-            let errorWrapper = wrapper.querySelector('.fs-form-error-target');
-            if (errorWrapper) {
-                errorWrapper.remove();
-            }
-            wrapper.classList.remove('ng-invalid');
-            const 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);
-            const errorText = renderer.createText(error.message);
-            renderer.appendChild(errorWrapper, errorText);
-            messageWrapper.appendChild(errorWrapper);
-        }
-    }
-    getWrapper(node, count = 0) {
-        if (!node || count > 10) {
-            return null;
-        }
-        if (node.parentNode && node.parentNode.querySelector(this.getWrapperSelector())) {
-            return node;
-        }
-        return this.getWrapper(node.parentNode, ++count);
-    }
-    parseErrorMessage(message, args) {
-        values(args)
-            .forEach((name) => {
-            message = message.replace(/\$\(\d\)/, name);
-        });
-        return message;
-    }
-    getError(controlRef) {
-        const name = keys(controlRef.control.errors)[0];
-        if (!name) {
-            return null;
-        }
-        let message = controlRef.control.errors[name];
-        if (this._validateMessages[name]) {
-            message = this.parseErrorMessage(this._validateMessages[name], message);
-        }
-        return { name: name, message: message };
-    }
-    _setupValidators() {
-        const control = this._control;
-        if (this.validate) {
-            const validators = control.validator
-                ? [control.validator, this.validate.bind(this)]
-                : this.validate.bind(this);
-            control.setValidators(validators);
-        }
-        if (this.validateAsync) {
-            const asyncValidators = control.asyncValidator
-                ? [control.asyncValidator, this.validateAsync.bind(this)]
-                : this.validateAsync.bind(this);
-            control.setAsyncValidators(asyncValidators);
-        }
-        control.updateValueAndValidity();
-    }
-};
-FsControlDirective.ctorParameters = () => [
-    { 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])
+let FsControlDirective = class FsControlDirective {
+    constructor(elementRef, renderer2, injector, _validateMessages, ngControl, formDirective) {
+        this.elementRef = elementRef;
+        this.renderer2 = renderer2;
+        this.injector = injector;
+        this._validateMessages = _validateMessages;
+        this.ngControl = ngControl;
+        this.formDirective = formDirective;
+        this.appendMessageClass = 'fs-form-message';
+        this.appendLabelClass = 'fs-form-label';
+        this.appendErrorClass = 'fs-form-error';
+        this.appendHintClass = 'fs-form-hint';
+        this.errors = [];
+        // 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);
+        }
+    }
+    set validateMessages(messages) {
+        this._validateMessages = Object.assign(Object.assign({}, this._validateMessages), messages);
+    }
+    ngOnInit() {
+        this._setupValidators();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    ngAfterContentInit() {
+        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;
+            }
+        }
+    }
+    getMessageSelector() {
+        if (this.messageSelector === false) {
+            return '';
+        }
+        if (this.messageSelector) {
+            return this.messageSelector;
+        }
+        else if (this.formDirective && this.formDirective.messageSelector) {
+            return this.formDirective.messageSelector;
+        }
+    }
+    getHintWrapperSelector() {
+        if (this.hintSelector === false) {
+            return '';
+        }
+        if (this.hintSelector) {
+            return this.hintSelector;
+        }
+        else if (this.formDirective && this.formDirective.hintSelector) {
+            return this.formDirective.hintSelector;
+        }
+    }
+    getWrapperSelector() {
+        if (this.wrapperSelector === false) {
+            return '';
+        }
+        if (this.wrapperSelector) {
+            return this.wrapperSelector;
+        }
+        else if (this.formDirective && this.formDirective.wrapperSelector) {
+            return this.formDirective.wrapperSelector;
+        }
+    }
+    getlabelSelector() {
+        if (this.labelSelector === false) {
+            return '';
+        }
+        if (this.labelSelector) {
+            return this.labelSelector;
+        }
+        else if (this.formDirective && this.formDirective.labelSelector) {
+            return this.formDirective.labelSelector;
+        }
+    }
+    getWrapperElement() {
+        const wrapper = this.getWrapper(this.elementRef.nativeElement);
+        if (wrapper) {
+            return wrapper;
+        }
+        return this.elementRef.nativeElement;
+    }
+    /*
+      <mat-form-field class="mat-form-field">  <-- Field Wrapper Class. Look for parents from the native element with the matching wrapperSelector. If not found defaults to native element.
+        <input>
+        <div class="fs-form-message"> <-- Message Selector. Look for the element with class .fs-form-message or messageSelector
+          <div class="fs-form-message"></div>
+          <div class="fs-form-hint"></div> <-- Hint Selector. Look for the element with class .fs-form-hint or hintSelector
+        </div>
+      </mat-form-field>
+    */
+    render() {
+        var _a;
+        if (this.ngControl) {
+            const renderer = this.renderer2;
+            const wrapper = this.getWrapperElement();
+            const error = this.ngControl.dirty ? this.getError(this.ngControl) : null;
+            if (!this.getMessageSelector()) {
+                return;
+            }
+            const messageWrapper = wrapper.querySelector(this.getMessageSelector());
+            if (!messageWrapper) {
+                return console.warn('Failed to locate ' + this.getMessageSelector(), this.elementRef.nativeElement);
+            }
+            if (this.getlabelSelector()) {
+                const labelWrapper = wrapper.querySelector(this.getlabelSelector());
+                if (labelWrapper) {
+                    if (this.appendLabelClass) {
+                        this.renderer2.addClass(labelWrapper, this.appendLabelClass);
+                    }
+                }
+            }
+            if (this.appendMessageClass) {
+                renderer.addClass(messageWrapper, this.appendMessageClass);
+            }
+            if (this.getHintWrapperSelector()) {
+                const hint = messageWrapper.querySelector(this.getHintWrapperSelector());
+                if (hint) {
+                    renderer.setStyle(hint, 'display', error ? 'none' : 'block');
+                    if (this.appendHintClass) {
+                        renderer.addClass(hint, this.appendHintClass);
+                    }
+                }
+            }
+            let errorWrapper = wrapper.querySelector('.fs-form-error-target');
+            if (errorWrapper) {
+                errorWrapper.remove();
+            }
+            wrapper.classList.remove('ng-invalid');
+            const 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);
+            const errorText = renderer.createText(error.message);
+            renderer.appendChild(errorWrapper, errorText);
+            messageWrapper.appendChild(errorWrapper);
+        }
+    }
+    getWrapper(node, count = 0) {
+        if (!node || count > 10) {
+            return null;
+        }
+        if (node.parentNode && node.parentNode.querySelector(this.getWrapperSelector())) {
+            return node;
+        }
+        return this.getWrapper(node.parentNode, ++count);
+    }
+    parseErrorMessage(message, args) {
+        values(args)
+            .forEach((name) => {
+            message = message.replace(/\$\(\d\)/, name);
+        });
+        return message;
+    }
+    getError(controlRef) {
+        const name = keys(controlRef.control.errors)[0];
+        if (!name) {
+            return null;
+        }
+        let message = controlRef.control.errors[name];
+        if (this._validateMessages[name]) {
+            message = this.parseErrorMessage(this._validateMessages[name], message);
+        }
+        return { name: name, message: message };
+    }
+    _setupValidators() {
+        const control = this._control;
+        if (this.validate) {
+            const validators = control.validator
+                ? [control.validator, this.validate.bind(this)]
+                : this.validate.bind(this);
+            control.setValidators(validators);
+        }
+        if (this.validateAsync) {
+            const asyncValidators = control.asyncValidator
+                ? [control.asyncValidator, this.validateAsync.bind(this)]
+                : this.validateAsync.bind(this);
+            control.setAsyncValidators(asyncValidators);
+        }
+        control.updateValueAndValidity();
+    }
+};
+FsControlDirective.ctorParameters = () => [
+    { 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);
 
-function isEnabled(value) {
-    return value !== 'false' && (value || value === '');
+function isEnabled(value) {
+    return value !== 'false' && (value || value === '');
 }
 
-let FsFormRequiredDirective = class FsFormRequiredDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.required = false;
-    }
-    set setFsFormRequired(value) {
-        this.required = isEnabled(value);
-    }
-    set setRequired(value) {
-        this.required = isEnabled(value);
-    }
-    set validationMessage(value) {
-        this._validateMessages.required = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (this.required) {
-            return Validators.required(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-    render() {
-        const wrapper = this.getWrapperElement();
-        if (wrapper && this.getlabelSelector()) {
-            const labelWrapper = wrapper.querySelector(this.getlabelSelector());
-            // Adding class fs-form-label-requried adds the * to the label
-            if (labelWrapper) {
-                if (this.required) {
-                    this.renderer2.addClass(labelWrapper, 'fs-form-label-required');
-                }
-                else {
-                    this.renderer2.removeClass(labelWrapper, 'fs-form-label-required');
-                }
-            }
-        }
-        super.render();
-    }
-};
-__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
-        ],
-    })
+let FsFormRequiredDirective = class FsFormRequiredDirective extends FsControlDirective {
+    constructor() {
+        super(...arguments);
+        this.required = false;
+    }
+    set setFsFormRequired(value) {
+        this.required = isEnabled(value);
+    }
+    set setRequired(value) {
+        this.required = isEnabled(value);
+    }
+    set validationMessage(value) {
+        this._validateMessages.required = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (this.required) {
+            return Validators.required(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+    render() {
+        const wrapper = this.getWrapperElement();
+        if (wrapper && this.getlabelSelector()) {
+            const labelWrapper = wrapper.querySelector(this.getlabelSelector());
+            // Adding class fs-form-label-requried adds the * to the label
+            if (labelWrapper) {
+                if (this.required) {
+                    this.renderer2.addClass(labelWrapper, 'fs-form-label-required');
+                }
+                else {
+                    this.renderer2.removeClass(labelWrapper, 'fs-form-label-required');
+                }
+            }
+        }
+        super.render();
+    }
+};
+__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);
 
-class FsValidators {
-    static email(control) {
-        if (!control.value || email(control.value)) {
-            return null;
-        }
-        return { email: true };
-    }
-    static emails(control) {
-        const model = control.value || '';
-        const hasInvalidEmails = model
-            .split(',')
-            .some((part) => !email(part));
-        return hasInvalidEmails ? { email: true } : null;
-    }
-    static numeric(control) {
-        if (isEmpty(control.value) || isNumeric(control.value)) {
-            return null;
-        }
-        else {
-            return { numeric: true };
-        }
-    }
-    static integer(control) {
-        if (!control.value || String(control.value) === '' || (control.value % 1 === 0)) {
-            return null;
-        }
-        else {
-            return { integer: true };
-        }
-    }
-    static phone(control) {
-        if (!control.value || phone(control.value)) {
-            return null;
-        }
-        return { phone: true };
-    }
-    static url(control, protocolRequired = false) {
-        if (!control.value) {
-            return null;
-        }
-        if (!url(control.value)) {
-            return { url: true };
-        }
-        if (protocolRequired) {
-            const pattern = new RegExp(/^http(s)?:\/\//gm);
-            if (!String(control.value).match(pattern)) {
-                return { urlProtocol: true };
-            }
-        }
-        return null;
-    }
-    static dateRange(control) {
-        if (!control.value) {
-            return null;
-        }
-        if (isObject(control.value)) {
-            const start = control.value.start;
-            const end = control.value.end;
-            if ((!start && !end) || (isValid(start) && isValid(end))) {
-                return null;
-            }
-        }
-        return { dateRange: true };
-    }
-    static func(control, formFunction, data) {
-        let result;
-        let stream$;
-        try {
-            result = formFunction(control, data);
-        }
-        catch (err) {
-            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(() => null), catchError((err) => {
-            return of({ validationError: err });
-        }), take(1));
-    }
+class FsValidators {
+    static email(control) {
+        if (!control.value || email(control.value)) {
+            return null;
+        }
+        return { email: true };
+    }
+    static emails(control) {
+        const model = control.value || '';
+        const hasInvalidEmails = model
+            .split(',')
+            .some((part) => !email(part));
+        return hasInvalidEmails ? { email: true } : null;
+    }
+    static numeric(control) {
+        if (isEmpty(control.value) || isNumeric(control.value)) {
+            return null;
+        }
+        else {
+            return { numeric: true };
+        }
+    }
+    static integer(control) {
+        if (!control.value || String(control.value) === '' || (control.value % 1 === 0)) {
+            return null;
+        }
+        else {
+            return { integer: true };
+        }
+    }
+    static phone(control) {
+        if (!control.value || phone(control.value)) {
+            return null;
+        }
+        return { phone: true };
+    }
+    static url(control, protocolRequired = false) {
+        if (!control.value) {
+            return null;
+        }
+        if (!url(control.value)) {
+            return { url: true };
+        }
+        if (protocolRequired) {
+            const pattern = new RegExp(/^http(s)?:\/\//gm);
+            if (!String(control.value).match(pattern)) {
+                return { urlProtocol: true };
+            }
+        }
+        return null;
+    }
+    static dateRange(control) {
+        if (!control.value) {
+            return null;
+        }
+        if (isObject(control.value)) {
+            const start = control.value.start;
+            const end = control.value.end;
+            if ((!start && !end) || (isValid(start) && isValid(end))) {
+                return null;
+            }
+        }
+        return { dateRange: true };
+    }
+    static func(control, formFunction, data) {
+        let result;
+        let stream$;
+        try {
+            result = formFunction(control, data);
+        }
+        catch (err) {
+            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(() => null), catchError((err) => {
+            return of({ validationError: err });
+        }), take(1));
+    }
 }
 
-let FsFormMinDirective = class FsFormMinDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.min = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        return FsValidators.numeric(this._control) || Validators.min(parseFloat(this.fsFormMin))(this._control);
-    }
-};
-__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
-        ],
-    })
+let FsFormMinDirective = class FsFormMinDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.min = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        return FsValidators.numeric(this._control) || Validators.min(parseFloat(this.fsFormMin))(this._control);
+    }
+};
+__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);
 
-let FsFormMaxDirective = class FsFormMaxDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.max = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        return FsValidators.numeric(this._control) || Validators.max(this.fsFormMax)(this._control);
-    }
-};
-__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
-        ],
-    })
+let FsFormMaxDirective = class FsFormMaxDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.max = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        return FsValidators.numeric(this._control) || Validators.max(this.fsFormMax)(this._control);
+    }
+};
+__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);
 
-let FsFormMinLengthDirective = class FsFormMinLengthDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.minlength = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(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
-        ],
-    })
+let FsFormMinLengthDirective = class FsFormMinLengthDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.minlength = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(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);
 
-let FsFormMaxLengthDirective = class FsFormMaxLengthDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.maxlength = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(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
-        ],
-    })
+let FsFormMaxLengthDirective = class FsFormMaxLengthDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.maxlength = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(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);
 
-let FsFormEmailDirective = class FsFormEmailDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.email = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormEmail)) {
-            return FsValidators.email(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-};
-__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
-        ],
-    })
+let FsFormEmailDirective = class FsFormEmailDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.email = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormEmail)) {
+            return FsValidators.email(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+};
+__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);
 
-let FsFormEmailsDirective = class FsFormEmailsDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.emails = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormEmails)) {
-            return FsValidators.emails(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-};
-__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
-        ],
-    })
+let FsFormEmailsDirective = class FsFormEmailsDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.emails = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormEmails)) {
+            return FsValidators.emails(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+};
+__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);
 
-let FsFormPhoneDirective = class FsFormPhoneDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.phone = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormPhone)) {
-            return FsValidators.phone(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-};
-__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
-        ],
-    })
+let FsFormPhoneDirective = class FsFormPhoneDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.phone = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormPhone)) {
+            return FsValidators.phone(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+};
+__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);
 
-let FsFormCompareDirective = class FsFormCompareDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.compare = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (this.fsFormCompare.value === this.elementRef.nativeElement.value) {
-            return null;
-        }
-        else {
-            return { compare: true };
-        }
-    }
-    ngAfterViewInit() {
-        this.fsFormCompare.addEventListener('keyup', () => {
-            this._control.updateValueAndValidity();
-        }, false);
-    }
-    ngOnDestroy() {
-        this.fsFormCompare.removeEventListener('keyup', () => {
-            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,
-        ],
-    })
+let FsFormCompareDirective = class FsFormCompareDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.compare = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (this.fsFormCompare.value === this.elementRef.nativeElement.value) {
+            return null;
+        }
+        else {
+            return { compare: true };
+        }
+    }
+    ngAfterViewInit() {
+        this.fsFormCompare.addEventListener('keyup', () => {
+            this._control.updateValueAndValidity();
+        }, false);
+    }
+    ngOnDestroy() {
+        this.fsFormCompare.removeEventListener('keyup', () => {
+            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);
 
-let FsFormIntegerDirective = class FsFormIntegerDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.integer = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormInteger)) {
-            return FsValidators.integer(this._control);
-        }
-        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
-        ],
-    })
+let FsFormIntegerDirective = class FsFormIntegerDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.integer = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormInteger)) {
+            return FsValidators.integer(this._control);
+        }
+        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);
 
-let FsFormNumericDirective = class FsFormNumericDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.numeric = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormNumeric)) {
-            return FsValidators.numeric(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-};
-__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
-        ],
-    })
+let FsFormNumericDirective = class FsFormNumericDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.numeric = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormNumeric)) {
+            return FsValidators.numeric(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+};
+__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);
 
-let FsFormPatternDirective = class FsFormPatternDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.pattern = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(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
-        ],
-    })
+let FsFormPatternDirective = class FsFormPatternDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.pattern = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(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);
 
-let FsFormFunctionDirective = class FsFormFunctionDirective extends FsControlDirective {
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validateAsync(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
-        ],
-    })
+let FsFormFunctionDirective = class FsFormFunctionDirective extends FsControlDirective {
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validateAsync(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);
 
-let FsFormGreaterDirective = class FsFormGreaterDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.greater = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        const greater = parseFloat(this.fsFormGreater);
-        const value = parseFloat(this._control.value);
-        if (!isNaN(greater) && !isNaN(value) && value <= greater) {
-            return { greater: { greater, actual: value } };
-        }
-        return FsValidators.numeric(this._control);
-    }
-};
-__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
-        ],
-    })
+let FsFormGreaterDirective = class FsFormGreaterDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.greater = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        const greater = parseFloat(this.fsFormGreater);
+        const value = parseFloat(this._control.value);
+        if (!isNaN(greater) && !isNaN(value) && value <= greater) {
+            return { greater: { greater, actual: value } };
+        }
+        return FsValidators.numeric(this._control);
+    }
+};
+__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);
 
-let FsFormDateRangeDirective = class FsFormDateRangeDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.dateRange = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        if (isEnabled(this.fsFormDateRange)) {
-            return FsValidators.dateRange(this._control);
-        }
-        else {
-            return null;
-        }
-    }
-};
-__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
-        ],
-    })
+let FsFormDateRangeDirective = class FsFormDateRangeDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.dateRange = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        if (isEnabled(this.fsFormDateRange)) {
+            return FsValidators.dateRange(this._control);
+        }
+        else {
+            return null;
+        }
+    }
+};
+__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);
 
-let FsFormLesserDirective = class FsFormLesserDirective extends FsControlDirective {
-    set validationMessage(value) {
-        this._validateMessages.lesser = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(control) {
-        const lesser = parseFloat(this.fsFormLesser);
-        const value = parseFloat(this._control.value);
-        if (!isNaN(lesser) && !isNaN(value) && value >= lesser) {
-            return { lesser: { lesser, actual: value } };
-        }
-        return FsValidators.numeric(this._control);
-    }
-};
-__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
-        ],
-    })
+let FsFormLesserDirective = class FsFormLesserDirective extends FsControlDirective {
+    set validationMessage(value) {
+        this._validateMessages.lesser = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(control) {
+        const lesser = parseFloat(this.fsFormLesser);
+        const value = parseFloat(this._control.value);
+        if (!isNaN(lesser) && !isNaN(value) && value >= lesser) {
+            return { lesser: { lesser, actual: value } };
+        }
+        return FsValidators.numeric(this._control);
+    }
+};
+__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);
 
-let FsFormUrlDirective = class FsFormUrlDirective extends FsControlDirective {
-    constructor() {
-        super(...arguments);
-        this.fsFormUrlProtocol = false;
-    }
-    set validationMessage(value) {
-        this._validateMessages.url = value;
-    }
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validate(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
-        ],
-    })
+let FsFormUrlDirective = class FsFormUrlDirective extends FsControlDirective {
+    constructor() {
+        super(...arguments);
+        this.fsFormUrlProtocol = false;
+    }
+    set validationMessage(value) {
+        this._validateMessages.url = value;
+    }
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validate(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);
 
-let FsSubmitButtonDirective = class FsSubmitButtonDirective {
-    constructor(_matButton, _form, _elementRef, _cdRef) {
-        this._matButton = _matButton;
-        this._form = _form;
-        this._elementRef = _elementRef;
-        this._cdRef = _cdRef;
-        this.dirtySubmit = true;
-        this.transitionStyle = null;
-        this.active = false;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        if (this._form) {
-            this._form.addSubmitButton(this);
-            fromEvent(this.element, 'click')
-                .pipe(takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.active = true;
-            });
-            if (this.dirtySubmit) {
-                if (this._form.dirtySubmitButton) {
-                    if (!this._form.ngForm.dirty) {
-                        this.disable();
-                    }
-                }
-            }
-            this.transitionStyle = 'none';
-            setTimeout(() => {
-                this.transitionStyle = null;
-            }, 500);
-        }
-    }
-    disable() {
-        if (this._matButton) {
-            this._matButton.disabled = true;
-            this._cdRef.markForCheck();
-        }
-    }
-    enable() {
-        if (this._matButton) {
-            this._matButton.disabled = false;
-            this._matButton.disableRipple = true;
-            this._cdRef.markForCheck();
-        }
-    }
-    process() {
-        this.setClass('process');
-        this._matButton.disableRipple = true;
-    }
-    success() {
-        this.setClass('success');
-        this._matButton.disableRipple = false;
-    }
-    error() {
-        this.setClass('error');
-        this._matButton.disableRipple = false;
-    }
-    setClass(cls) {
-        const svg = this._getSvg(cls);
-        this._resetClass();
-        this._disableShadowAnimation();
-        this.element.classList.add(`submit-${cls}`);
-        this.element.append(svg);
-    }
-    get element() {
-        return this._elementRef.nativeElement;
-    }
-    reset() {
-        this.active = false;
-        this.enable();
-        this.element.querySelectorAll('.svg-icon')
-            .forEach((el) => {
-            el.remove();
-        });
-        this._matButton.disableRipple = false;
-        this._resetClass();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-        this._form.removeSubmitButton(this);
-    }
-    _disableShadowAnimation() {
-        // .mat-elevation-z2 removes the click shadow animation
-        //this.element.classList.add('mat-elevation-z2');
-    }
-    _resetClass() {
-        this.element.classList.remove('submit-success', 'submit-error', 'submit-process', 'mat-elevation-z2');
-    }
-    _getSvg(type) {
-        if (type === 'success') {
+let FsSubmitButtonDirective = class FsSubmitButtonDirective {
+    constructor(_matButton, _form, _elementRef, _cdRef) {
+        this._matButton = _matButton;
+        this._form = _form;
+        this._elementRef = _elementRef;
+        this._cdRef = _cdRef;
+        this.dirtySubmit = true;
+        this.transitionStyle = null;
+        this.active = false;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        if (this._form) {
+            this._form.addSubmitButton(this);
+            fromEvent(this.element, 'click')
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.active = true;
+            });
+            if (this.dirtySubmit) {
+                if (this._form.dirtySubmitButton) {
+                    if (!this._form.ngForm.dirty) {
+                        this.disable();
+                    }
+                }
+            }
+            this.transitionStyle = 'none';
+            setTimeout(() => {
+                this.transitionStyle = null;
+            }, 500);
+        }
+    }
+    disable() {
+        if (this._matButton) {
+            this._matButton.disabled = true;
+            this._cdRef.markForCheck();
+        }
+    }
+    enable() {
+        if (this._matButton) {
+            this._matButton.disabled = false;
+            this._matButton.disableRipple = true;
+            this._cdRef.markForCheck();
+        }
+    }
+    process() {
+        this.setClass('process');
+        this._matButton.disableRipple = true;
+    }
+    success() {
+        this.setClass('success');
+        this._matButton.disableRipple = false;
+    }
+    error() {
+        this.setClass('error');
+        this._matButton.disableRipple = false;
+    }
+    setClass(cls) {
+        const svg = this._getSvg(cls);
+        this._resetClass();
+        this._disableShadowAnimation();
+        this.element.classList.add(`submit-${cls}`);
+        this.element.append(svg);
+    }
+    get element() {
+        return this._elementRef.nativeElement;
+    }
+    reset() {
+        this.active = false;
+        this.enable();
+        this.element.querySelectorAll('.svg-icon')
+            .forEach((el) => {
+            el.remove();
+        });
+        this._matButton.disableRipple = false;
+        this._resetClass();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+        this._form.removeSubmitButton(this);
+    }
+    _disableShadowAnimation() {
+        // .mat-elevation-z2 removes the click shadow animation
+        //this.element.classList.add('mat-elevation-z2');
+    }
+    _resetClass() {
+        this.element.classList.remove('submit-success', 'submit-error', 'submit-process', 'mat-elevation-z2');
+    }
+    _getSvg(type) {
+        if (type === 'success') {
             return new DOMParser().parseFromString(`<svg class="svg-icon svg-icon-success" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 38 38" style="enable-background:new 0 0 38 38;" xml:space="preserve" width="38px" height="38px">
       <g>
         <g class="check">
@@ -1898,251 +1907,275 @@ let FsSubmitButtonDirective = class FsSubmitButtonDirective {
           </g>
         </g>
       </g>
-      </svg>`, 'text/xml').firstChild;
-        }
-        if (type === 'process') {
+      </svg>`, 'text/xml').firstChild;
+        }
+        if (type === 'process') {
             return new DOMParser().parseFromString(`<svg class="svg-icon svg-icon-process" width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
           <path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur=".7s" repeatCount="indefinite"/></path>
         </g>
       </g>
-      </svg>`, 'text/xml').firstChild;
-        }
-        if (type === 'error') {
-            return new DOMParser().parseFromString(`<svg class="svg-icon svg-icon-error" xmlns="http://www.w3.org/2000/svg" width="38px" height="38px" viewBox="0 0 16 16"><g><path d="M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z" data-original="#444444" data-old_color="#444444"/><path d="M12.2 10.8l-2.8-2.8 2.8-2.8-1.4-1.4-2.8 2.8-2.8-2.8-1.4 1.4 2.8 2.8-2.8 2.8 1.4 1.4 2.8-2.8 2.8 2.8z"/></g> </svg>`, 'text/xml').firstChild;
-        }
-    }
-};
-FsSubmitButtonDirective.ctorParameters = () => [
-    { 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])
+      </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 = () => [
+    { 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);
 
-let FsFormValidateDirective = class FsFormValidateDirective extends FsControlDirective {
-    ngOnChanges() {
-        this._control.updateValueAndValidity();
-    }
-    validateAsync(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
-        ],
-    })
+let FsFormValidateDirective = class FsFormValidateDirective extends FsControlDirective {
+    ngOnChanges() {
+        this._control.updateValueAndValidity();
+    }
+    validateAsync(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);
 
-let FsFormDialogActionsComponent = class FsFormDialogActionsComponent {
-    constructor(_form, _cdRef) {
-        this._form = _form;
-        this._cdRef = _cdRef;
-        this.save = true;
-        this.create = false;
-        this.close = false;
-        this.dirty = false;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this._form.ngForm.valueChanges
-            .pipe(filter(() => (!this.dirty)), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.dirty = this._form.ngForm.dirty;
-            this._cdRef.markForCheck();
-        });
-        this._form.submitted
-            .pipe(delay(50), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.dirty = false;
-            this._cdRef.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-};
-FsFormDialogActionsComponent.ctorParameters = () => [
-    { 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])
+let FsFormDialogActionsComponent = class FsFormDialogActionsComponent {
+    constructor(_form, _dialogRef, _cdRef) {
+        this._form = _form;
+        this._dialogRef = _dialogRef;
+        this._cdRef = _cdRef;
+        this.save = true;
+        this.create = false;
+        this.close = false;
+        this.dirty = false;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        if (this._form) {
+            this._form.ngForm.valueChanges
+                .pipe(filter(() => (!this.dirty)), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.dirty = this._form.ngForm.dirty;
+                this._cdRef.markForCheck();
+            });
+            this._form.submitted
+                .pipe(delay(50), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.dirty = false;
+                this._cdRef.markForCheck();
+            });
+            this._form.reseted
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.dirty = false;
+                this._cdRef.markForCheck();
+            });
+        }
+    }
+    closeClick() {
+        if (this._form) {
+            this._form.triggerConfirm()
+                .pipe(filter((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._dialogRef.close(null);
+            });
+        }
+        else {
+            this._dialogRef.close(null);
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+};
+FsFormDialogActionsComponent.ctorParameters = () => [
+    { 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);
 
-var FsFormModule_1;
-let FsFormModule = FsFormModule_1 = class FsFormModule {
-    static forRoot() {
-        return {
-            ngModule: 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,
-            },
-        ],
-    })
+var FsFormModule_1;
+let FsFormModule = FsFormModule_1 = class FsFormModule {
+    static forRoot() {
+        return {
+            ngModule: 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);
 
-let FormDeactivateGuard = class FormDeactivateGuard {
-    constructor(_prompt) {
-        this._prompt = _prompt;
-    }
-    canDeactivate(directive) {
-        if (!('getForm' in directive)) {
-            const error = `Directive ${directive.constructor.name} does not property implement interface FormDeactivate`;
-            console.error(error);
-            return of(true);
-        }
-        const form = directive.getForm();
-        if (!(form instanceof FsFormDirective)) {
-            const 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((result) => {
-            return confirmResultContinue(result);
-        }));
-    }
-};
-FormDeactivateGuard.ctorParameters = () => [
-    { 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])
+let FormDeactivateGuard = class FormDeactivateGuard {
+    constructor(_prompt) {
+        this._prompt = _prompt;
+    }
+    canDeactivate(directive) {
+        if (!('getForm' in directive)) {
+            const error = `Directive ${directive.constructor.name} does not property implement interface FormDeactivate`;
+            console.error(error);
+            return of(true);
+        }
+        const form = directive.getForm();
+        if (!(form instanceof FsFormDirective)) {
+            const 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((result) => {
+            return confirmResultContinue(result);
+        }));
+    }
+};
+FormDeactivateGuard.ctorParameters = () => [
+    { 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);
 
 // 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