@firestitch/form 12.3.5 → 12.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/directives/form/form.directive.d.ts +9 -3
- package/app/guards/form-deactivate.guard.d.ts +6 -4
- package/app/helpers/confirm-unsaved.d.ts +1 -1
- package/app/helpers/get-active-route.d.ts +2 -0
- package/app/services/fsform.service.d.ts +6 -0
- package/bundles/firestitch-form.umd.js +110 -57
- package/bundles/firestitch-form.umd.js.map +1 -1
- package/esm2015/app/directives/form/form.directive.js +43 -12
- package/esm2015/app/guards/form-deactivate.guard.js +21 -16
- package/esm2015/app/helpers/confirm-unsaved.js +4 -2
- package/esm2015/app/helpers/get-active-route.js +7 -0
- package/esm2015/app/services/fsform.service.js +16 -1
- package/esm2015/public_api.js +1 -1
- package/fesm2015/firestitch-form.js +103 -50
- package/fesm2015/firestitch-form.js.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +0 -1
- package/styles.scss +1 -1
- package/app/interfaces/form-deactivate.d.ts +0 -4
- package/esm2015/app/interfaces/form-deactivate.js +0 -2
package/esm2015/public_api.js
CHANGED
|
@@ -34,4 +34,4 @@ export { FormDeactivateGuard } from './app/guards/form-deactivate.guard';
|
|
|
34
34
|
// Enums
|
|
35
35
|
export { ConfirmResult } from './app/enums/confirm-result';
|
|
36
36
|
export { FormStatus } from './app/enums/form-status';
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFVBQVU7QUFDVixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFFcEQsV0FBVztBQUNYLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUV2RCxhQUFhO0FBQ2IsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ25GLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGdEQUFnRCxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQy9FLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQy9FLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGlEQUFpRCxDQUFDO0FBQzNGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGlEQUFpRCxDQUFDO0FBQzNGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ25GLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ3JGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ25GLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGdEQUFnRCxDQUFDO0FBQ3pGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGlEQUFpRCxDQUFDO0FBQzNGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ3JGLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQy9FLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQzFGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQ25GLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGdEQUFnRCxDQUFDO0FBQ3pGLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLHdEQUF3RCxDQUFDO0FBRXZHLGFBQWE7QUFDYixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxvRUFBb0UsQ0FBQztBQUVsSCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFM0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFPekUsUUFBUTtBQUNSLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0seUJBQXlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBNb2R1bGVzXG5leHBvcnQgeyBGc0Zvcm1Nb2R1bGUgfSBmcm9tICcuL2FwcC9mcy1mb3JtLm1vZHVsZSc7XG5cbi8vIFNlcnZpY2VzXG5leHBvcnQgeyBGc0Zvcm0gfSBmcm9tICcuL2FwcC9zZXJ2aWNlcy9mc2Zvcm0uc2VydmljZSc7XG5cbi8vIERpcmVjdGl2ZXNcbmV4cG9ydCB7IEZzRm9ybURpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvZm9ybS9mb3JtLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0NvbnRyb2xEaXJlY3RpdmUgfSBmcm9tICcuL2FwcC9kaXJlY3RpdmVzL3ZhbGlkYXRvcnMvY29udHJvbC5kaXJlY3RpdmUnO1xuZXhwb3J0IHsgRnNGb3JtUmVxdWlyZWREaXJlY3RpdmUgfSBmcm9tICcuL2FwcC9kaXJlY3RpdmVzL3ZhbGlkYXRvcnMvcmVxdWlyZWQuZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzRm9ybU1pbkRpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9taW4uZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzRm9ybU1heERpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9tYXguZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzRm9ybU1pbkxlbmd0aERpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9taW5sZW5ndGguZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzRm9ybU1heExlbmd0aERpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9tYXhsZW5ndGguZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzRm9ybUVtYWlsRGlyZWN0aXZlIH0gZnJvbSAnLi9hcHAvZGlyZWN0aXZlcy92YWxpZGF0b3JzL2VtYWlsLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0Zvcm1FbWFpbHNEaXJlY3RpdmUgfSBmcm9tICcuL2FwcC9kaXJlY3RpdmVzL3ZhbGlkYXRvcnMvZW1haWxzLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0Zvcm1QaG9uZURpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9waG9uZS5kaXJlY3RpdmUnO1xuZXhwb3J0IHsgRnNGb3JtQ29tcGFyZURpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9jb21wYXJlLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0Zvcm1JbnRlZ2VyRGlyZWN0aXZlIH0gZnJvbSAnLi9hcHAvZGlyZWN0aXZlcy92YWxpZGF0b3JzL2ludGVnZXIuZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzRm9ybU51bWVyaWNEaXJlY3RpdmUgfSBmcm9tICcuL2FwcC9kaXJlY3RpdmVzL3ZhbGlkYXRvcnMvbnVtZXJpYy5kaXJlY3RpdmUnO1xuZXhwb3J0IHsgRnNGb3JtUGF0dGVybkRpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9wYXR0ZXJuLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0Zvcm1GdW5jdGlvbkRpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9mdW5jdGlvbi5kaXJlY3RpdmUnO1xuZXhwb3J0IHsgRnNGb3JtRGF0ZVJhbmdlRGlyZWN0aXZlIH0gZnJvbSAnLi9hcHAvZGlyZWN0aXZlcy92YWxpZGF0b3JzL2RhdGVyYW5nZS5kaXJlY3RpdmUnO1xuZXhwb3J0IHsgRnNGb3JtR3JlYXRlckRpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy9ncmVhdGVyLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0Zvcm1MZXNzZXJEaXJlY3RpdmUgfSBmcm9tICcuL2FwcC9kaXJlY3RpdmVzL3ZhbGlkYXRvcnMvbGVzc2VyLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0Zvcm1VcmxEaXJlY3RpdmUgfSBmcm9tICcuL2FwcC9kaXJlY3RpdmVzL3ZhbGlkYXRvcnMvdXJsLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0Zvcm1EaWFsb2dDbG9zZURpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvZm9ybS1kaWFsb2ctY2xvc2UuZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzQnV0dG9uRGlyZWN0aXZlIH0gZnJvbSAnLi9hcHAvZGlyZWN0aXZlcy9idXR0b24uZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzU3VibWl0QnV0dG9uRGlyZWN0aXZlIH0gZnJvbSAnLi9hcHAvZGlyZWN0aXZlcy9zdWJtaXQtYnV0dG9uLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0Zvcm1WYWxpZGF0ZURpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvdmFsaWRhdG9ycy92YWxpZGF0ZS5kaXJlY3RpdmUnO1xuZXhwb3J0IHsgRnNGb3JtTm9Gc1ZhbGlkYXRvcnNEaXJlY3RpdmUgfSBmcm9tICcuL2FwcC9kaXJlY3RpdmVzL3ZhbGlkYXRvcnMvbm8tZnMtdmFsaWRhdG9ycy5kaXJlY3RpdmUnO1xuXG4vLyBDb21wb25lbnRzXG5leHBvcnQgeyBGc0Zvcm1EaWFsb2dBY3Rpb25zQ29tcG9uZW50IH0gZnJvbSAnLi9hcHAvY29tcG9uZW50cy9mb3JtLWRpYWxvZy1hY3Rpb25zL2Zvcm0tZGlhbG9nLWFjdGlvbnMuY29tcG9uZW50JztcblxuZXhwb3J0IHsgRnNWYWxpZGF0b3JzIH0gZnJvbSAnLi9hcHAvdmFsaWRhdG9ycy92YWxpZGF0b3JzJztcblxuZXhwb3J0IHsgRm9ybURlYWN0aXZhdGVHdWFyZCB9IGZyb20gJy4vYXBwL2d1YXJkcy9mb3JtLWRlYWN0aXZhdGUuZ3VhcmQnO1xuXG4vLyBJbnRlcmZhY2VzXG5leHBvcnQgeyBTdWJtaXRFdmVudCB9IGZyb20gJy4vYXBwL2ludGVyZmFjZXMvc3VibWl0LWV2ZW50JztcbmV4cG9ydCB7IFN1Ym1pdHRlZEV2ZW50IH0gZnJvbSAnLi9hcHAvaW50ZXJmYWNlcy9zdWJtaXR0ZWQtZXZlbnQnO1xuZXhwb3J0IHsgQ29uZmlybUNvbmZpZyB9IGZyb20gJy4vYXBwL2ludGVyZmFjZXMvY29uZmlybS1jb25maWcnO1xuXG4vLyBFbnVtc1xuZXhwb3J0IHsgQ29uZmlybVJlc3VsdCB9IGZyb20gJy4vYXBwL2VudW1zL2NvbmZpcm0tcmVzdWx0JztcbmV4cG9ydCB7IEZvcm1TdGF0dXMgfSBmcm9tICcuL2FwcC9lbnVtcy9mb3JtLXN0YXR1cyc7XG5cblxuIl19
|
|
@@ -2,21 +2,22 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Directive, HostBinding, HostListener, Injectable, EventEmitter, QueryList, Inject, Optional, Input, Output, ContentChildren, InjectionToken, Self, Host, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
3
3
|
import * as i4 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i1 from '@angular/forms';
|
|
5
|
+
import * as i1$1 from '@angular/forms';
|
|
6
6
|
import { FormGroup, NgForm, Validators, FormsModule } from '@angular/forms';
|
|
7
|
-
import * as i1$
|
|
7
|
+
import * as i1$2 from '@angular/material/button';
|
|
8
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
9
|
import * as i2$1 from '@angular/material/dialog';
|
|
10
10
|
import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
|
|
11
11
|
import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';
|
|
12
|
+
import * as i3 from '@angular/router';
|
|
12
13
|
import { MatTabGroup } from '@angular/material/tabs';
|
|
13
14
|
import * as i2 from '@firestitch/message';
|
|
14
15
|
import { MessageMode } from '@firestitch/message';
|
|
15
|
-
import * as
|
|
16
|
+
import * as i1 from '@firestitch/prompt';
|
|
16
17
|
import { guid, email, isEmpty, isNumeric, phone, url } from '@firestitch/common';
|
|
17
|
-
import * as
|
|
18
|
+
import * as i7 from '@firestitch/drawer';
|
|
18
19
|
import { DrawerRef } from '@firestitch/drawer';
|
|
19
|
-
import { Observable, Subject,
|
|
20
|
+
import { Observable, Subject, of, BehaviorSubject, isObservable, throwError, fromEvent, iif, defer, from } from 'rxjs';
|
|
20
21
|
import { first, filter, map, take, mergeMap, tap, switchMap, catchError, takeUntil, delay, startWith } from 'rxjs/operators';
|
|
21
22
|
import { values, keys, isObject } from 'lodash-es';
|
|
22
23
|
import { isValid } from 'date-fns';
|
|
@@ -30,8 +31,10 @@ var ConfirmResult;
|
|
|
30
31
|
ConfirmResult["Pristine"] = "pristine";
|
|
31
32
|
})(ConfirmResult || (ConfirmResult = {}));
|
|
32
33
|
|
|
33
|
-
function confirmUnsaved(
|
|
34
|
+
function confirmUnsaved(directives, prompt) {
|
|
34
35
|
return new Observable(observer => {
|
|
36
|
+
// TODO support for multiple directives per page
|
|
37
|
+
const form = directives[0];
|
|
35
38
|
if (!form.confirm || !form.ngForm.dirty) {
|
|
36
39
|
observer.next(ConfirmResult.Pristine);
|
|
37
40
|
observer.complete();
|
|
@@ -127,15 +130,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
127
130
|
|
|
128
131
|
class FsForm {
|
|
129
132
|
constructor() {
|
|
133
|
+
// value is array for future possibilities of extension
|
|
134
|
+
this._formDirectiveStore = new WeakMap();
|
|
130
135
|
this._eventBus = new Subject();
|
|
131
136
|
}
|
|
137
|
+
// @deprecated
|
|
132
138
|
broadcast(key, data) {
|
|
133
139
|
this._eventBus.next({ key, data });
|
|
134
140
|
}
|
|
141
|
+
// @deprecated
|
|
135
142
|
on(key) {
|
|
136
143
|
return this._eventBus.asObservable()
|
|
137
144
|
.pipe(filter(event => event.key === key), map(event => event.data));
|
|
138
145
|
}
|
|
146
|
+
registerFormDirective(routeComponent, directive) {
|
|
147
|
+
const directives = this.getFormDirectives(routeComponent) || [];
|
|
148
|
+
directives.push(directive);
|
|
149
|
+
this._formDirectiveStore.set(routeComponent, directives);
|
|
150
|
+
}
|
|
151
|
+
getFormDirectives(routeComponent) {
|
|
152
|
+
return this._formDirectiveStore.get(routeComponent);
|
|
153
|
+
}
|
|
154
|
+
removeFormDirective(routeComponent) {
|
|
155
|
+
this._formDirectiveStore.delete(routeComponent);
|
|
156
|
+
}
|
|
139
157
|
}
|
|
140
158
|
FsForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsForm, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
141
159
|
FsForm.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsForm, providedIn: 'root' });
|
|
@@ -186,8 +204,47 @@ function getFormErrors(control, key) {
|
|
|
186
204
|
return errors;
|
|
187
205
|
}
|
|
188
206
|
|
|
207
|
+
function getActiveRoute(route) {
|
|
208
|
+
while (route.firstChild) {
|
|
209
|
+
route = route.firstChild;
|
|
210
|
+
}
|
|
211
|
+
return route;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
class FormDeactivateGuard {
|
|
215
|
+
constructor(_prompt, _fsForm, _route) {
|
|
216
|
+
this._prompt = _prompt;
|
|
217
|
+
this._fsForm = _fsForm;
|
|
218
|
+
this._route = _route;
|
|
219
|
+
}
|
|
220
|
+
canDeactivate() {
|
|
221
|
+
const route = getActiveRoute(this._route);
|
|
222
|
+
if (!route) {
|
|
223
|
+
console.error(`Can not find route for FormDeactivateGuard checks`);
|
|
224
|
+
return of(true);
|
|
225
|
+
}
|
|
226
|
+
const directives = this._fsForm.getFormDirectives(route.routeConfig.component);
|
|
227
|
+
if (!Array.isArray(directives) || directives.length === 0) {
|
|
228
|
+
console.error(`Can not find a valid FsFormDirective`);
|
|
229
|
+
return of(true);
|
|
230
|
+
}
|
|
231
|
+
return confirmUnsaved(directives, this._prompt)
|
|
232
|
+
.pipe(map((result) => {
|
|
233
|
+
return confirmResultContinue(result);
|
|
234
|
+
}));
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
FormDeactivateGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormDeactivateGuard, deps: [{ token: i1.FsPrompt }, { token: FsForm }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
238
|
+
FormDeactivateGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormDeactivateGuard, providedIn: 'root' });
|
|
239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormDeactivateGuard, decorators: [{
|
|
240
|
+
type: Injectable,
|
|
241
|
+
args: [{
|
|
242
|
+
providedIn: 'root',
|
|
243
|
+
}]
|
|
244
|
+
}], ctorParameters: function () { return [{ type: i1.FsPrompt }, { type: FsForm }, { type: i3.ActivatedRoute }]; } });
|
|
245
|
+
|
|
189
246
|
class FsFormDirective {
|
|
190
|
-
constructor(ngForm, _form, _element, _message, _prompt, _ngZone, _dialogRef, _drawerRef) {
|
|
247
|
+
constructor(ngForm, _form, _element, _message, _prompt, _ngZone, _dialogRef, _drawerRef, _route) {
|
|
191
248
|
this.ngForm = ngForm;
|
|
192
249
|
this._form = _form;
|
|
193
250
|
this._element = _element;
|
|
@@ -196,6 +253,7 @@ class FsFormDirective {
|
|
|
196
253
|
this._ngZone = _ngZone;
|
|
197
254
|
this._dialogRef = _dialogRef;
|
|
198
255
|
this._drawerRef = _drawerRef;
|
|
256
|
+
this._route = _route;
|
|
199
257
|
this.wrapperSelector = '.fs-form-wrapper,.mat-form-field';
|
|
200
258
|
this.messageSelector = '.fs-form-message,.mat-form-field-subscript-wrapper';
|
|
201
259
|
this.hintSelector = '.fs-form-hint,.mat-form-field-hint-wrapper';
|
|
@@ -210,6 +268,7 @@ class FsFormDirective {
|
|
|
210
268
|
this.dirtySubmitButton = true;
|
|
211
269
|
this.successDelay = 0;
|
|
212
270
|
this.errorDelay = 1000;
|
|
271
|
+
this.deactivationGuard = true;
|
|
213
272
|
this.submitEvent = new EventEmitter();
|
|
214
273
|
this.invalid = new EventEmitter();
|
|
215
274
|
this.valid = new EventEmitter();
|
|
@@ -280,6 +339,9 @@ class FsFormDirective {
|
|
|
280
339
|
: null;
|
|
281
340
|
}
|
|
282
341
|
ngOnInit() {
|
|
342
|
+
if (this.deactivationGuard) {
|
|
343
|
+
this._registerCanDeactivateGuard();
|
|
344
|
+
}
|
|
283
345
|
this._registerConfirmDialogBackdropEscape();
|
|
284
346
|
this._listenHotKeys();
|
|
285
347
|
this._listenWindowClose();
|
|
@@ -303,6 +365,7 @@ class FsFormDirective {
|
|
|
303
365
|
this._registerDirtySubmitButton();
|
|
304
366
|
}
|
|
305
367
|
ngOnDestroy() {
|
|
368
|
+
this._cleanupCanDeactivate();
|
|
306
369
|
this._destroy$.next();
|
|
307
370
|
this._destroy$.complete();
|
|
308
371
|
}
|
|
@@ -335,7 +398,7 @@ class FsFormDirective {
|
|
|
335
398
|
triggerConfirm() {
|
|
336
399
|
const submitted = this.submitting ? this.submitted.asObservable() : of({});
|
|
337
400
|
return submitted
|
|
338
|
-
.pipe(take(1), mergeMap(() => confirmUnsaved(this, this._prompt)));
|
|
401
|
+
.pipe(take(1), mergeMap(() => confirmUnsaved([this], this._prompt)));
|
|
339
402
|
}
|
|
340
403
|
enable() {
|
|
341
404
|
this.ngForm.control.enable();
|
|
@@ -741,28 +804,47 @@ class FsFormDirective {
|
|
|
741
804
|
console.groupEnd();
|
|
742
805
|
this._completeSubmit(false, null);
|
|
743
806
|
}
|
|
807
|
+
_registerCanDeactivateGuard() {
|
|
808
|
+
this._activatedRouteConfig = getActiveRoute(this._route).routeConfig;
|
|
809
|
+
if (!this._activatedRouteConfig) {
|
|
810
|
+
return;
|
|
811
|
+
}
|
|
812
|
+
this._form.registerFormDirective(this._activatedRouteConfig.component, this);
|
|
813
|
+
if (!Array.isArray(this._activatedRouteConfig.canDeactivate)) {
|
|
814
|
+
this._activatedRouteConfig.canDeactivate = [];
|
|
815
|
+
}
|
|
816
|
+
if (this._activatedRouteConfig.canDeactivate.indexOf(FormDeactivateGuard) == -1) {
|
|
817
|
+
this._activatedRouteConfig.canDeactivate.push(FormDeactivateGuard);
|
|
818
|
+
}
|
|
819
|
+
}
|
|
820
|
+
_cleanupCanDeactivate() {
|
|
821
|
+
if (!this._activatedRouteConfig) {
|
|
822
|
+
return;
|
|
823
|
+
}
|
|
824
|
+
this._form.removeFormDirective(this._activatedRouteConfig.component);
|
|
825
|
+
}
|
|
744
826
|
}
|
|
745
|
-
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:
|
|
746
|
-
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 });
|
|
827
|
+
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: i1.FsPrompt }, { token: i0.NgZone }, { token: MatDialogRef, optional: true }, { token: DrawerRef, optional: true }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
|
|
828
|
+
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", deactivationGuard: "deactivationGuard" }, 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 });
|
|
747
829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDirective, decorators: [{
|
|
748
830
|
type: Directive,
|
|
749
831
|
args: [{
|
|
750
832
|
selector: '[fsForm]',
|
|
751
833
|
}]
|
|
752
|
-
}], ctorParameters: function () { return [{ type: i1.NgForm, decorators: [{
|
|
834
|
+
}], ctorParameters: function () { return [{ type: i1$1.NgForm, decorators: [{
|
|
753
835
|
type: Inject,
|
|
754
836
|
args: [NgForm]
|
|
755
|
-
}] }, { type: FsForm }, { type: i0.ElementRef }, { type: i2.FsMessage }, { type:
|
|
837
|
+
}] }, { type: FsForm }, { type: i0.ElementRef }, { type: i2.FsMessage }, { type: i1.FsPrompt }, { type: i0.NgZone }, { type: i2$1.MatDialogRef, decorators: [{
|
|
756
838
|
type: Optional
|
|
757
839
|
}, {
|
|
758
840
|
type: Inject,
|
|
759
841
|
args: [MatDialogRef]
|
|
760
|
-
}] }, { type:
|
|
842
|
+
}] }, { type: i7.DrawerRef, decorators: [{
|
|
761
843
|
type: Optional
|
|
762
844
|
}, {
|
|
763
845
|
type: Inject,
|
|
764
846
|
args: [DrawerRef]
|
|
765
|
-
}] }]; }, propDecorators: { wrapperSelector: [{
|
|
847
|
+
}] }, { type: i3.ActivatedRoute }]; }, propDecorators: { wrapperSelector: [{
|
|
766
848
|
type: Input
|
|
767
849
|
}], messageSelector: [{
|
|
768
850
|
type: Input
|
|
@@ -794,6 +876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
794
876
|
type: Input
|
|
795
877
|
}], tabGroup: [{
|
|
796
878
|
type: Input
|
|
879
|
+
}], deactivationGuard: [{
|
|
880
|
+
type: Input
|
|
797
881
|
}], submitEvent: [{
|
|
798
882
|
type: Output,
|
|
799
883
|
args: ['fsForm']
|
|
@@ -1050,7 +1134,7 @@ class FsControlDirective {
|
|
|
1050
1134
|
control.updateValueAndValidity();
|
|
1051
1135
|
}
|
|
1052
1136
|
}
|
|
1053
|
-
FsControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: VALIDATE_MESSAGES, self: true }, { token: i1.NgControl, optional: true }, { token: FsFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1137
|
+
FsControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: VALIDATE_MESSAGES, self: true }, { token: i1$1.NgControl, optional: true }, { token: FsFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1054
1138
|
FsControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsControlDirective, selector: "[fsFormControl]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", appendMessageClass: "appendMessageClass", appendLabelClass: "appendLabelClass", appendErrorClass: "appendErrorClass", appendHintClass: "appendHintClass", validateMessages: "validateMessages" }, providers: [
|
|
1055
1139
|
VALIDATE_MESSAGE_PROVIDER
|
|
1056
1140
|
], ngImport: i0 });
|
|
@@ -1067,7 +1151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
1067
1151
|
}, {
|
|
1068
1152
|
type: Inject,
|
|
1069
1153
|
args: [VALIDATE_MESSAGES]
|
|
1070
|
-
}] }, { type: i1.NgControl, decorators: [{
|
|
1154
|
+
}] }, { type: i1$1.NgControl, decorators: [{
|
|
1071
1155
|
type: Optional
|
|
1072
1156
|
}] }, { type: FsFormDirective, decorators: [{
|
|
1073
1157
|
type: Optional
|
|
@@ -1940,14 +2024,14 @@ class FsButtonDirective {
|
|
|
1940
2024
|
}
|
|
1941
2025
|
}
|
|
1942
2026
|
}
|
|
1943
|
-
FsButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsButtonDirective, deps: [{ token: i1$
|
|
2027
|
+
FsButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsButtonDirective, deps: [{ token: i1$2.MatButton, host: true, optional: true }, { token: FsFormDirective, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1944
2028
|
FsButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: { name: "name", dirtySubmit: "dirtySubmit" }, host: { properties: { "style.transition": "this.transitionStyle" } }, ngImport: i0 });
|
|
1945
2029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsButtonDirective, decorators: [{
|
|
1946
2030
|
type: Directive,
|
|
1947
2031
|
args: [{
|
|
1948
2032
|
selector: '[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]',
|
|
1949
2033
|
}]
|
|
1950
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
2034
|
+
}], ctorParameters: function () { return [{ type: i1$2.MatButton, decorators: [{
|
|
1951
2035
|
type: Optional
|
|
1952
2036
|
}, {
|
|
1953
2037
|
type: Host
|
|
@@ -2051,7 +2135,7 @@ class FsFormDialogActionsComponent {
|
|
|
2051
2135
|
}
|
|
2052
2136
|
}
|
|
2053
2137
|
FsFormDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDialogActionsComponent, deps: [{ token: FsFormDirective, optional: true }, { token: i2$1.MatDialogRef, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2054
|
-
FsFormDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div class=\"buttons\" [ngClass]=\"{ 'save-create': save || create }\">\n <ng-container *ngIf=\"save\">\n <button\n mat-button\n type=\"submit\"\n color=\"primary\"\n [name]=\"name\">\n {{create ? 'Create' : 'Save'}}\n </button>\n <button\n mat-button\n type=\"button\"\n [disabled]=\"close && !dirty && !create\"\n [matDialogClose]=\"null\">\n Cancel\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"save || create\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </ng-container>\n\n <div class=\"close\" *ngIf=\"close\">\n <button\n mat-button\n type=\"button\"\n [color]=\"dirty ? 'basic' : 'primary'\"\n (click)=\"closeClick()\">\n Close\n </button>\n </div>\n\n <ng-container *ngIf=\"!(save || create)\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </ng-container>\n</div>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".buttons{display:flex;flex-grow:1;align-items:center}.buttons.save-create .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}}\n"], components: [{ type: i1$
|
|
2138
|
+
FsFormDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div class=\"buttons\" [ngClass]=\"{ 'save-create': save || create }\">\n <ng-container *ngIf=\"save\">\n <button\n mat-button\n type=\"submit\"\n color=\"primary\"\n [name]=\"name\">\n {{create ? 'Create' : 'Save'}}\n </button>\n <button\n mat-button\n type=\"button\"\n [disabled]=\"close && !dirty && !create\"\n [matDialogClose]=\"null\">\n Cancel\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"save || create\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </ng-container>\n\n <div class=\"close\" *ngIf=\"close\">\n <button\n mat-button\n type=\"button\"\n [color]=\"dirty ? 'basic' : 'primary'\"\n (click)=\"closeClick()\">\n Close\n </button>\n </div>\n\n <ng-container *ngIf=\"!(save || create)\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </ng-container>\n</div>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".buttons{display:flex;flex-grow:1;align-items:center}.buttons.save-create .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}}\n"], components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2055
2139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDialogActionsComponent, decorators: [{
|
|
2056
2140
|
type: Component,
|
|
2057
2141
|
args: [{
|
|
@@ -2279,37 +2363,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
2279
2363
|
}]
|
|
2280
2364
|
}] });
|
|
2281
2365
|
|
|
2282
|
-
class FormDeactivateGuard {
|
|
2283
|
-
constructor(_prompt) {
|
|
2284
|
-
this._prompt = _prompt;
|
|
2285
|
-
}
|
|
2286
|
-
canDeactivate(directive) {
|
|
2287
|
-
if (!('getForm' in directive)) {
|
|
2288
|
-
const error = `Directive ${directive.constructor.name} does not property implement interface FormDeactivate`;
|
|
2289
|
-
console.error(error);
|
|
2290
|
-
return of(true);
|
|
2291
|
-
}
|
|
2292
|
-
const form = directive.getForm();
|
|
2293
|
-
if (!(form instanceof FsFormDirective)) {
|
|
2294
|
-
const error = `Directive ${directive.constructor.name}.getForm() does not return a valid FsFormDirective`;
|
|
2295
|
-
console.error(error);
|
|
2296
|
-
return of(true);
|
|
2297
|
-
}
|
|
2298
|
-
return confirmUnsaved(form, this._prompt)
|
|
2299
|
-
.pipe(map((result) => {
|
|
2300
|
-
return confirmResultContinue(result);
|
|
2301
|
-
}));
|
|
2302
|
-
}
|
|
2303
|
-
}
|
|
2304
|
-
FormDeactivateGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormDeactivateGuard, deps: [{ token: i3.FsPrompt }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2305
|
-
FormDeactivateGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormDeactivateGuard, providedIn: 'root' });
|
|
2306
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormDeactivateGuard, decorators: [{
|
|
2307
|
-
type: Injectable,
|
|
2308
|
-
args: [{
|
|
2309
|
-
providedIn: 'root'
|
|
2310
|
-
}]
|
|
2311
|
-
}], ctorParameters: function () { return [{ type: i3.FsPrompt }]; } });
|
|
2312
|
-
|
|
2313
2366
|
// Modules
|
|
2314
2367
|
|
|
2315
2368
|
/**
|