@valtimo/form-management 10.8.0 → 11.1.0

package/{fesm2020 → fesm2022}/valtimo-form-management.mjs

@@ -2,26 +2,24 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, Inject, EventEmitter, ViewChild, Input, Output, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import * as i2 from '@valtimo/config';
-import { ROLE_ADMIN } from '@valtimo/config';
+import { ROLE_ADMIN, RouterUtils } from '@valtimo/config';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i2$1 from '@valtimo/components';
-import { FormIoModule, WidgetModule, ListModule, DropzoneModule, ModalModule as ModalModule$2, ValtimoCdsModalDirectiveModule } from '@valtimo/components';
-import * as i2$2 from '@ngx-translate/core';
+import * as i3$1 from '@valtimo/components';
+import { PendingChangesComponent, pendingChangesGuard, FormIoModule, WidgetModule, ListModule, DropzoneModule, VModalModule, ModalModule as ModalModule$1, InputModule, TitleModule, ButtonModule, FormModule, ValtimoCdsModalDirectiveModule } from '@valtimo/components';
+import * as i2$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { AuthGuardService } from '@valtimo/security';
-import * as i2$3 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormControl, Validators, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { map, combineLatest, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { take, first } from 'rxjs/operators';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { BaseModal } from 'carbon-components-angular/modal';
-import * as i1$1 from '@valtimo/user-interface';
-import { ModalModule as ModalModule$1, InputModule, TitleModule, ButtonModule, FormModule } from '@valtimo/user-interface';
-import * as i7 from 'carbon-components-angular';
+import * as i6 from 'carbon-components-angular';
 import { ModalModule, InputModule as InputModule$1, PlaceholderModule, ButtonModule as ButtonModule$1 } from 'carbon-components-angular';
-import * as i1$2 from '@valtimo/document';
+import * as i1$1 from '@valtimo/document';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 /*
@@ -66,10 +64,10 @@ class FormManagementService {
     deleteFormDefinition(formDefinitionId) {
         return this.http.delete(`${this.valtimoApiConfig.endpointUri}v1/form-management/${formDefinitionId}`);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementService, providedIn: 'root' }); }
 }
-FormManagementService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-FormManagementService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -92,6 +90,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * limitations under the License.
  */
 class FormManagementListComponent {
+    paginationClicked(page) {
+        this.pageParam = page - 1;
+        this.loadFormDefinitions();
+    }
     constructor(formManagementService, router) {
         this.formManagementService = formManagementService;
         this.router = router;
@@ -104,14 +106,9 @@ class FormManagementListComponent {
             collectionSize: 0,
             page: 1,
             size: 10,
-            maxPaginationItemSize: 5,
         };
         this.pageParam = 0;
     }
-    paginationClicked(page) {
-        this.pageParam = page - 1;
-        this.loadFormDefinitions();
-    }
     ngOnInit() { }
     paginationSet() {
         this.loadFormDefinitions();
@@ -132,10 +129,10 @@ class FormManagementListComponent {
     searchTermEntered(searchTerm) {
         this.loadFormDefinitions(searchTerm);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementListComponent, deps: [{ token: FormManagementService }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormManagementListComponent, selector: "valtimo-form-management-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-list\n  [items]=\"formDefinitions\"\n  [fields]=\"formDefinitionFields\"\n  [viewMode]=\"true\"\n  [isSearchable]=\"true\"\n  [pagination]=\"pagination\"\n  paginationIdentifier=\"formManagementList\"\n  (paginationClicked)=\"paginationClicked($event)\"\n  (paginationSet)=\"paginationSet()\"\n  (rowClicked)=\"editFormDefinition($event)\"\n  [header]=\"true\"\n  (search)=\"searchTermEntered($event)\"\n>\n  <div header>\n    <h3 class=\"list-header-title\">{{ 'Forms' | translate }}</h3>\n    <h5 class=\"list-header-description\">{{ 'Overview of all Forms' | translate }}</h5>\n  </div>\n</valtimo-list>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i3$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-FormManagementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementListComponent, deps: [{ token: FormManagementService }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
-FormManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormManagementListComponent, selector: "valtimo-form-management-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-list\n  [items]=\"formDefinitions\"\n  [fields]=\"formDefinitionFields\"\n  [viewMode]=\"true\"\n  [isSearchable]=\"true\"\n  [pagination]=\"pagination\"\n  paginationIdentifier=\"formManagementList\"\n  (paginationClicked)=\"paginationClicked($event)\"\n  (paginationSet)=\"paginationSet()\"\n  (rowClicked)=\"editFormDefinition($event)\"\n  [header]=\"true\"\n  (search)=\"searchTermEntered($event)\"\n>\n  <div header>\n    <h3 class=\"list-header-title\">{{ 'Forms' | translate }}</h3>\n    <h5 class=\"list-header-description\">{{ 'Overview of all Forms' | translate }}</h5>\n  </div>\n</valtimo-list>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i2$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-management-list', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-list\n  [items]=\"formDefinitions\"\n  [fields]=\"formDefinitionFields\"\n  [viewMode]=\"true\"\n  [isSearchable]=\"true\"\n  [pagination]=\"pagination\"\n  paginationIdentifier=\"formManagementList\"\n  (paginationClicked)=\"paginationClicked($event)\"\n  (paginationSet)=\"paginationSet()\"\n  (rowClicked)=\"editFormDefinition($event)\"\n  [header]=\"true\"\n  (search)=\"searchTermEntered($event)\"\n>\n  <div header>\n    <h3 class=\"list-header-title\">{{ 'Forms' | translate }}</h3>\n    <h5 class=\"list-header-description\">{{ 'Overview of all Forms' | translate }}</h5>\n  </div>\n</valtimo-list>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: function () { return [{ type: FormManagementService }, { type: i3.Router }]; } });
@@ -158,10 +155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class FormManagementComponent {
     constructor() { }
     ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormManagementComponent, selector: "valtimo-form-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button\n          [routerLink]=\"'create'\"\n          [queryParams]=\"{upload: 'true'}\"\n          class=\"btn btn-secondary btn-space\"\n        >\n          <i class=\"icon mdi mdi-upload mr-1\"></i>\n          {{ 'Upload' | translate }}\n        </button>\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus mr-1\"></i>\n          <span>{{ 'Create new Form' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-form-management-list></valtimo-form-management-list>\n    </valtimo-widget>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: FormManagementListComponent, selector: "valtimo-form-management-list" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-FormManagementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormManagementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormManagementComponent, selector: "valtimo-form-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button\n          [routerLink]=\"'create'\"\n          [queryParams]=\"{upload: 'true'}\"\n          class=\"btn btn-secondary btn-space\"\n        >\n          <i class=\"icon mdi mdi-upload mr-1\"></i>\n          {{ 'Upload' | translate }}\n        </button>\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus mr-1\"></i>\n          <span>{{ 'Create new Form' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-form-management-list></valtimo-form-management-list>\n    </valtimo-widget>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: FormManagementListComponent, selector: "valtimo-form-management-list" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-management', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button\n          [routerLink]=\"'create'\"\n          [queryParams]=\"{upload: 'true'}\"\n          class=\"btn btn-secondary btn-space\"\n        >\n          <i class=\"icon mdi mdi-upload mr-1\"></i>\n          {{ 'Upload' | translate }}\n        </button>\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus mr-1\"></i>\n          <span>{{ 'Create new Form' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-form-management-list></valtimo-form-management-list>\n    </valtimo-widget>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: function () { return []; } });
@@ -253,13 +250,13 @@ class FormManagementCreateComponent {
             this.alertService.error('Error creating new Form');
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementCreateComponent, deps: [{ token: FormManagementService }, { token: i2$2.FormBuilder }, { token: i3.Router }, { token: i3$1.AlertService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormManagementCreateComponent, selector: "valtimo-form-management-create", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"createFormDefinition()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">{{\n                'formManagement.name' | translate\n              }}</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"name\"\n                  formControlName=\"name\"\n                  class=\"form-control\"\n                  placeholder=\"Form definition name\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.name.touched && formControls.name.valid,\n                    'is-invalid': formControls.name.touched && formControls.name.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.name.errors.required\">\n                    {{ 'formManagement.nameIsRequired' | translate }}\n                  </div>\n                  <div *ngIf=\"formControls.name.errors.duplicate\">\n                    {{ 'formManagement.nameIsInUse' | translate }}\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/form-management'\" class=\"btn btn-space btn-default\">{{\n                  'formManagement.back' | translate\n                }}</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  {{ 'formManagement.reset' | translate }}\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  {{ 'formManagement.submit' | translate }}\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-FormManagementCreateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementCreateComponent, deps: [{ token: FormManagementService }, { token: i2$3.FormBuilder }, { token: i3.Router }, { token: i2$1.AlertService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-FormManagementCreateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormManagementCreateComponent, selector: "valtimo-form-management-create", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"createFormDefinition()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">{{\n                'formManagement.name' | translate\n              }}</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"name\"\n                  formControlName=\"name\"\n                  class=\"form-control\"\n                  placeholder=\"Form definition name\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.name.touched && formControls.name.valid,\n                    'is-invalid': formControls.name.touched && formControls.name.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.name.errors.required\">\n                    {{ 'formManagement.nameIsRequired' | translate }}\n                  </div>\n                  <div *ngIf=\"formControls.name.errors.duplicate\">\n                    {{ 'formManagement.nameIsInUse' | translate }}\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/form-management'\" class=\"btn btn-space btn-default\">{{\n                  'formManagement.back' | translate\n                }}</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  {{ 'formManagement.reset' | translate }}\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  {{ 'formManagement.submit' | translate }}\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-management-create', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"createFormDefinition()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">{{\n                'formManagement.name' | translate\n              }}</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"name\"\n                  formControlName=\"name\"\n                  class=\"form-control\"\n                  placeholder=\"Form definition name\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.name.touched && formControls.name.valid,\n                    'is-invalid': formControls.name.touched && formControls.name.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.name.errors.required\">\n                    {{ 'formManagement.nameIsRequired' | translate }}\n                  </div>\n                  <div *ngIf=\"formControls.name.errors.duplicate\">\n                    {{ 'formManagement.nameIsInUse' | translate }}\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/form-management'\" class=\"btn btn-space btn-default\">{{\n                  'formManagement.back' | translate\n                }}</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  {{ 'formManagement.reset' | translate }}\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  {{ 'formManagement.submit' | translate }}\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: function () { return [{ type: FormManagementService }, { type: i2$3.FormBuilder }, { type: i3.Router }, { type: i2$1.AlertService }, { type: i3.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: FormManagementService }, { type: i2$2.FormBuilder }, { type: i3.Router }, { type: i3$1.AlertService }, { type: i3.ActivatedRoute }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -323,16 +320,16 @@ class FormManagementDuplicateComponent extends BaseModal {
     getDefaultName() {
         return this.formToDuplicate.name + '-duplicate';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementDuplicateComponent, deps: [{ token: 'formToDuplicate' }, { token: i3$1.ModalService }, { token: FormManagementService }, { token: i3$1.AlertService }, { token: i3.ActivatedRoute }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormManagementDuplicateComponent, selector: "valtimo-form-management-duplicate-modal", usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-modal\n  valtimoCdsModal\n  [open]=\"open\"\n  (overlaySelected)=\"closeModal()\"\n  [formGroup]=\"duplicateForm\"\n>\n  <cds-modal-header (closeSelect)=\"closeModal()\">{{\n    'formManagement.duplicate' | translate\n  }}</cds-modal-header>\n  <section class=\"bx--modal-content p-2\">\n    <cds-label labelState=\"error\">\n      {{ 'formManagement.name' | translate }}\n      <input cdsText formControlName=\"duplicateFormName\" [invalid]=\"duplicateFormName.invalid\" />\n    </cds-label>\n    <div\n      *ngIf=\"duplicateFormName.invalid && (duplicateFormName.dirty || duplicateFormName.touched)\"\n      class=\"bg-warning text-black mb-0 p-2 pl-3 pr-3\"\n      role=\"alert\"\n    >\n      <div *ngIf=\"duplicateFormName.errors.required\">\n        {{ 'formManagement.nameIsRequired' | translate }}\n      </div>\n      <div *ngIf=\"duplicateFormName.errors.duplicate\">\n        {{ 'formManagement.nameIsInUse' | translate }}\n      </div>\n    </div>\n  </section>\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      [attr.modal-primary-focus]=\"true\"\n      modal-primary-focus\n      (click)=\"duplicate()\"\n      [disabled]=\"duplicateForm.invalid\"\n    >\n      {{ 'formManagement.submit' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i6.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i6.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "component", type: i6.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i6.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-FormManagementDuplicateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementDuplicateComponent, deps: [{ token: 'formToDuplicate' }, { token: i1$1.ModalService }, { token: FormManagementService }, { token: i2$1.AlertService }, { token: i3.ActivatedRoute }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
-FormManagementDuplicateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormManagementDuplicateComponent, selector: "valtimo-form-management-duplicate-modal", usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-modal\n  valtimoCdsModal\n  [open]=\"open\"\n  (overlaySelected)=\"closeModal()\"\n  [formGroup]=\"duplicateForm\"\n>\n  <cds-modal-header (closeSelect)=\"closeModal()\">{{\n    'formManagement.duplicate' | translate\n  }}</cds-modal-header>\n  <section class=\"bx--modal-content p-2\">\n    <cds-label labelState=\"error\">\n      {{ 'formManagement.name' | translate }}\n      <input cdsText formControlName=\"duplicateFormName\" [invalid]=\"duplicateFormName.invalid\" />\n    </cds-label>\n    <div\n      *ngIf=\"duplicateFormName.invalid && (duplicateFormName.dirty || duplicateFormName.touched)\"\n      class=\"bg-warning text-black mb-0 p-2 pl-3 pr-3\"\n      role=\"alert\"\n    >\n      <div *ngIf=\"duplicateFormName.errors.required\">\n        {{ 'formManagement.nameIsRequired' | translate }}\n      </div>\n      <div *ngIf=\"duplicateFormName.errors.duplicate\">\n        {{ 'formManagement.nameIsInUse' | translate }}\n      </div>\n    </div>\n  </section>\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      [attr.modal-primary-focus]=\"true\"\n      modal-primary-focus\n      (click)=\"duplicate()\"\n      [disabled]=\"duplicateForm.invalid\"\n    >\n      {{ 'formManagement.submit' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i7.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i7.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "component", type: i7.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i7.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i7.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementDuplicateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementDuplicateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-management-duplicate-modal', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-modal\n  valtimoCdsModal\n  [open]=\"open\"\n  (overlaySelected)=\"closeModal()\"\n  [formGroup]=\"duplicateForm\"\n>\n  <cds-modal-header (closeSelect)=\"closeModal()\">{{\n    'formManagement.duplicate' | translate\n  }}</cds-modal-header>\n  <section class=\"bx--modal-content p-2\">\n    <cds-label labelState=\"error\">\n      {{ 'formManagement.name' | translate }}\n      <input cdsText formControlName=\"duplicateFormName\" [invalid]=\"duplicateFormName.invalid\" />\n    </cds-label>\n    <div\n      *ngIf=\"duplicateFormName.invalid && (duplicateFormName.dirty || duplicateFormName.touched)\"\n      class=\"bg-warning text-black mb-0 p-2 pl-3 pr-3\"\n      role=\"alert\"\n    >\n      <div *ngIf=\"duplicateFormName.errors.required\">\n        {{ 'formManagement.nameIsRequired' | translate }}\n      </div>\n      <div *ngIf=\"duplicateFormName.errors.duplicate\">\n        {{ 'formManagement.nameIsInUse' | translate }}\n      </div>\n    </div>\n  </section>\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      [attr.modal-primary-focus]=\"true\"\n      modal-primary-focus\n      (click)=\"duplicate()\"\n      [disabled]=\"duplicateForm.invalid\"\n    >\n      {{ 'formManagement.submit' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['formToDuplicate']
-                }] }, { type: i1$1.ModalService }, { type: FormManagementService }, { type: i2$1.AlertService }, { type: i3.ActivatedRoute }, { type: i3.Router }]; } });
+                }] }, { type: i3$1.ModalService }, { type: FormManagementService }, { type: i3$1.AlertService }, { type: i3.ActivatedRoute }, { type: i3.Router }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -461,13 +458,13 @@ class FormManagementUploadComponent {
     enable() {
         this.disabled$.next(false);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementUploadComponent, deps: [{ token: i1$1.DocumentService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormManagementUploadComponent, selector: "valtimo-form-management-upload", inputs: { show$: "show$" }, outputs: { definitionUploaded: "definitionUploaded" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["uploadFormDefinitionModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #uploadFormDefinitionModal\n  [title]=\"'uploadFormDefinition' | translate\"\n  showFooter=\"true\"\n>\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n      [clear$]=\"clear$\"\n      (fileSelected)=\"setFile($event)\"\n      [disabled]=\"disabled$ | async\"\n      [subtitle]=\"'dropzone.formJsonDocDef' | translate\"\n      [externalError$]=\"error$\"\n      [maxFiles]=\"1\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else disabledUpload\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #disabledUpload>\n  <button [disabled]=\"true\" class=\"btn btn-primary\">\n    <i class=\"icon mdi mdi-upload mr-1\"></i>\n    {{ 'Upload' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-FormManagementUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementUploadComponent, deps: [{ token: i1$2.DocumentService }, { token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-FormManagementUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormManagementUploadComponent, selector: "valtimo-form-management-upload", inputs: { show$: "show$" }, outputs: { definitionUploaded: "definitionUploaded" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["uploadFormDefinitionModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #uploadFormDefinitionModal\n  [title]=\"'uploadFormDefinition' | translate\"\n  showFooter=\"true\"\n>\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n      [clear$]=\"clear$\"\n      (fileSelected)=\"setFile($event)\"\n      [disabled]=\"disabled$ | async\"\n      [subtitle]=\"'dropzone.formJsonDocDef' | translate\"\n      [externalError$]=\"error$\"\n      [maxFiles]=\"1\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else disabledUpload\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #disabledUpload>\n  <button [disabled]=\"true\" class=\"btn btn-primary\">\n    <i class=\"icon mdi mdi-upload mr-1\"></i>\n    {{ 'Upload' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i2$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-management-upload', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #uploadFormDefinitionModal\n  [title]=\"'uploadFormDefinition' | translate\"\n  showFooter=\"true\"\n>\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n      [clear$]=\"clear$\"\n      (fileSelected)=\"setFile($event)\"\n      [disabled]=\"disabled$ | async\"\n      [subtitle]=\"'dropzone.formJsonDocDef' | translate\"\n      [externalError$]=\"error$\"\n      [maxFiles]=\"1\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else disabledUpload\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #disabledUpload>\n  <button [disabled]=\"true\" class=\"btn btn-primary\">\n    <i class=\"icon mdi mdi-upload mr-1\"></i>\n    {{ 'Upload' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.DocumentService }, { type: i2$2.TranslateService }]; }, propDecorators: { modal: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2$1.TranslateService }]; }, propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['uploadFormDefinitionModal']
             }], show$: [{
@@ -491,39 +488,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FormManagementEditComponent {
-    constructor(formManagementService, alertService, route, router, modalService, pageTitleService) {
-        this.formManagementService = formManagementService;
+class FormManagementEditComponent extends PendingChangesComponent {
+    constructor(modalService, translateService, alertService, formManagementService, pageTitleService, route, router) {
+        super(modalService, translateService);
+        this.modalService = modalService;
+        this.translateService = translateService;
         this.alertService = alertService;
+        this.formManagementService = formManagementService;
+        this.pageTitleService = pageTitleService;
         this.route = route;
         this.router = router;
-        this.modalService = modalService;
-        this.pageTitleService = pageTitleService;
-        this.showModal$ = new BehaviorSubject(false);
-        this.reloading$ = new BehaviorSubject(false);
         this.modifiedFormDefinition = null;
         this.formDefinition = null;
-        this.alertSub = Subscription.EMPTY;
-        this.formDefinitionId = null;
+        this.showModal$ = new BehaviorSubject(false);
+        this.reloading$ = new BehaviorSubject(false);
+        this._alertSub = Subscription.EMPTY;
+        this._formDefinitionId = null;
     }
     ngOnInit() {
+        this.pageTitleService.disableReset();
         this.loadFormDefinition();
         this.checkToOpenUploadModal();
     }
     ngOnDestroy() {
-        this.alertSub.unsubscribe();
+        this._alertSub.unsubscribe();
     }
     loadFormDefinition() {
-        this.formDefinitionId = this.route.snapshot.paramMap.get('id');
-        this.formManagementService.getFormDefinition(this.formDefinitionId).subscribe(formDefinition => {
-            this.formDefinition = formDefinition;
-            this.pageTitleService.setCustomPageTitle(formDefinition.name);
-        }, () => {
-            this.alertService.error('Error retrieving Form Definition');
+        this._formDefinitionId = this.route.snapshot.paramMap.get('id');
+        this.formManagementService.getFormDefinition(this._formDefinitionId ?? '').subscribe({
+            next: formDefinition => {
+                this.formDefinition = formDefinition;
+                this.pageTitleService.setCustomPageTitle(formDefinition.name);
+            },
+            error: () => {
+                this.alertService.error('Error retrieving Form Definition');
+            },
         });
     }
     modifyFormDefinition() {
-        const form = JSON.stringify(this.modifiedFormDefinition != null
+        if (!this.formDefinition) {
+            return;
+        }
+        this.pendingChanges = false;
+        const form = JSON.stringify(this.modifiedFormDefinition !== null
             ? this.modifiedFormDefinition
             : this.formDefinition.formDefinition);
         const request = {
@@ -531,18 +538,22 @@ class FormManagementEditComponent {
             name: this.formDefinition.name,
             formDefinition: form,
         };
-        this.formManagementService.modifyFormDefinition(request).subscribe(() => {
-            this.router.navigate(['/form-management']);
-            this.alertService.success('Form deployed');
-        }, err => {
-            this.alertService.error('Error deploying Form');
+        this.formManagementService.modifyFormDefinition(request).subscribe({
+            next: () => {
+                this.router.navigate(['/form-management']);
+                this.alertService.success('Form deployed');
+            },
+            error: () => {
+                this.alertService.error('Error deploying Form');
+            },
         });
     }
     formBuilderChanged(event) {
+        this.pendingChanges = true;
         this.modifiedFormDefinition = event.form;
     }
     delete() {
-        if (!this.alertSub.closed) {
+        if (!this._alertSub.closed) {
             return;
         }
         const mssg = 'Delete Form?';
@@ -559,7 +570,7 @@ class FormManagementEditComponent {
             },
         ];
         this.alertService.notification(mssg, confirmations);
-        this.alertSub = this.alertService
+        this._alertSub = this.alertService
             .getAlertConfirmChangeEmitter()
             .pipe(first())
             .subscribe(alert => {
@@ -569,14 +580,23 @@ class FormManagementEditComponent {
         });
     }
     deleteFormDefinition() {
-        this.formManagementService.deleteFormDefinition(this.formDefinition.id).subscribe(() => {
-            this.router.navigate(['/form-management']);
-            this.alertService.success('Form deleted');
-        }, err => {
-            this.alertService.error('Error deleting Form');
+        if (!this.formDefinition) {
+            return;
+        }
+        this.formManagementService.deleteFormDefinition(this.formDefinition.id).subscribe({
+            next: () => {
+                this.router.navigate(['/form-management']);
+                this.alertService.success('Form deleted');
+            },
+            error: () => {
+                this.alertService.error('Error deleting Form');
+            },
         });
     }
     downloadFormDefinition() {
+        if (!this.formDefinition) {
+            return;
+        }
         const file = new Blob([JSON.stringify(this.formDefinition.formDefinition)], {
             type: 'text/json',
         });
@@ -603,16 +623,25 @@ class FormManagementEditComponent {
         const definition = JSON.parse(formDefinition);
         if (!definition?.components) {
             this.reloading$.next(false);
-            this.alertService.error('Invalid JSON. Missing form.io JSON field "components".');
+            this.alertService.error('Invalid form.io. Missing JSON field "components".');
+            return;
         }
-        else {
-            const components = definition.components;
-            const currentDefinition = this.modifiedFormDefinition || this.formDefinition.formDefinition;
-            const newDefinition = { ...currentDefinition, ...(components && { components }) };
-            this.modifiedFormDefinition = newDefinition;
-            this.formDefinition.formDefinition = newDefinition;
-            this.reloading$.next(false);
+        if (!this.formDefinition) {
+            return;
+        }
+        const components = definition.components;
+        const currentDefinition = this.modifiedFormDefinition || this.formDefinition.formDefinition;
+        const newDefinition = { ...currentDefinition, ...(components && { components }) };
+        this.modifiedFormDefinition = newDefinition;
+        this.formDefinition.formDefinition = newDefinition;
+        this.reloading$.next(false);
+    }
+    onConfirmRedirect() {
+        const cancelButton = document.querySelector('button[ref="cancelButton"]');
+        if (!cancelButton) {
+            return;
         }
+        cancelButton.click();
     }
     checkToOpenUploadModal() {
         this.route.queryParams.pipe(take(1)).subscribe(params => {
@@ -621,13 +650,13 @@ class FormManagementEditComponent {
             }
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementEditComponent, deps: [{ token: i6.ModalService }, { token: i2$1.TranslateService }, { token: i3$1.AlertService }, { token: FormManagementService }, { token: i3$1.PageTitleService }, { token: i3.ActivatedRoute }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormManagementEditComponent, selector: "valtimo-form-management-edit", usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\" *ngIf=\"formDefinition\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-primary btn-space\" (click)=\"downloadFormDefinition()\">\n        <i class=\"icon mdi mdi-download mr-1\"></i>\n        {{ 'Download' | translate }}\n      </button>\n      <button\n        class=\"btn btn-secondary btn-space\"\n        (click)=\"showUploadModal()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload' | translate }}\n      </button>\n      <button\n        class=\"btn btn-danger btn-space\"\n        (click)=\"delete()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-delete mr-1\"></i>{{ 'formManagement.delete' | translate }}\n      </button>\n      <button\n        class=\"btn btn-success btn-space\"\n        (click)=\"modifyFormDefinition()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload mr-1\"></i>{{ 'formManagement.deploy' | translate }}\n      </button>\n      <button class=\"btn btn-secondary btn-space\" (click)=\"showDuplicateModal()\">\n        <i class=\"icon mdi mdi-content-duplicate mr-1\"></i\n        >{{ 'formManagement.duplicate' | translate }}\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <div class=\"bg-light formbuilder-header overflow-auto\">\n      <h3 class=\"formbuilder-title\">\n        <div *ngIf=\"formDefinition.readOnly\" class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">{{\n            'formManagement.readOnly' | translate\n          }}</span>\n        </div>\n      </h3>\n    </div>\n    <ng-container *ngIf=\"(reloading$ | async) === false\">\n      <valtimo-form-io-builder\n        [form]=\"formDefinition.formDefinition\"\n        (change)=\"formBuilderChanged($event)\"\n      ></valtimo-form-io-builder>\n    </ng-container>\n  </div>\n</div>\n\n<valtimo-form-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"setFormDefinition($event)\"\n></valtimo-form-management-upload>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.formbuilder .btn.formcomponent.drag-copy,.btn.formcomponent.gu-mirror{font-weight:400;background-color:silver;border-color:silver;color:#fff}.formbuilder .btn.formcomponent.drag-copy:hover,.formbuilder .btn.formcomponent.drag-copy:active,.btn.formcomponent.gu-mirror:hover,.btn.formcomponent.gu-mirror:active{box-shadow:none}.formbuilder .btn.formcomponent.drag-copy:active,.btn.formcomponent.gu-mirror:active{background-color:silver;border-color:silver}.formbuilder-header{padding-left:18px;padding-right:18px;font-size:18px;height:80px;border:1px solid #dee2e6;border-bottom:0}.formbuilder-header .formbuilder-title{margin-top:21px;margin-bottom:7px}.formbuilder-header .formbuilder-subtitle{margin-top:0;margin-bottom:12px}.formbuilder{background:white;padding:1rem;border:1px solid #dee2e6;margin-right:0!important;margin-left:0!important}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=false],.formbuilder .form-builder-panel .builder-group-button[aria-expanded=\"\"]{color:#a9a9a9}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=true]{color:#000}.formbuilder .drag-and-drop-alert{display:none}.formbuilder .formarea{padding:10px;border:solid 1px silver;background-color:#fff}.increase-size{font-size:1rem}\n"], dependencies: [{ kind: "component", type: i3$1.FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: ["form"], outputs: ["change"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormManagementUploadComponent, selector: "valtimo-form-management-upload", inputs: ["show$"], outputs: ["definitionUploaded"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-FormManagementEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementEditComponent, deps: [{ token: FormManagementService }, { token: i2$1.AlertService }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i7.ModalService }, { token: i2$1.PageTitleService }], target: i0.ɵɵFactoryTarget.Component });
-FormManagementEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormManagementEditComponent, selector: "valtimo-form-management-edit", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\" *ngIf=\"formDefinition\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-primary btn-space\" (click)=\"downloadFormDefinition()\">\n        <i class=\"icon mdi mdi-download mr-1\"></i>\n        {{ 'Download' | translate }}\n      </button>\n      <button\n        class=\"btn btn-secondary btn-space\"\n        (click)=\"showUploadModal()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload' | translate }}\n      </button>\n      <button\n        class=\"btn btn-danger btn-space\"\n        (click)=\"delete()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-delete mr-1\"></i>{{ 'formManagement.delete' | translate }}\n      </button>\n      <button\n        class=\"btn btn-success btn-space\"\n        (click)=\"modifyFormDefinition()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload mr-1\"></i>{{ 'formManagement.deploy' | translate }}\n      </button>\n      <button class=\"btn btn-secondary btn-space\" (click)=\"showDuplicateModal()\">\n        <i class=\"icon mdi mdi-content-duplicate mr-1\"></i\n        >{{ 'formManagement.duplicate' | translate }}\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <div class=\"bg-light formbuilder-header overflow-auto\">\n      <h3 class=\"formbuilder-title\">\n        <div *ngIf=\"formDefinition.readOnly\" class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">{{\n            'formManagement.readOnly' | translate\n          }}</span>\n        </div>\n      </h3>\n    </div>\n    <ng-container *ngIf=\"(reloading$ | async) === false\">\n      <valtimo-form-io-builder\n        [form]=\"formDefinition.formDefinition\"\n        (change)=\"formBuilderChanged($event)\"\n      ></valtimo-form-io-builder>\n    </ng-container>\n  </div>\n</div>\n\n<valtimo-form-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"setFormDefinition($event)\"\n></valtimo-form-management-upload>\n\n<cds-placeholder></cds-placeholder>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.formbuilder .btn.formcomponent.drag-copy,.btn.formcomponent.gu-mirror{font-weight:400;background-color:silver;border-color:silver;color:#fff}.formbuilder .btn.formcomponent.drag-copy:hover,.formbuilder .btn.formcomponent.drag-copy:active,.btn.formcomponent.gu-mirror:hover,.btn.formcomponent.gu-mirror:active{box-shadow:none}.formbuilder .btn.formcomponent.drag-copy:active,.btn.formcomponent.gu-mirror:active{background-color:silver;border-color:silver}.formbuilder-header{padding-left:18px;padding-right:18px;font-size:18px;height:80px;border:1px solid #dee2e6;border-bottom:0}.formbuilder-header .formbuilder-title{margin-top:21px;margin-bottom:7px}.formbuilder-header .formbuilder-subtitle{margin-top:0;margin-bottom:12px}.formbuilder{background:white;padding:1rem;border:1px solid #dee2e6;margin-right:0!important;margin-left:0!important}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=false],.formbuilder .form-builder-panel .builder-group-button[aria-expanded=\"\"]{color:#a9a9a9}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=true]{color:#000}.formbuilder .drag-and-drop-alert{display:none}.formbuilder .formarea{padding:10px;border:solid 1px silver;background-color:#fff}.increase-size{font-size:1rem}\n"], dependencies: [{ kind: "component", type: i2$1.FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: ["form"], outputs: ["change"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.Placeholder, selector: "cds-placeholder, ibm-placeholder", inputs: ["id"] }, { kind: "component", type: FormManagementUploadComponent, selector: "valtimo-form-management-upload", inputs: ["show$"], outputs: ["definitionUploaded"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-management-edit', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\" *ngIf=\"formDefinition\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-primary btn-space\" (click)=\"downloadFormDefinition()\">\n        <i class=\"icon mdi mdi-download mr-1\"></i>\n        {{ 'Download' | translate }}\n      </button>\n      <button\n        class=\"btn btn-secondary btn-space\"\n        (click)=\"showUploadModal()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload' | translate }}\n      </button>\n      <button\n        class=\"btn btn-danger btn-space\"\n        (click)=\"delete()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-delete mr-1\"></i>{{ 'formManagement.delete' | translate }}\n      </button>\n      <button\n        class=\"btn btn-success btn-space\"\n        (click)=\"modifyFormDefinition()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload mr-1\"></i>{{ 'formManagement.deploy' | translate }}\n      </button>\n      <button class=\"btn btn-secondary btn-space\" (click)=\"showDuplicateModal()\">\n        <i class=\"icon mdi mdi-content-duplicate mr-1\"></i\n        >{{ 'formManagement.duplicate' | translate }}\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <div class=\"bg-light formbuilder-header overflow-auto\">\n      <h3 class=\"formbuilder-title\">\n        <div *ngIf=\"formDefinition.readOnly\" class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">{{\n            'formManagement.readOnly' | translate\n          }}</span>\n        </div>\n      </h3>\n    </div>\n    <ng-container *ngIf=\"(reloading$ | async) === false\">\n      <valtimo-form-io-builder\n        [form]=\"formDefinition.formDefinition\"\n        (change)=\"formBuilderChanged($event)\"\n      ></valtimo-form-io-builder>\n    </ng-container>\n  </div>\n</div>\n\n<valtimo-form-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"setFormDefinition($event)\"\n></valtimo-form-management-upload>\n\n<cds-placeholder></cds-placeholder>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.formbuilder .btn.formcomponent.drag-copy,.btn.formcomponent.gu-mirror{font-weight:400;background-color:silver;border-color:silver;color:#fff}.formbuilder .btn.formcomponent.drag-copy:hover,.formbuilder .btn.formcomponent.drag-copy:active,.btn.formcomponent.gu-mirror:hover,.btn.formcomponent.gu-mirror:active{box-shadow:none}.formbuilder .btn.formcomponent.drag-copy:active,.btn.formcomponent.gu-mirror:active{background-color:silver;border-color:silver}.formbuilder-header{padding-left:18px;padding-right:18px;font-size:18px;height:80px;border:1px solid #dee2e6;border-bottom:0}.formbuilder-header .formbuilder-title{margin-top:21px;margin-bottom:7px}.formbuilder-header .formbuilder-subtitle{margin-top:0;margin-bottom:12px}.formbuilder{background:white;padding:1rem;border:1px solid #dee2e6;margin-right:0!important;margin-left:0!important}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=false],.formbuilder .form-builder-panel .builder-group-button[aria-expanded=\"\"]{color:#a9a9a9}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=true]{color:#000}.formbuilder .drag-and-drop-alert{display:none}.formbuilder .formarea{padding:10px;border:solid 1px silver;background-color:#fff}.increase-size{font-size:1rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormManagementService }, { type: i2$1.AlertService }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i7.ModalService }, { type: i2$1.PageTitleService }]; } });
+            args: [{ selector: 'valtimo-form-management-edit', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\" *ngIf=\"formDefinition\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-primary btn-space\" (click)=\"downloadFormDefinition()\">\n        <i class=\"icon mdi mdi-download mr-1\"></i>\n        {{ 'Download' | translate }}\n      </button>\n      <button\n        class=\"btn btn-secondary btn-space\"\n        (click)=\"showUploadModal()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload' | translate }}\n      </button>\n      <button\n        class=\"btn btn-danger btn-space\"\n        (click)=\"delete()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-delete mr-1\"></i>{{ 'formManagement.delete' | translate }}\n      </button>\n      <button\n        class=\"btn btn-success btn-space\"\n        (click)=\"modifyFormDefinition()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload mr-1\"></i>{{ 'formManagement.deploy' | translate }}\n      </button>\n      <button class=\"btn btn-secondary btn-space\" (click)=\"showDuplicateModal()\">\n        <i class=\"icon mdi mdi-content-duplicate mr-1\"></i\n        >{{ 'formManagement.duplicate' | translate }}\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <div class=\"bg-light formbuilder-header overflow-auto\">\n      <h3 class=\"formbuilder-title\">\n        <div *ngIf=\"formDefinition.readOnly\" class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">{{\n            'formManagement.readOnly' | translate\n          }}</span>\n        </div>\n      </h3>\n    </div>\n    <ng-container *ngIf=\"(reloading$ | async) === false\">\n      <valtimo-form-io-builder\n        [form]=\"formDefinition.formDefinition\"\n        (change)=\"formBuilderChanged($event)\"\n      ></valtimo-form-io-builder>\n    </ng-container>\n  </div>\n</div>\n\n<valtimo-form-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"setFormDefinition($event)\"\n></valtimo-form-management-upload>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.formbuilder .btn.formcomponent.drag-copy,.btn.formcomponent.gu-mirror{font-weight:400;background-color:silver;border-color:silver;color:#fff}.formbuilder .btn.formcomponent.drag-copy:hover,.formbuilder .btn.formcomponent.drag-copy:active,.btn.formcomponent.gu-mirror:hover,.btn.formcomponent.gu-mirror:active{box-shadow:none}.formbuilder .btn.formcomponent.drag-copy:active,.btn.formcomponent.gu-mirror:active{background-color:silver;border-color:silver}.formbuilder-header{padding-left:18px;padding-right:18px;font-size:18px;height:80px;border:1px solid #dee2e6;border-bottom:0}.formbuilder-header .formbuilder-title{margin-top:21px;margin-bottom:7px}.formbuilder-header .formbuilder-subtitle{margin-top:0;margin-bottom:12px}.formbuilder{background:white;padding:1rem;border:1px solid #dee2e6;margin-right:0!important;margin-left:0!important}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=false],.formbuilder .form-builder-panel .builder-group-button[aria-expanded=\"\"]{color:#a9a9a9}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=true]{color:#000}.formbuilder .drag-and-drop-alert{display:none}.formbuilder .formarea{padding:10px;border:solid 1px silver;background-color:#fff}.increase-size{font-size:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i6.ModalService }, { type: i2$1.TranslateService }, { type: i3$1.AlertService }, { type: FormManagementService }, { type: i3$1.PageTitleService }, { type: i3.ActivatedRoute }, { type: i3.Router }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -661,22 +690,26 @@ const routes = [
         path: 'form-management/edit/:id',
         component: FormManagementEditComponent,
         canActivate: [AuthGuardService],
+        canDeactivate: [pendingChangesGuard],
         data: { title: 'Form Builder', roles: [ROLE_ADMIN], customPageTitle: true },
     },
 ];
 class FormManagementRoutingModule {
+    constructor(router) {
+        this.router = router;
+        RouterUtils.configureRouter(this.router);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementRoutingModule, deps: [{ token: i3.Router }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormManagementRoutingModule, imports: [i3.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
-FormManagementRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormManagementRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FormManagementRoutingModule, imports: [i3.RouterModule], exports: [RouterModule] });
-FormManagementRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
                     exports: [RouterModule],
-                    declarations: [],
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i3.Router }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -694,60 +727,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * limitations under the License.
  */
 class FormManagementModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormManagementModule, declarations: [FormManagementComponent,
+            FormManagementCreateComponent,
+            FormManagementListComponent,
+            FormManagementEditComponent,
+            FormManagementUploadComponent,
+            FormManagementDuplicateComponent], imports: [FormManagementRoutingModule,
+            FormIoModule,
+            CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            WidgetModule,
+            ListModule,
+            TranslateModule,
+            NgbTooltipModule,
+            DropzoneModule,
+            ModalModule,
+            VModalModule,
+            ModalModule$1,
+            InputModule,
+            TitleModule,
+            ButtonModule,
+            InputModule$1,
+            FormModule,
+            ModalModule,
+            InputModule$1,
+            PlaceholderModule,
+            ButtonModule$1,
+            ValtimoCdsModalDirectiveModule], exports: [FormManagementComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementModule, imports: [FormManagementRoutingModule,
+            FormIoModule,
+            CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            WidgetModule,
+            ListModule,
+            TranslateModule,
+            NgbTooltipModule,
+            DropzoneModule,
+            ModalModule,
+            VModalModule,
+            ModalModule$1,
+            InputModule,
+            TitleModule,
+            ButtonModule,
+            InputModule$1,
+            FormModule,
+            ModalModule,
+            InputModule$1,
+            PlaceholderModule,
+            ButtonModule$1,
+            ValtimoCdsModalDirectiveModule] }); }
 }
-FormManagementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FormManagementModule, declarations: [FormManagementComponent,
-        FormManagementCreateComponent,
-        FormManagementListComponent,
-        FormManagementEditComponent,
-        FormManagementUploadComponent,
-        FormManagementDuplicateComponent], imports: [FormManagementRoutingModule,
-        FormIoModule,
-        CommonModule,
-        ReactiveFormsModule,
-        FormsModule,
-        WidgetModule,
-        ListModule,
-        TranslateModule,
-        NgbTooltipModule,
-        DropzoneModule,
-        ModalModule,
-        ModalModule$1,
-        ModalModule$2,
-        InputModule,
-        TitleModule,
-        ButtonModule,
-        InputModule$1,
-        FormModule,
-        ModalModule,
-        InputModule$1,
-        PlaceholderModule,
-        ButtonModule$1,
-        ValtimoCdsModalDirectiveModule], exports: [FormManagementComponent] });
-FormManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementModule, imports: [FormManagementRoutingModule,
-        FormIoModule,
-        CommonModule,
-        ReactiveFormsModule,
-        FormsModule,
-        WidgetModule,
-        ListModule,
-        TranslateModule,
-        NgbTooltipModule,
-        DropzoneModule,
-        ModalModule,
-        ModalModule$1,
-        ModalModule$2,
-        InputModule,
-        TitleModule,
-        ButtonModule,
-        InputModule$1,
-        FormModule,
-        ModalModule,
-        InputModule$1,
-        PlaceholderModule,
-        ButtonModule$1,
-        ValtimoCdsModalDirectiveModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -770,8 +803,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         NgbTooltipModule,
                         DropzoneModule,
                         ModalModule,
+                        VModalModule,
                         ModalModule$1,
-                        ModalModule$2,
                         InputModule,
                         TitleModule,
                         ButtonModule,
@@ -843,6 +876,9 @@ function compareFormDefinitions(fd1, fd2) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/*
+ * Public API Surface of form-management
+ */
 
 /**
  * Generated bundle index. Do not edit.