@firestitch/form 18.0.13 → 18.0.15

package/fesm2022/firestitch-form.mjs

@@ -11,8 +11,8 @@ import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import * as i2 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import { Subject, of, filter, BehaviorSubject, throwError, fromEvent, iif, defer, from, isObservable } from 'rxjs';
-import { switchMap, map, catchError, takeUntil, tap, take, mergeMap, filter as filter$1, delay, first, startWith, mapTo } from 'rxjs/operators';
+import { Subject, of, BehaviorSubject, throwError, fromEvent, iif, defer, from, isObservable } from 'rxjs';
+import { switchMap, map, catchError, takeUntil, filter, delay, tap, take, mergeMap, first, startWith, mapTo } from 'rxjs/operators';
 import * as i2$1 from '@angular/router';
 import { guid, email, isEmpty, isNumeric, phone, url } from '@firestitch/common';
 import * as i7 from '@firestitch/drawer';
@@ -77,11 +77,13 @@ var ConfirmResult;
     ConfirmResult["Discard"] = "discard";
     ConfirmResult["Review"] = "review";
     ConfirmResult["Invalid"] = "invalid";
-    ConfirmResult["Pristine"] = "pristine";
+    ConfirmResult["NoChanges"] = "noChanges";
 })(ConfirmResult || (ConfirmResult = {}));
 
 function confirmResultContinue(result) {
-    return result === ConfirmResult.Discard || result === ConfirmResult.Save || result === ConfirmResult.Pristine;
+    return (result === ConfirmResult.Discard ||
+        result === ConfirmResult.Save ||
+        result === ConfirmResult.NoChanges);
 }
 
 function getActiveRoute(route) {
@@ -118,15 +120,24 @@ class FsForm {
     removeFormDirective(routeComponent) {
         this._formDirectiveStore.delete(routeComponent);
     }
+    hasChanges(form) {
+        return Object.keys(form.ngForm.control.controls)
+            .some((key) => {
+            const control = form.ngForm.control.controls[key];
+            return (control.dirty ||
+                (control.errors.required &&
+                    (control.value === '' || control.value === null || control.value === undefined)));
+        });
+    }
     confirmUnsaved(form) {
-        if (!form.confirm || !form.ngForm.dirty) {
-            return of(ConfirmResult.Pristine);
+        if (!form.confirm || !this.hasChanges(form)) {
+            return of(ConfirmResult.NoChanges);
         }
-        let title = 'You Have Unsaved Changes';
+        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';
+        let saveLabel = 'Save and continue';
+        let discardLabel = 'Discard changes and continue';
+        let cancelLabel = 'Review changes';
         if (typeof form.confirm === 'object') {
             title = form.confirm.title || title;
             message = form.confirm.message || message;
@@ -134,7 +145,8 @@ class FsForm {
             discardLabel = form.confirm.discardLabel || discardLabel;
             cancelLabel = form.confirm.cancelLabel || cancelLabel;
         }
-        return this._dialog.open(ConfirmUnsavedComponent, {
+        return this._dialog
+            .open(ConfirmUnsavedComponent, {
             data: {
                 title,
                 message,
@@ -156,7 +168,12 @@ class FsForm {
             if (result === 'save') {
                 form.ngForm.control.markAsPristine();
                 return form.submit$({ confirmed: true })
-                    .pipe(map(() => ConfirmResult.Save), catchError(() => {
+                    .pipe(map((submitEvent) => {
+                    if (submitEvent.error) {
+                        return ConfirmResult.Invalid;
+                    }
+                    return ConfirmResult.Save;
+                }), catchError(() => {
                     return of(ConfirmResult.Invalid);
                 }));
             }
@@ -237,6 +254,8 @@ class FsFormBaseDirective {
     _tabGroups = new QueryList();
     _buttons = new QueryList();
     _activeSubmitButton;
+    _currentTabIndex;
+    _tabConfirming;
     ngAfterContentInit() {
         this._registerConfirmTabs();
     }
@@ -286,31 +305,28 @@ class FsFormBaseDirective {
         });
     }
     _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(filter(() => !this.submitting), switchMap((event) => {
+        this._currentTabIndex = tabGroup.selectedIndex;
+        tabGroup.selectedIndexChange
+            .pipe(filter(() => !this._tabConfirming), switchMap((selectedIndex) => {
             if (this.confirm && this.confirmTabs) {
+                tabGroup.selectedIndex = this._currentTabIndex;
+                this._tabConfirming = true;
                 return this.triggerConfirm()
-                    .pipe(tap((result) => {
+                    .pipe(map((result) => {
                     if (confirmResultContinue(result)) {
-                        confirmTabGroup.selectedIndex = event.idx;
+                        tabGroup.selectedIndex = selectedIndex;
+                        return selectedIndex;
                     }
+                    return null;
+                }), delay(50), tap(() => {
+                    this._tabConfirming = false;
                 }));
             }
-            confirmTabGroup._originalHandleClick(event.tab, event.tabHeader, event.idx);
-            return of(null);
+            return of(selectedIndex);
+        }), tap((selectedIndex) => {
+            if (selectedIndex !== null) {
+                this._currentTabIndex = selectedIndex;
+            }
         }), takeUntil(this._destroy$))
             .subscribe();
     }
@@ -571,9 +587,12 @@ class FsFormDirective extends FsFormBaseDirective {
             return this._formValidState$;
         }), catchError((e) => {
             this._handleError(e);
-            return of(null);
+            return of({
+                ...this._submitEvent,
+                error: e.message,
+            });
         }), tap((submittedEvent) => {
-            if (submittedEvent) {
+            if (!submittedEvent.error) {
                 this._completeSubmit(true, submittedEvent);
             }
         }));
@@ -584,7 +603,7 @@ class FsFormDirective extends FsFormBaseDirective {
             .ngSubmit
             .pipe(tap((event) => {
             event?.preventDefault();
-        }), filter$1(() => {
+        }), filter(() => {
             return [FormStatus.Valid, FormStatus.Invalid]
                 .includes(this._status$.getValue());
         }), switchMap(() => this.submit$(this._submitEvent)), takeUntil(this.destroy$))
@@ -650,8 +669,8 @@ class FsFormDirective extends FsFormBaseDirective {
     _formClose() {
         if (this.confirm && this.confirmDialog) {
             this.triggerConfirm()
-                .pipe(filter$1((result) => confirmResultContinue(result)), switchMap((result) => {
-                return result === ConfirmResult.Pristine || result === ConfirmResult.Discard
+                .pipe(filter((result) => confirmResultContinue(result)), switchMap((result) => {
+                return result === ConfirmResult.NoChanges || result === ConfirmResult.Discard
                     ? of(null)
                     : this.submitted.asObservable();
             }), takeUntil(this.destroy$))
@@ -754,7 +773,7 @@ class FsFormDirective extends FsFormBaseDirective {
                 .subscribe((subscriber) => {
                 if (this.submitting) {
                     this._status$
-                        .pipe(filter$1((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this.destroy$))
+                        .pipe(filter((status) => status === FormStatus.Success || status === FormStatus.Error), takeUntil(this.destroy$))
                         .subscribe((status) => {
                         if (status === FormStatus.Success) {
                             subscriber.next(null);
@@ -991,7 +1010,7 @@ class FsFormDialogCloseDirective {
     closeClick() {
         if (this._form) {
             this._form.triggerConfirm()
-                .pipe(filter$1((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
+                .pipe(filter((confirmResult) => (confirmResult !== ConfirmResult.Review)), takeUntil(this._destroy$))
                 .subscribe(() => {
                 this._dialogRef.close(this.closeData);
             });
@@ -1182,7 +1201,7 @@ class FsFormDialogActionsComponent {
     ngOnInit() {
         if (this._form) {
             this._form.ngForm.valueChanges
-                .pipe(filter$1(() => (!this.dirty)), takeUntil(this._destroy$))
+                .pipe(filter(() => (!this.dirty)), takeUntil(this._destroy$))
                 .subscribe(() => {
                 this.dirty = this._form.ngForm.dirty;
                 this._cdRef.markForCheck();