@formio/angular 6.0.0-rc.2 → 6.0.0-rc.4

package/fesm2022/formio-angular-resource.mjs

@@ -7,7 +7,7 @@ import Promise$1 from 'native-promise-only';
 import { Formio, Utils } from '@formio/js';
 import _, { each } from 'lodash';
 import * as i2 from '@angular/router';
-import { RouterModule } from '@angular/router';
+import { NavigationEnd, RouterModule } from '@angular/router';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5 from '@formio/angular/grid';
@@ -17,10 +17,10 @@ class FormioResourceConfig {
     name = '';
     form = '';
     parents = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceConfig });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceConfig });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceConfig, decorators: [{
             type: Injectable
         }] });
 
@@ -39,10 +39,10 @@ class FormioResources {
             }
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResources, deps: [{ token: i1.FormioAuthService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResources });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResources, deps: [{ token: i1.FormioAuthService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResources });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResources, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResources, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.FormioAuthService }]; } });
 
@@ -50,7 +50,6 @@ class FormioResourceService {
     appConfig;
     config;
     resourcesService;
-    appRef;
     initialized = false;
     form;
     alerts;
@@ -60,37 +59,51 @@ class FormioResourceService {
     formFormio;
     formio;
     refresh;
-    resourceLoading;
+    resourceResolve;
+    resourceReject;
     resourceLoaded;
+    resourceLoading;
     resourceId;
     resources;
+    ready;
+    readyResolve;
+    readyReject;
     formLoading;
     formLoaded;
     formResolve;
     formReject;
     isLoading;
-    constructor(appConfig, config, resourcesService, appRef) {
+    constructor(appConfig, config, resourcesService) {
         this.appConfig = appConfig;
         this.config = config;
         this.resourcesService = resourcesService;
-        this.appRef = appRef;
         this.isLoading = true;
         this.alerts = new FormioAlerts();
         this.refresh = new EventEmitter();
-        this.formLoaded = new Promise$1((resolve, reject) => {
-            this.formResolve = resolve;
-            this.formReject = reject;
-        });
-        this.init();
     }
     initialize() {
         console.warn('FormioResourceService.initialize() has been deprecated.');
     }
-    init() {
-        if (this.initialized) {
-            return;
+    setResource(resourceId) {
+        this.resourceLoading = null;
+        this.formLoading = null;
+        this.ready = new Promise$1((resolve, reject) => {
+            this.readyResolve = resolve;
+            this.readyReject = reject;
+        });
+        this.formLoaded = new Promise$1((resolve, reject) => {
+            this.formResolve = resolve;
+            this.formReject = reject;
+        });
+        this.resourceLoaded = new Promise$1((resolve, reject) => {
+            this.resourceResolve = resolve;
+            this.resourceReject = reject;
+        });
+        this.resourceId = resourceId;
+        this.resourceUrl = this.appConfig.appUrl + '/' + this.config.form;
+        if (this.resourceId) {
+            this.resourceUrl += '/submission/' + this.resourceId;
         }
-        this.initialized = true;
         if (this.appConfig && this.appConfig.appUrl) {
             Formio.setBaseUrl(this.appConfig.apiUrl);
             Formio.setProjectUrl(this.appConfig.appUrl);
@@ -99,15 +112,30 @@ class FormioResourceService {
         else {
             console.error('You must provide an AppConfig within your application!');
         }
-        // Create the form url and load the resources.
-        this.formUrl = this.appConfig.appUrl + '/' + this.config.form;
+        this.formio = new FormioPromiseService(this.resourceUrl);
         this.resource = { data: {} };
+    }
+    init(route) {
+        const resourceId = route.snapshot.params['id'];
+        if (resourceId && (resourceId === this.resourceId)) {
+            return this.ready;
+        }
+        // Set the resource.
+        this.setResource(resourceId);
         // Add this resource service to the list of all resources in context.
         if (this.resourcesService) {
             this.resources = this.resourcesService.resources;
             this.resources[this.config.name] = this;
         }
-        return this.loadForm();
+        if (this.resourceId) {
+            return this.loadForm()
+                .then(() => this.loadResource())
+                .then(() => this.readyResolve(this.form))
+                .catch((err) => this.readyReject(err));
+        }
+        return this.loadForm()
+            .then(() => this.readyResolve(this.form))
+            .catch((err) => this.readyReject(err));
     }
     onError(error) {
         this.alerts.setAlert({
@@ -123,20 +151,11 @@ class FormioResourceService {
         this.formReject(err);
         this.onError(err);
     }
-    setContext(route) {
-        this.resourceId = route.snapshot.params['id'];
-        this.resource = { data: {} };
-        this.resourceUrl = this.appConfig.appUrl + '/' + this.config.form;
-        if (this.resourceId) {
-            this.resourceUrl += '/submission/' + this.resourceId;
-        }
-        this.formio = new FormioPromiseService(this.resourceUrl);
-        if (this.resourcesService) {
-            this.resources[this.config.name] = this;
-        }
-        this.loadParents();
-    }
     loadForm() {
+        if (this.formLoading) {
+            return this.formLoading;
+        }
+        this.formUrl = this.appConfig.appUrl + '/' + this.config.form;
         this.formFormio = new FormioPromiseService(this.formUrl);
         this.isLoading = true;
         this.formLoading = this.formFormio
@@ -198,11 +217,14 @@ class FormioResourceService {
     }
     onSubmissionError(err) {
         this.onError(err);
+        this.resourceReject(err);
     }
-    loadResource(route) {
-        this.setContext(route);
+    loadResource() {
+        if (this.resourceLoading) {
+            return this.resourceLoading;
+        }
         this.isLoading = true;
-        this.resourceLoading = this.resourceLoaded = this.formio
+        this.resourceLoading = this.formio
             .loadSubmission(null, { ignoreCache: true })
             .then((resource) => {
             this.resource = resource;
@@ -211,6 +233,7 @@ class FormioResourceService {
                 property: 'submission',
                 value: this.resource
             });
+            this.resourceResolve(resource);
             return resource;
         }, (err) => this.onSubmissionError(err))
             .catch((err) => this.onSubmissionError(err));
@@ -234,58 +257,53 @@ class FormioResourceService {
         }, (err) => this.onError(err))
             .catch((err) => this.onError(err));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceService, deps: [{ token: i1$1.FormioAppConfig }, { token: FormioResourceConfig }, { token: FormioResources, optional: true }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceService, deps: [{ token: i1$1.FormioAppConfig }, { token: FormioResourceConfig }, { token: FormioResources, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.FormioAppConfig }, { type: FormioResourceConfig }, { type: FormioResources, decorators: [{
                     type: Optional
-                }] }, { type: i0.ApplicationRef }]; } });
+                }] }]; } });
 
 class FormioResourceComponent {
     service;
     route;
     auth;
-    paramsSubscription;
+    router;
     perms = { delete: false, edit: false };
-    constructor(service, route, auth) {
+    routerSubscription;
+    constructor(service, route, auth, router) {
         this.service = service;
         this.route = route;
         this.auth = auth;
-        // subscribe to the route param changes, so that we could re-load the submission if navigation happens from one submission to another
-        this.paramsSubscription = this.route.params.subscribe((params) => {
-            this.init();
-        });
+        this.router = router;
     }
     ngOnInit() {
         this.init();
-    }
-    init() {
-        this.service.loadResource(this.route);
-        this.service.formLoaded.then((form) => {
-            this.auth.ready.then(() => {
-                this.service.resourceLoaded.then((resource) => {
-                    this.service.formFormio.userPermissions(this.auth.user, form, resource).then((perms) => {
-                        this.perms.delete = perms.delete;
-                        this.perms.edit = perms.edit;
-                    });
-                });
-            });
+        this.routerSubscription = this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                this.init();
+            }
         });
     }
     ngOnDestroy() {
-        if (this.paramsSubscription) {
-            this.paramsSubscription.unsubscribe();
-        }
+        this.routerSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i1.FormioAuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: FormioResourceComponent, selector: "ng-component", ngImport: i0, template: "<ul class=\"nav nav-tabs\" style=\"margin-bottom: 10px\">\n  <li class=\"nav-item\"><a class=\"nav-link\" routerLink=\"../\"><em class=\"fa fa-chevron-left glyphicon glyphicon-chevron-left bi bi-chevron-left\"></em></a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\"><a class=\"nav-link\" routerLink=\"view\" routerLinkActive=\"active\">View</a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\" *ngIf=\"perms.edit\"><a class=\"nav-link\" routerLink=\"edit\" routerLinkActive=\"active\">Edit</a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\" *ngIf=\"perms.delete\"><a class=\"nav-link\" routerLink=\"delete\" routerLinkActive=\"active\"><span class=\"fa fa-trash glyphicon glyphicon-trash bi bi-trash\"></span></a></li>\n</ul>\n<router-outlet></router-outlet>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    init() {
+        return this.service.init(this.route).then(() => this.auth.ready.then(() => this.service.formFormio.userPermissions(this.auth.user, this.service.form, this.service.resource).then((perms) => {
+            this.perms.delete = perms.delete;
+            this.perms.edit = perms.edit;
+            return this.service.resource;
+        })));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i1.FormioAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: FormioResourceComponent, selector: "ng-component", ngImport: i0, template: "<ul class=\"nav nav-tabs\" style=\"margin-bottom: 10px\">\n  <li class=\"nav-item\"><a class=\"nav-link\" routerLink=\"../\"><em class=\"fa fa-chevron-left bi bi-chevron-left\"></em></a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\"><a class=\"nav-link\" routerLink=\"view\" routerLinkActive=\"active\">View</a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\" *ngIf=\"perms.edit\"><a class=\"nav-link\" routerLink=\"edit\" routerLinkActive=\"active\">Edit</a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\" *ngIf=\"perms.delete\"><a class=\"nav-link\" routerLink=\"delete\" routerLinkActive=\"active\"><span class=\"fa fa-trash bi bi-trash\"></span></a></li>\n</ul>\n<router-outlet></router-outlet>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ul class=\"nav nav-tabs\" style=\"margin-bottom: 10px\">\n  <li class=\"nav-item\"><a class=\"nav-link\" routerLink=\"../\"><em class=\"fa fa-chevron-left glyphicon glyphicon-chevron-left bi bi-chevron-left\"></em></a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\"><a class=\"nav-link\" routerLink=\"view\" routerLinkActive=\"active\">View</a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\" *ngIf=\"perms.edit\"><a class=\"nav-link\" routerLink=\"edit\" routerLinkActive=\"active\">Edit</a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\" *ngIf=\"perms.delete\"><a class=\"nav-link\" routerLink=\"delete\" routerLinkActive=\"active\"><span class=\"fa fa-trash glyphicon glyphicon-trash bi bi-trash\"></span></a></li>\n</ul>\n<router-outlet></router-outlet>\n" }]
-        }], ctorParameters: function () { return [{ type: FormioResourceService }, { type: i2.ActivatedRoute }, { type: i1.FormioAuthService }]; } });
+            args: [{ template: "<ul class=\"nav nav-tabs\" style=\"margin-bottom: 10px\">\n  <li class=\"nav-item\"><a class=\"nav-link\" routerLink=\"../\"><em class=\"fa fa-chevron-left bi bi-chevron-left\"></em></a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\"><a class=\"nav-link\" routerLink=\"view\" routerLinkActive=\"active\">View</a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\" *ngIf=\"perms.edit\"><a class=\"nav-link\" routerLink=\"edit\" routerLinkActive=\"active\">Edit</a></li>\n  <li class=\"nav-item\" routerLinkActive=\"active\" *ngIf=\"perms.delete\"><a class=\"nav-link\" routerLink=\"delete\" routerLinkActive=\"active\"><span class=\"fa fa-trash bi bi-trash\"></span></a></li>\n</ul>\n<router-outlet></router-outlet>\n" }]
+        }], ctorParameters: function () { return [{ type: FormioResourceService }, { type: i2.ActivatedRoute }, { type: i1.FormioAuthService }, { type: i2.Router }]; } });
 
 class FormioResourceViewComponent {
     service;
@@ -298,10 +316,10 @@ class FormioResourceViewComponent {
     ngOnDestroy() {
         Formio.clearCache();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceViewComponent, deps: [{ token: FormioResourceService }, { token: FormioResourceConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: FormioResourceViewComponent, selector: "ng-component", ngImport: i0, template: "<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [hideComponents]=\"config.parents\"\n  [readOnly]=\"true\"\n></formio>\n", dependencies: [{ kind: "component", type: i1$1.FormioComponent, selector: "formio" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceViewComponent, deps: [{ token: FormioResourceService }, { token: FormioResourceConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: FormioResourceViewComponent, selector: "ng-component", ngImport: i0, template: "<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [hideComponents]=\"config.parents\"\n  [readOnly]=\"true\"\n></formio>\n", dependencies: [{ kind: "component", type: i1$1.FormioComponent, selector: "formio" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceViewComponent, decorators: [{
             type: Component,
             args: [{ template: "<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [hideComponents]=\"config.parents\"\n  [readOnly]=\"true\"\n></formio>\n" }]
         }], ctorParameters: function () { return [{ type: FormioResourceService }, { type: FormioResourceConfig }]; } });
@@ -333,10 +351,10 @@ class FormioResourceEditComponent {
     ngOnDestroy() {
         Formio.clearCache();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceEditComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: FormioResourceConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: FormioResourceEditComponent, selector: "ng-component", ngImport: i0, template: "<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [error]=\"triggerError\"\n  [submitDone]=\"onSubmitDone\"\n  (submit)=\"onSubmit($event)\"\n></formio>\n", dependencies: [{ kind: "component", type: i1$1.FormioComponent, selector: "formio" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceEditComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: FormioResourceConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: FormioResourceEditComponent, selector: "ng-component", ngImport: i0, template: "<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [error]=\"triggerError\"\n  [submitDone]=\"onSubmitDone\"\n  (submit)=\"onSubmit($event)\"\n></formio>\n", dependencies: [{ kind: "component", type: i1$1.FormioComponent, selector: "formio" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceEditComponent, decorators: [{
             type: Component,
             args: [{ template: "<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [error]=\"triggerError\"\n  [submitDone]=\"onSubmitDone\"\n  (submit)=\"onSubmit($event)\"\n></formio>\n" }]
         }], ctorParameters: function () { return [{ type: FormioResourceService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: FormioResourceConfig }]; } });
@@ -358,10 +376,10 @@ class FormioResourceDeleteComponent {
     onCancel() {
         this.router.navigate(['../', 'view'], { relativeTo: this.route });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceDeleteComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: FormioResourceDeleteComponent, selector: "ng-component", ngImport: i0, template: "<h3>Are you sure you wish to delete this record?</h3>\n<div class=\"btn-toolbar\">\n  <button type=\"button\" (click)=\"onDelete()\" class=\"btn btn-danger\" style=\"margin-right: 10px;\">Yes</button>\n  <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-danger\">No</button>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceDeleteComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: FormioResourceDeleteComponent, selector: "ng-component", ngImport: i0, template: "<h3>Are you sure you wish to delete this record?</h3>\n<div class=\"btn-toolbar\">\n  <button type=\"button\" (click)=\"onDelete()\" class=\"btn btn-danger\" style=\"margin-right: 10px;\">Yes</button>\n  <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-danger\">No</button>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceDeleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceDeleteComponent, decorators: [{
             type: Component,
             args: [{ template: "<h3>Are you sure you wish to delete this record?</h3>\n<div class=\"btn-toolbar\">\n  <button type=\"button\" (click)=\"onDelete()\" class=\"btn btn-danger\" style=\"margin-right: 10px;\">Yes</button>\n  <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-danger\">No</button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: FormioResourceService }, { type: i2.ActivatedRoute }, { type: i2.Router }]; } });
@@ -382,7 +400,7 @@ class FormioResourceCreateComponent {
         this.onSuccess = new EventEmitter();
     }
     ngOnInit() {
-        this.service.setContext(this.route);
+        this.service.init(this.route);
     }
     onSubmit(submission) {
         this.service
@@ -394,12 +412,12 @@ class FormioResourceCreateComponent {
         })
             .catch((err) => this.onError.emit(err));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceCreateComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: FormioResourceConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: FormioResourceCreateComponent, selector: "ng-component", ngImport: i0, template: "<h3 *ngIf=\"service.form\" style=\"margin-top:0;\">\n  <a routerLink=\"../\" class=\"back-button\">\n    <em class=\"fa fa-chevron-left glyphicon glyphicon-chevron-left bi bi-chevron-left\"></em>\n  </a> | New {{ service.form.title }}\n</h3>\n<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [refresh]=\"service.refresh\"\n  [error]=\"onError\"\n  [success]=\"onSuccess\"\n  (submit)=\"onSubmit($event)\"\n></formio>\n", styles: [".back-button{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.FormioComponent, selector: "formio" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceCreateComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: FormioResourceConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: FormioResourceCreateComponent, selector: "ng-component", ngImport: i0, template: "<h3 *ngIf=\"service.form\" style=\"margin-top:0;\">\n  <a routerLink=\"../\" class=\"back-button\">\n    <em class=\"fa fa-chevron-left bi bi-chevron-left\"></em>\n  </a> | New {{ service.form.title }}\n</h3>\n<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [refresh]=\"service.refresh\"\n  [error]=\"onError\"\n  [success]=\"onSuccess\"\n  (submit)=\"onSubmit($event)\"\n></formio>\n", styles: [".back-button{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.FormioComponent, selector: "formio" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceCreateComponent, decorators: [{
             type: Component,
-            args: [{ template: "<h3 *ngIf=\"service.form\" style=\"margin-top:0;\">\n  <a routerLink=\"../\" class=\"back-button\">\n    <em class=\"fa fa-chevron-left glyphicon glyphicon-chevron-left bi bi-chevron-left\"></em>\n  </a> | New {{ service.form.title }}\n</h3>\n<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [refresh]=\"service.refresh\"\n  [error]=\"onError\"\n  [success]=\"onSuccess\"\n  (submit)=\"onSubmit($event)\"\n></formio>\n", styles: [".back-button{font-size:.8em}\n"] }]
+            args: [{ template: "<h3 *ngIf=\"service.form\" style=\"margin-top:0;\">\n  <a routerLink=\"../\" class=\"back-button\">\n    <em class=\"fa fa-chevron-left bi bi-chevron-left\"></em>\n  </a> | New {{ service.form.title }}\n</h3>\n<formio\n  [form]=\"service.form\"\n  [submission]=\"service.resource\"\n  [refresh]=\"service.refresh\"\n  [error]=\"onError\"\n  [success]=\"onSuccess\"\n  (submit)=\"onSubmit($event)\"\n></formio>\n", styles: [".back-button{font-size:.8em}\n"] }]
         }], ctorParameters: function () { return [{ type: FormioResourceService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: FormioResourceConfig }]; } });
 
 class FormioResourceIndexComponent {
@@ -421,9 +439,8 @@ class FormioResourceIndexComponent {
         this.ngZone = ngZone;
     }
     ngOnInit() {
-        this.gridQuery = {};
-        this.service.setContext(this.route);
-        this.service.formLoaded.then(() => {
+        this.service.init(this.route).then(() => {
+            this.gridQuery = {};
             if (this.service &&
                 this.config.parents &&
                 this.config.parents.length) {
@@ -437,13 +454,13 @@ class FormioResourceIndexComponent {
                     // Set the source to load the grid.
                     this.gridSrc = this.service.formUrl;
                     this.createText = `New ${this.service.form.title}`;
+                    this.cdr.detectChanges();
                 });
             }
             else if (this.service.formUrl) {
                 this.gridSrc = this.service.formUrl;
                 this.createText = `New ${this.service.form.title}`;
             }
-            this.cdr.detectChanges();
         });
     }
     onSelect(row) {
@@ -456,10 +473,10 @@ class FormioResourceIndexComponent {
             this.router.navigate(['new'], { relativeTo: this.route });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceIndexComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: FormioResourceConfig }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: FormioResourceIndexComponent, selector: "ng-component", ngImport: i0, template: "<formio-alerts [alerts]=\"service.alerts\"></formio-alerts>\n<formio-grid\n  [src]=\"gridSrc\"\n  [query]=\"gridQuery\"\n  [onForm]=\"service.formLoaded\"\n  (rowSelect)=\"onSelect($event)\"\n  (error)=\"service.onError($event)\"\n  (createItem)=\"onCreateItem()\"\n  [createText]=\"createText\"\n></formio-grid>\n", dependencies: [{ kind: "component", type: i1$1.FormioAlertsComponent, selector: "formio-alerts", inputs: ["alerts"], outputs: ["focusComponent"] }, { kind: "component", type: i5.FormioGridComponent, selector: "formio-grid", inputs: ["footerPosition", "src", "items", "onForm", "query", "refresh", "columns", "gridType", "size", "components", "formio", "label", "createText", "isActionAllowed"], outputs: ["select", "rowSelect", "rowAction", "createItem", "error"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceIndexComponent, deps: [{ token: FormioResourceService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: FormioResourceConfig }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: FormioResourceIndexComponent, selector: "ng-component", ngImport: i0, template: "<formio-alerts [alerts]=\"service.alerts\"></formio-alerts>\n<formio-grid\n  [src]=\"gridSrc\"\n  [query]=\"gridQuery\"\n  [onForm]=\"service.formLoaded\"\n  (rowSelect)=\"onSelect($event)\"\n  (error)=\"service.onError($event)\"\n  (createItem)=\"onCreateItem()\"\n  [createText]=\"createText\"\n></formio-grid>\n", dependencies: [{ kind: "component", type: i1$1.FormioAlertsComponent, selector: "formio-alerts", inputs: ["alerts"], outputs: ["focusComponent"] }, { kind: "component", type: i5.FormioGridComponent, selector: "formio-grid", inputs: ["footerPosition", "src", "items", "onForm", "query", "refresh", "columns", "gridType", "size", "components", "formio", "label", "createText", "isActionAllowed"], outputs: ["select", "rowSelect", "rowAction", "createItem", "error"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResourceIndexComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResourceIndexComponent, decorators: [{
             type: Component,
             args: [{ template: "<formio-alerts [alerts]=\"service.alerts\"></formio-alerts>\n<formio-grid\n  [src]=\"gridSrc\"\n  [query]=\"gridQuery\"\n  [onForm]=\"service.formLoaded\"\n  (rowSelect)=\"onSelect($event)\"\n  (error)=\"service.onError($event)\"\n  (createItem)=\"onCreateItem()\"\n  [createText]=\"createText\"\n></formio-grid>\n" }]
         }], ctorParameters: function () { return [{ type: FormioResourceService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: FormioResourceConfig }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; } });
@@ -507,8 +524,8 @@ class FormioResource {
     static forRoot(config) {
         return extendRouter(FormioResource, config, FormioResourceRoutes);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResource, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.5", ngImport: i0, type: FormioResource, declarations: [FormioResourceComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResource, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: FormioResource, declarations: [FormioResourceComponent,
             FormioResourceCreateComponent,
             FormioResourceIndexComponent,
             FormioResourceViewComponent,
@@ -517,14 +534,14 @@ class FormioResource {
             FormioModule,
             FormioGrid,
             RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResource, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResource, providers: [
             FormioAlerts
         ], imports: [CommonModule,
             FormioModule,
             FormioGrid,
             RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: FormioResource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FormioResource, decorators: [{
             type: NgModule,
             args: [{
                     imports: [