@firestitch/form 12.3.2 → 12.3.4

package/app/directives/form/form.directive.d.ts

@@ -44,7 +44,7 @@ export declare class FsFormDirective implements OnInit, OnDestroy, AfterContentI
     submitted: EventEmitter<SubmitEvent>;
     reseted: EventEmitter<SubmitEvent>;
     cleared: EventEmitter<SubmitEvent>;
-    fsformClass: boolean;
+    fsFormClass: boolean;
     formDialogClose: QueryList<FsFormDialogCloseDirective>;
     private _tabGroups;
     private _buttons;
@@ -56,6 +56,7 @@ export declare class FsFormDirective implements OnInit, OnDestroy, AfterContentI
     private _destroy$;
     constructor(ngForm: NgForm, _form: FsForm, _element: ElementRef, _message: FsMessage, _prompt: FsPrompt, _ngZone: NgZone, _dialogRef: MatDialogRef<any>, _drawerRef: DrawerRef<any>);
     get submitting(): boolean;
+    get validating(): boolean;
     get completing(): boolean;
     private get _submitEvent();
     private get _formValidState$();
@@ -79,6 +80,7 @@ export declare class FsFormDirective implements OnInit, OnDestroy, AfterContentI
     addButton(button: FsButtonDirective): void;
     removeButton(button: FsButtonDirective): void;
     private _listenSubmit;
+    private _listenFormStatus;
     private _listenWindowClose;
     private _listenHotKeys;
     private _formClose;
@@ -100,6 +102,7 @@ export declare class FsFormDirective implements OnInit, OnDestroy, AfterContentI
     private _registerDirtySubmitButton;
     private _updateDirtySubmitButtons;
     private _broadcastSubmittingEvents;
+    private _broadcasValidatingEvents;
     private _markControlsAsTouchedAndUpdateValidity;
     private _setupActiveSubmitButton;
     private _disableButtons;

package/app/directives/validators/control.directive.d.ts

@@ -13,7 +13,7 @@ export declare class FsControlDirective implements OnInit, AfterContentInit, OnD
     protected injector: Injector;
     protected _validateMessages: any;
     protected ngControl: NgControl;
-    private formDirective;
+    protected formDirective: FsFormDirective;
     wrapperSelector: string | false;
     messageSelector: string | false;
     hintSelector: string | false;

package/app/directives/validators/function.directive.d.ts

