@firestitch/form 12.3.2 → 12.3.4

package/fesm2015/firestitch-form.js

@@ -150,6 +150,7 @@ var FormStatus;
 (function (FormStatus) {
     FormStatus["Valid"] = "valid";
     FormStatus["Invalid"] = "invalid";
+    FormStatus["Validating"] = "validating";
     FormStatus["Submitting"] = "submitting";
     FormStatus["Submitted"] = "submitted";
     FormStatus["Error"] = "error";
@@ -215,7 +216,7 @@ class FsFormDirective {
         this.submitted = new EventEmitter();
         this.reseted = new EventEmitter();
         this.cleared = new EventEmitter();
-        this.fsformClass = true;
+        this.fsFormClass = true;
         this._tabGroups = new QueryList();
         this._buttons = new QueryList();
         this._dialogBackdropEscape = false;
@@ -226,6 +227,9 @@ class FsFormDirective {
     get submitting() {
         return this._status$.getValue() === FormStatus.Submitting;
     }
+    get validating() {
+        return this._status$.getValue() === FormStatus.Validating;
+    }
     get completing() {
         return this._status$.getValue() === FormStatus.Completing;
     }
@@ -280,6 +284,7 @@ class FsFormDirective {
         this._listenHotKeys();
         this._listenWindowClose();
         this._listenSubmit();
+        this._listenFormStatus();
         if (!this.autocomplete) {
             this._registerAutocomplete();
         }
@@ -362,7 +367,7 @@ class FsFormDirective {
         }), filter(() => {
             return [FormStatus.Valid, FormStatus.Invalid]
                 .includes(this._status$.getValue());
-        }), tap(() => this._markControlsAsTouchedAndUpdateValidity()), tap(() => this._broadcastSubmittingEvents()), switchMap(() => this._waitUntilStatusPending()), tap(() => this._setupActiveSubmitButton()), tap(() => this._disableButtons()), mergeMap(() => {
+        }), tap(() => this._broadcasValidatingEvents()), tap(() => this._markControlsAsTouchedAndUpdateValidity()), tap(() => this._broadcastSubmittingEvents()), switchMap(() => this._waitUntilStatusPending()), tap(() => this._setupActiveSubmitButton()), tap(() => this._disableButtons()), mergeMap(() => {
             return this.ngForm.status === 'INVALID'
                 ? this._formInvalidState$
                 : this._formValidState$;
@@ -374,6 +379,18 @@ class FsFormDirective {
         }), takeUntil(this._destroy$))
             .subscribe(() => { });
     }
+    _listenFormStatus() {
+        this._status$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((formStatus) => {
+            const cls = [FormStatus.Submitting, FormStatus.Validating];
+            const classList = this._element.nativeElement.classList;
+            classList.remove(...cls);
+            if (cls.indexOf(formStatus) !== -1) {
+                classList.add(formStatus);
+            }
+        });
+    }
     _listenWindowClose() {
         fromEvent(window, 'beforeunload')
             .pipe(takeUntil(this._destroy$))
@@ -685,6 +702,9 @@ class FsFormDirective {
         this._status$.next(FormStatus.Submitting);
         this._form.broadcast('submit', this.ngForm);
     }
+    _broadcasValidatingEvents() {
+        this._status$.next(FormStatus.Validating);
+    }
     _markControlsAsTouchedAndUpdateValidity() {
         Object.values(this.ngForm.controls)
             .forEach(control => {
@@ -723,7 +743,7 @@ class FsFormDirective {
     }
 }
 FsFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDirective, deps: [{ token: NgForm }, { token: FsForm }, { token: i0.ElementRef }, { token: i2.FsMessage }, { token: i3.FsPrompt }, { token: i0.NgZone }, { token: MatDialogRef, optional: true }, { token: DrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FsFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDirective, selector: "[fsForm]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", autocomplete: "autocomplete", shortcuts: "shortcuts", confirm: "confirm", confirmDialog: "confirmDialog", confirmDrawer: "confirmDrawer", confirmBrowser: "confirmBrowser", confirmTabs: "confirmTabs", dirtySubmitButton: "dirtySubmitButton", submit: "submit", successDelay: "successDelay", errorDelay: "errorDelay", tabGroup: "tabGroup" }, outputs: { submitEvent: "fsForm", invalid: "invalid", valid: "valid", submitted: "submitted", reseted: "reseted", cleared: "cleared" }, host: { properties: { "class.fs-form": "this.fsformClass" } }, queries: [{ propertyName: "formDialogClose", predicate: FsFormDialogCloseDirective, descendants: true }, { propertyName: "_tabGroups", predicate: MatTabGroup, descendants: true }], usesOnChanges: true, ngImport: i0 });
+FsFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDirective, selector: "[fsForm]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", autocomplete: "autocomplete", shortcuts: "shortcuts", confirm: "confirm", confirmDialog: "confirmDialog", confirmDrawer: "confirmDrawer", confirmBrowser: "confirmBrowser", confirmTabs: "confirmTabs", dirtySubmitButton: "dirtySubmitButton", submit: "submit", successDelay: "successDelay", errorDelay: "errorDelay", tabGroup: "tabGroup" }, outputs: { submitEvent: "fsForm", invalid: "invalid", valid: "valid", submitted: "submitted", reseted: "reseted", cleared: "cleared" }, host: { properties: { "class.fs-form": "this.fsFormClass" } }, queries: [{ propertyName: "formDialogClose", predicate: FsFormDialogCloseDirective, descendants: true }, { propertyName: "_tabGroups", predicate: MatTabGroup, descendants: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDirective, decorators: [{
             type: Directive,
             args: [{
@@ -787,7 +807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], cleared: [{
                 type: Output
-            }], fsformClass: [{
+            }], fsFormClass: [{
                 type: HostBinding,
                 args: ['class.fs-form']
             }], formDialogClose: [{
@@ -1606,15 +1626,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class FsFormFunctionDirective extends FsControlDirective {
+    constructor() {
+        super(...arguments);
+        this.validateOnSubmit = false;
+    }
     ngOnChanges() {
         this._control.updateValueAndValidity();
     }
     validateAsync(control) {
+        if (this.validateOnSubmit && !this.formDirective.validating) {
+            return of(null);
+        }
         return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
     }
 }
 FsFormFunctionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormFunctionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormFunctionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormFunctionDirective, selector: "[fsFormFunction]", inputs: { fsFormFunction: "fsFormFunction", fsFormFunctionData: "fsFormFunctionData" }, providers: [
+FsFormFunctionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormFunctionDirective, selector: "[fsFormFunction]", inputs: { fsFormFunction: "fsFormFunction", fsFormFunctionData: "fsFormFunctionData", validateOnSubmit: "validateOnSubmit" }, providers: [
         VALIDATE_MESSAGE_PROVIDER
     ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormFunctionDirective, decorators: [{
@@ -1629,6 +1656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], fsFormFunctionData: [{
                 type: Input
+            }], validateOnSubmit: [{
+                type: Input
             }] } });
 
 class FsFormGreaterDirective extends FsControlDirective {
@@ -1926,15 +1955,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class FsFormValidateDirective extends FsControlDirective {
+    constructor() {
+        super(...arguments);
+        this.validateOnSubmit = false;
+    }
     ngOnChanges() {
         this._control.updateValueAndValidity();
     }
     validateAsync(control) {
+        if (this.validateOnSubmit && !this.formDirective.validating) {
+            return of(null);
+        }
         return FsValidators.func(this._control, this.validateFn, this.validateFnData);
     }
 }
 FsFormValidateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormValidateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsFormValidateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormValidateDirective, selector: "[validate]", inputs: { validateFn: ["validate", "validateFn"], validateFnData: ["validateData", "validateFnData"] }, providers: [
+FsFormValidateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormValidateDirective, selector: "[validate]", inputs: { validateFn: ["validate", "validateFn"], validateFnData: ["validateData", "validateFnData"], validateOnSubmit: "validateOnSubmit" }, providers: [
         VALIDATE_MESSAGE_PROVIDER
     ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormValidateDirective, decorators: [{
@@ -1951,6 +1987,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], validateFnData: [{
                 type: Input,
                 args: ['validateData']
+            }], validateOnSubmit: [{
+                type: Input
             }] } });
 
 class FsFormDialogActionsComponent {