@@ -7,8 +7,9 @@ import * as i0 from "@angular/core";
 export declare class FsFormFunctionDirective extends FsControlDirective implements OnChanges, FsAsyncValidator {
     fsFormFunction: any;
     fsFormFunctionData: any;
+    validateOnSubmit: boolean;
     ngOnChanges(): void;
     validateAsync(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsFormFunctionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FsFormFunctionDirective, "[fsFormFunction]", never, { "fsFormFunction": "fsFormFunction"; "fsFormFunctionData": "fsFormFunctionData"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FsFormFunctionDirective, "[fsFormFunction]", never, { "fsFormFunction": "fsFormFunction"; "fsFormFunctionData": "fsFormFunctionData"; "validateOnSubmit": "validateOnSubmit"; }, {}, never>;
 }

package/app/directives/validators/validate.directive.d.ts

@@ -7,8 +7,9 @@ import * as i0 from "@angular/core";
 export declare class FsFormValidateDirective extends FsControlDirective implements OnChanges, FsAsyncValidator {
     validateFn: any;
     validateFnData: any;
+    validateOnSubmit: boolean;
     ngOnChanges(): void;
     validateAsync(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsFormValidateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FsFormValidateDirective, "[validate]", never, { "validateFn": "validate"; "validateFnData": "validateData"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FsFormValidateDirective, "[validate]", never, { "validateFn": "validate"; "validateFnData": "validateData"; "validateOnSubmit": "validateOnSubmit"; }, {}, never>;
 }

package/app/enums/form-status.d.ts

@@ -1,6 +1,7 @@
 export declare enum FormStatus {
     Valid = "valid",
     Invalid = "invalid",
+    Validating = "validating",
     Submitting = "submitting",
     Submitted = "submitted",
     Error = "error",

package/bundles/firestitch-form.umd.js

@@ -458,6 +458,7 @@
     (function (FormStatus) {
         FormStatus["Valid"] = "valid";
         FormStatus["Invalid"] = "invalid";
+        FormStatus["Validating"] = "validating";
         FormStatus["Submitting"] = "submitting";
         FormStatus["Submitted"] = "submitted";
         FormStatus["Error"] = "error";
@@ -547,7 +548,7 @@
             this.submitted = new i0.EventEmitter();
             this.reseted = new i0.EventEmitter();
             this.cleared = new i0.EventEmitter();
-            this.fsformClass = true;
+            this.fsFormClass = true;
             this._tabGroups = new i0.QueryList();
             this._buttons = new i0.QueryList();
             this._dialogBackdropEscape = false;
@@ -562,6 +563,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(FsFormDirective.prototype, "validating", {
+            get: function () {
+                return this._status$.getValue() === exports.FormStatus.Validating;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(FsFormDirective.prototype, "completing", {
             get: function () {
                 return this._status$.getValue() === exports.FormStatus.Completing;
@@ -636,6 +644,7 @@
             this._listenHotKeys();
             this._listenWindowClose();
             this._listenSubmit();
+            this._listenFormStatus();
             if (!this.autocomplete) {
                 this._registerAutocomplete();
             }
@@ -718,7 +727,7 @@
             }), operators.filter(function () {
                 return [exports.FormStatus.Valid, exports.FormStatus.Invalid]
                     .includes(_this._status$.getValue());
-            }), operators.tap(function () { return _this._markControlsAsTouchedAndUpdateValidity(); }), operators.tap(function () { return _this._broadcastSubmittingEvents(); }), operators.switchMap(function () { return _this._waitUntilStatusPending(); }), operators.tap(function () { return _this._setupActiveSubmitButton(); }), operators.tap(function () { return _this._disableButtons(); }), operators.mergeMap(function () {
+            }), operators.tap(function () { return _this._broadcasValidatingEvents(); }), operators.tap(function () { return _this._markControlsAsTouchedAndUpdateValidity(); }), operators.tap(function () { return _this._broadcastSubmittingEvents(); }), operators.switchMap(function () { return _this._waitUntilStatusPending(); }), operators.tap(function () { return _this._setupActiveSubmitButton(); }), operators.tap(function () { return _this._disableButtons(); }), operators.mergeMap(function () {
                 return _this.ngForm.status === 'INVALID'
                     ? _this._formInvalidState$
                     : _this._formValidState$;
@@ -730,6 +739,19 @@
             }), operators.takeUntil(this._destroy$))
                 .subscribe(function () { });
         };
+        FsFormDirective.prototype._listenFormStatus = function () {
+            var _this = this;
+            this._status$
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (formStatus) {
+                var cls = [exports.FormStatus.Submitting, exports.FormStatus.Validating];
+                var classList = _this._element.nativeElement.classList;
+                classList.remove.apply(classList, __spreadArray([], __read(cls)));
+                if (cls.indexOf(formStatus) !== -1) {
+                    classList.add(formStatus);
+                }
+            });
+        };
         FsFormDirective.prototype._listenWindowClose = function () {
             var _this = this;
             rxjs.fromEvent(window, 'beforeunload')
@@ -1057,6 +1079,9 @@
             this._status$.next(exports.FormStatus.Submitting);
             this._form.broadcast('submit', this.ngForm);
         };
+        FsFormDirective.prototype._broadcasValidatingEvents = function () {
+            this._status$.next(exports.FormStatus.Validating);
+        };
         FsFormDirective.prototype._markControlsAsTouchedAndUpdateValidity = function () {
             Object.values(this.ngForm.controls)
                 .forEach(function (control) {
@@ -1096,7 +1121,7 @@
         return FsFormDirective;
     }());
     FsFormDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFormDirective, deps: [{ token: i1.NgForm }, { token: FsForm }, { token: i0__namespace.ElementRef }, { token: i2__namespace.FsMessage }, { token: i3__namespace.FsPrompt }, { token: i0__namespace.NgZone }, { token: i2$1.MatDialogRef, optional: true }, { token: i6.DrawerRef, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FsFormDirective.ɵdir = i0__namespace.ɵɵ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: tabs.MatTabGroup, descendants: true }], usesOnChanges: true, ngImport: i0__namespace });
+    FsFormDirective.ɵdir = i0__namespace.ɵɵ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: tabs.MatTabGroup, descendants: true }], usesOnChanges: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFormDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
@@ -1162,7 +1187,7 @@
                     type: i0.Output
                 }], cleared: [{
                     type: i0.Output
-                }], fsformClass: [{
+                }], fsFormClass: [{
                     type: i0.HostBinding,
                     args: ['class.fs-form']
                 }], formDialogClose: [{
@@ -2111,18 +2136,23 @@
     var FsFormFunctionDirective = /** @class */ (function (_super) {
         __extends(FsFormFunctionDirective, _super);
         function FsFormFunctionDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.validateOnSubmit = false;
+            return _this;
         }
         FsFormFunctionDirective.prototype.ngOnChanges = function () {
             this._control.updateValueAndValidity();
         };
         FsFormFunctionDirective.prototype.validateAsync = function (control) {
+            if (this.validateOnSubmit && !this.formDirective.validating) {
+                return rxjs.of(null);
+            }
             return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
         };
         return FsFormFunctionDirective;
     }(FsControlDirective));
     FsFormFunctionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFormFunctionDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FsFormFunctionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormFunctionDirective, selector: "[fsFormFunction]", inputs: { fsFormFunction: "fsFormFunction", fsFormFunctionData: "fsFormFunctionData" }, providers: [
+    FsFormFunctionDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFormFunctionDirective, decorators: [{
@@ -2137,6 +2167,8 @@
                     type: i0.Input
                 }], fsFormFunctionData: [{
                     type: i0.Input
+                }], validateOnSubmit: [{
+                    type: i0.Input
                 }] } });
 
     var FsFormGreaterDirective = /** @class */ (function (_super) {
@@ -2464,18 +2496,23 @@
     var FsFormValidateDirective = /** @class */ (function (_super) {
         __extends(FsFormValidateDirective, _super);
         function FsFormValidateDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.validateOnSubmit = false;
+            return _this;
         }
         FsFormValidateDirective.prototype.ngOnChanges = function () {
             this._control.updateValueAndValidity();
         };
         FsFormValidateDirective.prototype.validateAsync = function (control) {
+            if (this.validateOnSubmit && !this.formDirective.validating) {
+                return rxjs.of(null);
+            }
             return FsValidators.func(this._control, this.validateFn, this.validateFnData);
         };
         return FsFormValidateDirective;
     }(FsControlDirective));
     FsFormValidateDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFormValidateDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FsFormValidateDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormValidateDirective, selector: "[validate]", inputs: { validateFn: ["validate", "validateFn"], validateFnData: ["validateData", "validateFnData"] }, providers: [
+    FsFormValidateDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFormValidateDirective, decorators: [{
@@ -2492,6 +2529,8 @@
                 }], validateFnData: [{
                     type: i0.Input,
                     args: ['validateData']
+                }], validateOnSubmit: [{
+                    type: i0.Input
                 }] } });
 
     var FsFormDialogActionsComponent = /** @class */ (function () {