@valtimo/form-management 11.3.1 → 12.0.0

package/fesm2022/valtimo-form-management.mjs

@@ -1,29 +1,30 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Inject, EventEmitter, ViewChild, Input, Output, ViewEncapsulation, NgModule } from '@angular/core';
+import { Injectable, Component, Inject, EventEmitter, ViewChild, Input, Output, ViewEncapsulation, HostBinding, NgModule } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import * as i2 from '@valtimo/config';
 import { ROLE_ADMIN, RouterUtils } from '@valtimo/config';
-import * as i3 from '@angular/router';
+import { Subject, BehaviorSubject, take, map, combineLatest, filter, distinctUntilChanged, tap, Subscription, switchMap } from 'rxjs';
+import { Upload16 } from '@carbon/icons';
+import * as i3 from 'carbon-components-angular';
+import { ModalModule, InputModule as InputModule$1, PlaceholderModule, ButtonModule as ButtonModule$1, DialogModule, TabsModule, IconModule, TagModule } from 'carbon-components-angular';
+import * as i3$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$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 { PendingChangesComponent, pendingChangesGuard, FormIoModule, WidgetModule, ListModule, DropzoneModule, VModalModule, ModalModule as ModalModule$1, InputModule, TitleModule, ButtonModule, FormModule, ValtimoCdsModalDirectiveModule, CarbonListModule, RenderInPageHeaderDirectiveModule, EditorModule, SpinnerModule, ConfirmationModalModule } 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$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 { take as take$1 } from 'rxjs/operators';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { BaseModal } from 'carbon-components-angular/modal';
-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 { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -64,18 +65,18 @@ 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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", 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: "17.3.3", ngImport: i0, type: FormManagementService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.ConfigService }]; } });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -89,17 +90,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FormManagementListComponent {
-    paginationClicked(page) {
-        this.pageParam = page - 1;
-        this.loadFormDefinitions();
+class FormManagementStateService {
+    constructor() {
+        this._showModal$ = new Subject();
+        this._hideModal$ = new Subject();
+        this._refresh$ = new BehaviorSubject(null);
+        this._modalType$ = new BehaviorSubject('add');
+    }
+    get showModal$() {
+        return this._showModal$.asObservable();
+    }
+    get hideModal$() {
+        return this._hideModal$.asObservable();
+    }
+    get refresh$() {
+        return this._refresh$.asObservable();
+    }
+    get modalType$() {
+        return this._modalType$.asObservable();
+    }
+    showModal() {
+        this._showModal$.next(null);
     }
-    constructor(formManagementService, router) {
+    hideModal() {
+        this._hideModal$.next(null);
+    }
+    refresh() {
+        this._refresh$.next(null);
+    }
+    setModalType(type) {
+        this._modalType$.next(type);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementStateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormManagementComponent {
+    constructor(formManagementService, iconService, router) {
         this.formManagementService = formManagementService;
+        this.iconService = iconService;
         this.router = router;
         this.formDefinitions = [];
         this.formDefinitionFields = [
-            { key: 'name', label: 'Name' },
+            { key: 'name', label: 'Form name' },
             { key: 'readOnly', label: 'Read-only' },
         ];
         this.pagination = {
@@ -107,19 +177,30 @@ class FormManagementListComponent {
             page: 1,
             size: 10,
         };
-        this.pageParam = 0;
+        this.iconService.registerAll([Upload16]);
+    }
+    paginationClicked(page) {
+        this.pagination.page = page;
+        this.loadFormDefinitions();
     }
-    ngOnInit() { }
-    paginationSet() {
+    paginationSet(size) {
+        this.pagination.size = size;
+        this.pagination.page = 1;
         this.loadFormDefinitions();
     }
     loadFormDefinitions(searchTerm) {
-        const params = { page: this.pageParam, size: this.pagination.size };
+        const params = { page: this.pagination.page - 1, size: this.pagination.size };
         if (searchTerm) {
             params['searchTerm'] = searchTerm;
         }
-        this.formManagementService.queryFormDefinitions(params).subscribe(results => {
-            this.pagination.collectionSize = results.body.totalElements;
+        this.formManagementService
+            .queryFormDefinitions(params)
+            .pipe(take(1))
+            .subscribe(results => {
+            this.pagination = {
+                ...this.pagination,
+                collectionSize: results.body.totalElements,
+            };
             this.formDefinitions = results.body.content;
         });
     }
@@ -129,42 +210,16 @@ 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: i1$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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementComponent, deps: [{ token: FormManagementService }, { token: i3.IconService }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormManagementComponent, selector: "valtimo-form-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-carbon-list\n  [fields]=\"formDefinitionFields\"\n  [header]=\"false\"\n  [isSearchable]=\"true\"\n  [items]=\"formDefinitions\"\n  [pagination]=\"pagination\"\n  paginationIdentifier=\"formManagementList\"\n  (paginationClicked)=\"paginationClicked($event)\"\n  (paginationSet)=\"paginationSet($event)\"\n  (rowClicked)=\"editFormDefinition($event)\"\n  (search)=\"searchTermEntered($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button\n      cdsButton=\"ghost\"\n      [iconOnly]=\"true\"\n      [routerLink]=\"'create'\"\n      [queryParams]=\"{upload: 'true'}\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [routerLink]=\"'create'\">\n      {{ 'Create new Form' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </ng-container>\n</valtimo-carbon-list>\n", styles: ["/*!\n * Copyright 2015-2024 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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i1$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementComponent, 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 }]; } });
+            args: [{ selector: 'valtimo-form-management', template: "<!--\n  ~ Copyright 2015-2024 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-carbon-list\n  [fields]=\"formDefinitionFields\"\n  [header]=\"false\"\n  [isSearchable]=\"true\"\n  [items]=\"formDefinitions\"\n  [pagination]=\"pagination\"\n  paginationIdentifier=\"formManagementList\"\n  (paginationClicked)=\"paginationClicked($event)\"\n  (paginationSet)=\"paginationSet($event)\"\n  (rowClicked)=\"editFormDefinition($event)\"\n  (search)=\"searchTermEntered($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button\n      cdsButton=\"ghost\"\n      [iconOnly]=\"true\"\n      [routerLink]=\"'create'\"\n      [queryParams]=\"{upload: 'true'}\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [routerLink]=\"'create'\">\n      {{ 'Create new Form' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </ng-container>\n</valtimo-carbon-list>\n", styles: ["/*!\n * Copyright 2015-2024 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: () => [{ type: FormManagementService }, { type: i3.IconService }, { type: i3$1.Router }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-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: i1$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" }] }); }
-}
-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 []; } });
-
-/*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -185,7 +240,7 @@ function noDuplicateFormValidator(formManagementService) {
 }
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -235,7 +290,7 @@ class FormManagementCreateComponent {
             this.formManagementService.createFormDefinition(request),
             this.route.queryParams,
         ])
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(([formDefinition, params]) => {
             this.alertService.success('Created new Form');
             if (params?.upload === 'true') {
@@ -250,16 +305,16 @@ 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: i1$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: i1$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementCreateComponent, deps: [{ token: FormManagementService }, { token: i2$2.FormBuilder }, { token: i3$1.Router }, { token: i1$1.AlertService }, { token: i3$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormManagementCreateComponent, selector: "valtimo-form-management-create", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: i1$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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$2.FormBuilder }, { type: i3.Router }, { type: i1$1.AlertService }, { type: i3.ActivatedRoute }]; } });
+            args: [{ selector: 'valtimo-form-management-create', template: "<!--\n  ~ Copyright 2015-2024 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-2024 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: () => [{ type: FormManagementService }, { type: i2$2.FormBuilder }, { type: i3$1.Router }, { type: i1$1.AlertService }, { type: i3$1.ActivatedRoute }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -297,7 +352,7 @@ class FormManagementDuplicateComponent extends BaseModal {
             this.formManagementService.createFormDefinition(request),
             this.route.queryParams,
         ])
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(([formDefinition, params]) => {
             this.alertService.success('Created new Form');
             this.router
@@ -320,19 +375,82 @@ 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: i1$1.ModalService }, { token: FormManagementService }, { token: i1$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: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementDuplicateComponent, deps: [{ token: 'formToDuplicate' }, { token: i1$1.ModalService }, { token: FormManagementService }, { token: i1$1.AlertService }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormManagementDuplicateComponent, selector: "valtimo-form-management-duplicate-modal", usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementDuplicateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: [{
+            args: [{ selector: 'valtimo-form-management-duplicate-modal', template: "<!--\n  ~ Copyright 2015-2024 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-2024 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: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['formToDuplicate']
-                }] }, { type: i1$1.ModalService }, { type: FormManagementService }, { type: i1$1.AlertService }, { type: i3.ActivatedRoute }, { type: i3.Router }]; } });
+                }] }, { type: i1$1.ModalService }, { type: FormManagementService }, { type: i1$1.AlertService }, { type: i3$1.ActivatedRoute }, { type: i3$1.Router }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function compareFormDefinitions(fd1, fd2) {
+    if (fd1 === null && fd2 === null) {
+        return true;
+    }
+    if (fd1 === null || fd2 === null) {
+        return false;
+    }
+    return fd1.id === fd2.id;
+}
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var EDIT_TABS;
+(function (EDIT_TABS) {
+    EDIT_TABS["BUILDER"] = "formManagement.tabs.formBuilder";
+    EDIT_TABS["EDITOR"] = "formManagement.tabs.jsonEditor";
+    EDIT_TABS["OUTPUT"] = "formManagement.tabs.output";
+})(EDIT_TABS || (EDIT_TABS = {}));
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -372,7 +490,7 @@ class FormManagementUploadComponent {
     }
     uploadDefinition() {
         this.disable();
-        this.jsonString$.pipe(take(1)).subscribe(definition => {
+        this.jsonString$.pipe(take$1(1)).subscribe(definition => {
             this.closeErrorSubscription();
             this.clearError();
             this.enable();
@@ -442,7 +560,7 @@ class FormManagementUploadComponent {
     }
     stringIsValidJson(string) {
         try {
-            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            // eslint-disable-next-line
             JSON.parse(string)?.formDefinition?.components;
         }
         catch (e) {
@@ -458,13 +576,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$2.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: i1$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i1$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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementUploadComponent, deps: [{ token: i1$2.DocumentService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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-2024 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-2024 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: i1$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i1$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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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$1.TranslateService }]; }, propDecorators: { modal: [{
+            args: [{ selector: 'valtimo-form-management-upload', template: "<!--\n  ~ Copyright 2015-2024 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-2024 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: () => [{ type: i1$2.DocumentService }, { type: i2$1.TranslateService }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['uploadFormDefinitionModal']
             }], show$: [{
@@ -474,7 +592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -489,7 +607,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class FormManagementEditComponent extends PendingChangesComponent {
-    constructor(alertService, formManagementService, modalService, pageTitleService, route, router) {
+    get _formDefinition() {
+        return this._formDefinition$.getValue();
+    }
+    constructor(alertService, formManagementService, modalService, pageTitleService, route, router, shellService, pageHeaderService) {
         super();
         this.alertService = alertService;
         this.formManagementService = formManagementService;
@@ -497,12 +618,32 @@ class FormManagementEditComponent extends PendingChangesComponent {
         this.pageTitleService = pageTitleService;
         this.route = route;
         this.router = router;
+        this.shellService = shellService;
+        this.pageHeaderService = pageHeaderService;
+        this.class = 'valtimo-form-management-edit';
         this.modifiedFormDefinition = null;
-        this.formDefinition = null;
-        this.showModal$ = new BehaviorSubject(false);
+        this.validJsonChange = null;
+        this.CARBON_THEME = 'g10';
+        this.TABS = EDIT_TABS;
+        this.activeTab = EDIT_TABS.BUILDER;
+        this._formDefinition$ = new BehaviorSubject(null);
+        this.formDefinition$ = this._formDefinition$.pipe(filter((definition) => !!definition), distinctUntilChanged((prevFormDefinition, currFormDefinition) => JSON.stringify(prevFormDefinition?.formDefinition?.components) ===
+            JSON.stringify(currFormDefinition?.formDefinition?.components)), tap(() => {
+            if (!this._editorInitialized) {
+                this._editorInitialized = true;
+                return;
+            }
+            this.pendingChanges = true;
+        }));
+        this.jsonFormDefinition$ = new BehaviorSubject(null);
+        this.jsonOutput$ = new BehaviorSubject(null);
         this.reloading$ = new BehaviorSubject(false);
+        this.showDeleteModal$ = new BehaviorSubject(false);
+        this.showModal$ = new BehaviorSubject(false);
+        this.compactMode$ = this.pageHeaderService.compactMode$;
         this._alertSub = Subscription.EMPTY;
-        this._formDefinitionId = null;
+        this._changeActive = false;
+        this._editorInitialized = false;
     }
     ngOnInit() {
         this.pageTitleService.disableReset();
@@ -511,30 +652,50 @@ class FormManagementEditComponent extends PendingChangesComponent {
     }
     ngOnDestroy() {
         this._alertSub.unsubscribe();
+        this.pageTitleService.enableReset();
     }
-    loadFormDefinition() {
-        this._formDefinitionId = this.route.snapshot.paramMap.get('id');
-        this.formManagementService.getFormDefinition(this._formDefinitionId ?? '').subscribe({
-            next: formDefinition => {
-                this.formDefinition = formDefinition;
-                this.pageTitleService.setCustomPageTitle(formDefinition.name);
+    formBuilderChanged(event, definition) {
+        if (event.type === 'updateComponent') {
+            return;
+        }
+        this._changeActive = true;
+        this.modifiedFormDefinition = event.form;
+        this._formDefinition$.next({ ...this._formDefinition, formDefinition: event.form });
+        this.jsonFormDefinition$.next({ ...definition, value: JSON.stringify(event.form) });
+        this._changeActive = false;
+    }
+    delete() {
+        this.showDeleteModal$.next(true);
+    }
+    deleteFormDefinition(definition) {
+        this.pendingChanges = false;
+        this.formManagementService.deleteFormDefinition(definition.id).subscribe({
+            next: () => {
+                this.router.navigate(['/form-management']);
+                this.alertService.success('Form deleted');
             },
             error: () => {
-                this.alertService.error('Error retrieving Form Definition');
+                this.alertService.error('Error deleting Form');
             },
         });
     }
-    modifyFormDefinition() {
-        if (!this.formDefinition) {
-            return;
-        }
+    downloadFormDefinition(definition) {
+        const file = new Blob([JSON.stringify(definition.formDefinition)], {
+            type: 'text/json',
+        });
+        const link = document.createElement('a');
+        link.download = `form_${definition.name}.json`;
+        link.href = window.URL.createObjectURL(file);
+        link.click();
+        window.URL.revokeObjectURL(link.href);
+        link.remove();
+    }
+    modifyFormDefinition(definition) {
         this.pendingChanges = false;
-        const form = JSON.stringify(this.modifiedFormDefinition !== null
-            ? this.modifiedFormDefinition
-            : this.formDefinition.formDefinition);
+        const form = JSON.stringify(this.modifiedFormDefinition !== null ? this.modifiedFormDefinition : definition.formDefinition);
         const request = {
-            id: this.formDefinition.id,
-            name: this.formDefinition.name,
+            id: definition.id,
+            name: definition.name,
             formDefinition: form,
         };
         this.formManagementService.modifyFormDefinition(request).subscribe({
@@ -547,73 +708,50 @@ class FormManagementEditComponent extends PendingChangesComponent {
             },
         });
     }
-    formBuilderChanged(event) {
-        this.pendingChanges = true;
-        this.modifiedFormDefinition = event.form;
-    }
-    delete() {
-        if (!this._alertSub.closed) {
+    onSelectedTab(tab) {
+        this.activeTab = tab;
+        if (tab === EDIT_TABS.BUILDER) {
             return;
         }
-        const mssg = 'Delete Form?';
-        const confirmations = [
-            {
-                label: 'Cancel',
-                class: 'btn btn-default',
-                value: false,
-            },
-            {
-                label: 'Delete',
-                class: 'btn btn-primary',
-                value: true,
-            },
-        ];
-        this.alertService.notification(mssg, confirmations);
-        this._alertSub = this.alertService
-            .getAlertConfirmChangeEmitter()
-            .pipe(first())
-            .subscribe(alert => {
-            if (alert.confirm === true) {
-                this.deleteFormDefinition();
-            }
+        setTimeout(() => {
+            this.shellService.onMainContentResize();
         });
     }
-    deleteFormDefinition() {
-        if (!this.formDefinition) {
+    onOutputChange(event) {
+        if (!event.data) {
             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');
-            },
-        });
+        else if (JSON.stringify(event.data) === this._activeOuput) {
+            return;
+        }
+        this._activeOuput = JSON.stringify(event.data);
+        this.jsonOutput$.next({ value: this._activeOuput, language: 'json' });
     }
-    downloadFormDefinition() {
-        if (!this.formDefinition) {
+    onValueChangeEvent(value, definition, disabled) {
+        if (this._changeActive || this.validJsonChange === false || disabled) {
             return;
         }
-        const file = new Blob([JSON.stringify(this.formDefinition.formDefinition)], {
-            type: 'text/json',
+        const parsedDefinition = JSON.parse(value);
+        this.modifiedFormDefinition = parsedDefinition;
+        this._formDefinition$.next({
+            ...definition,
+            formDefinition: parsedDefinition,
         });
-        const link = document.createElement('a');
-        link.download = `form_${this.formDefinition.name}.json`;
-        link.href = window.URL.createObjectURL(file);
-        link.click();
-        window.URL.revokeObjectURL(link.href);
-        link.remove();
+    }
+    onValidEvent(value, disabled) {
+        if (this._changeActive || disabled) {
+            return;
+        }
+        this.validJsonChange = value;
     }
     showUploadModal() {
         this.showModal$.next(true);
     }
-    showDuplicateModal() {
+    showDuplicateModal(definition) {
         this.modalService.create({
             component: FormManagementDuplicateComponent,
             inputs: {
-                formToDuplicate: this.formDefinition,
+                formToDuplicate: definition,
             },
         });
     }
@@ -625,14 +763,15 @@ class FormManagementEditComponent extends PendingChangesComponent {
             this.alertService.error('Invalid form.io. Missing JSON field "components".');
             return;
         }
-        if (!this.formDefinition) {
-            return;
-        }
         const components = definition.components;
-        const currentDefinition = this.modifiedFormDefinition || this.formDefinition.formDefinition;
+        const currentDefinition = this.modifiedFormDefinition || definition.formDefinition;
         const newDefinition = { ...currentDefinition, ...(components && { components }) };
         this.modifiedFormDefinition = newDefinition;
-        this.formDefinition.formDefinition = newDefinition;
+        definition.formDefinition = newDefinition;
+        this.jsonFormDefinition$.next({
+            value: JSON.stringify(newDefinition),
+            language: 'json',
+        });
         this.reloading$.next(false);
     }
     onConfirmRedirect() {
@@ -649,16 +788,31 @@ class FormManagementEditComponent extends PendingChangesComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementEditComponent, deps: [{ token: i1$1.AlertService }, { token: FormManagementService }, { token: i6.ModalService }, { token: i1$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:#fff;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: i1$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 }); }
+    loadFormDefinition() {
+        this.route.paramMap
+            .pipe(take(1), switchMap((paramMap) => this.formManagementService.getFormDefinition(paramMap.get('id') ?? '')))
+            .subscribe((definition) => {
+            this._formDefinition$.next(definition);
+            this.pageTitleService.setCustomPageTitle(definition.name);
+            this.jsonFormDefinition$.next({
+                value: JSON.stringify(definition.formDefinition),
+                language: 'json',
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementEditComponent, deps: [{ token: i1$1.AlertService }, { token: FormManagementService }, { token: i3.ModalService }, { token: i1$1.PageTitleService }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }, { token: i1$1.ShellService }, { token: i1$1.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: FormManagementEditComponent, selector: "valtimo-form-management-edit", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<ng-container\n  *ngIf=\"{\n    formDefinition: formDefinition$ | async,\n    jsonFormDefinition: jsonFormDefinition$ | async,\n    jsonOutput: jsonOutput$ | async,\n    compactMode: compactMode$ | async\n  } as obs\"\n>\n  @if (obs.formDefinition) {\n    <ng-container renderInPageHeader [fullWidth]=\"true\">\n      <ng-template>\n        <div\n          class=\"valtimo-form-management-edit__header-container\"\n          [ngClass]=\"{'--compact': obs.compactMode}\"\n        >\n          @if (obs.formDefinition.readOnly) {\n            <cds-tag size=\"sm\" type=\"blue\">{{ 'formManagement.readOnly' | translate }}</cds-tag>\n          }\n\n          <div class=\"valtimo-form-management-edit__header\">\n            <cds-overflow-menu>\n              <cds-overflow-menu-option (selected)=\"downloadFormDefinition(obs.formDefinition)\">\n                {{ 'Download' | translate }}\n              </cds-overflow-menu-option>\n\n              <cds-overflow-menu-option\n                [disabled]=\"obs.formDefinition.readOnly\"\n                (selected)=\"showUploadModal()\"\n              >\n                {{ 'Upload' | translate }}\n              </cds-overflow-menu-option>\n\n              <cds-overflow-menu-option\n                [disabled]=\"obs.formDefinition.readOnly\"\n                (selected)=\"delete(obs.formDefinition)\"\n              >\n                {{ 'interface.delete' | translate }}\n              </cds-overflow-menu-option>\n\n              <cds-overflow-menu-option (selected)=\"showDuplicateModal(obs.formDefinition)\">\n                {{ 'formManagement.duplicate' | translate }}\n              </cds-overflow-menu-option>\n            </cds-overflow-menu>\n\n            <button\n              cdsButton=\"primary\"\n              [disabled]=\"obs.formDefinition.readOnly || !validJsonChange\"\n              [size]=\"obs.compactMode ? 'sm' : 'md'\"\n              (click)=\"modifyFormDefinition(obs.formDefinition)\"\n            >\n              {{ 'interface.save' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n            </button>\n          </div>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <cds-tabs type=\"contained\">\n      <cds-tab [heading]=\"TABS.BUILDER | translate\" (selected)=\"onSelectedTab(TABS.BUILDER)\">\n        <valtimo-form-io-builder\n          *ngIf=\"(reloading$ | async) === false && activeTab === TABS.BUILDER\"\n          [form]=\"obs.formDefinition.formDefinition\"\n          (change)=\"formBuilderChanged($event, obs.jsonFormDefinition)\"\n        ></valtimo-form-io-builder>\n      </cds-tab>\n\n      <cds-tab [heading]=\"TABS.EDITOR | translate\" (selected)=\"onSelectedTab(TABS.EDITOR)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            jsonEditor;\n            context: {\n              data: {\n                disabled: obs.formDefinition.readOnly,\n                formDefinition: obs.formDefinition,\n                model: obs.jsonFormDefinition\n              }\n            }\n          \"\n        ></ng-container>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"TABS.OUTPUT | translate\"\n        (selected)=\"onSelectedTab(TABS.OUTPUT)\"\n        class=\"valtimo-form-management-edit__output\"\n      >\n        <valtimo-form-io\n          [form]=\"obs.formDefinition.formDefinition\"\n          (change)=\"onOutputChange($event)\"\n        ></valtimo-form-io>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            jsonEditor;\n            context: {\n              data: {disabled: true, formDefinition: obs.formDefinition, model: obs.jsonOutput}\n            }\n          \"\n        ></ng-container>\n      </cds-tab>\n    </cds-tabs>\n  } @else {\n    <valtimo-spinner></valtimo-spinner>\n  }\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"interface.deleteConfirmation\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [outputOnConfirm]=\"obs.formDefinition\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"dashboardManagement.delete\"\n    (confirmEvent)=\"deleteFormDefinition($event)\"\n  ></valtimo-confirmation-modal>\n\n  <valtimo-form-management-upload\n    [show$]=\"showModal$\"\n    (definitionUploaded)=\"setFormDefinition($event)\"\n  ></valtimo-form-management-upload>\n\n  <ng-template #jsonEditor let-data=\"data\">\n    <valtimo-editor\n      [model]=\"data.model\"\n      [disabled]=\"data.disabled\"\n      (validEvent)=\"onValidEvent($event, data.disabled)\"\n      (valueChangeEvent)=\"onValueChangeEvent($event, data.formDefinition, data.disabled)\"\n      [fitPage]=\"true\"\n      [fitPageExtraSpace]=\"80\"\n    ></valtimo-editor>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-form-management-edit__header{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-left:auto}.valtimo-form-management-edit__header-container{width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.valtimo-form-management-edit__header-container .cds--tag{margin:0;height:var(--cds-layout-size-height-md)}.valtimo-form-management-edit__header-container.--compact{align-items:flex-start;padding-bottom:0}.valtimo-form-management-edit__output .cds--tab-content{display:grid;grid-template-columns:1fr 1fr}.valtimo-form-management-edit__output .cds--tab-content>*{min-width:100%!important}.valtimo-form-management-edit .formbuilder .btn.formcomponent.drag-copy,.valtimo-form-management-edit .btn.formcomponent.gu-mirror{font-weight:400;background-color:silver;border-color:silver;color:#fff}.valtimo-form-management-edit .formbuilder .btn.formcomponent.drag-copy:hover,.valtimo-form-management-edit .formbuilder .btn.formcomponent.drag-copy:active,.valtimo-form-management-edit .btn.formcomponent.gu-mirror:hover,.valtimo-form-management-edit .btn.formcomponent.gu-mirror:active{box-shadow:none}.valtimo-form-management-edit .formbuilder .btn.formcomponent.drag-copy:active,.valtimo-form-management-edit .btn.formcomponent.gu-mirror:active{background-color:silver;border-color:silver}.valtimo-form-management-edit .formbuilder-header{padding-left:18px;padding-right:18px;font-size:18px;height:80px;border:1px solid #dee2e6;border-bottom:0}.valtimo-form-management-edit .formbuilder-header .formbuilder-title{margin-top:21px;margin-bottom:7px}.valtimo-form-management-edit .formbuilder-header .formbuilder-subtitle{margin-top:0;margin-bottom:12px}.valtimo-form-management-edit .formbuilder{background:#fff;padding:1rem;border:1px solid #dee2e6;margin-right:0!important;margin-left:0!important}.valtimo-form-management-edit .formbuilder .form-builder-panel .builder-group-button[aria-expanded=false],.valtimo-form-management-edit .formbuilder .form-builder-panel .builder-group-button[aria-expanded=\"\"]{color:#a9a9a9}.valtimo-form-management-edit .formbuilder .form-builder-panel .builder-group-button[aria-expanded=true]{color:#000}.valtimo-form-management-edit .formbuilder .drag-and-drop-alert{display:none}.valtimo-form-management-edit .formbuilder .formarea{padding:10px;border:solid 1px silver;background-color:#fff}.valtimo-form-management-edit .increase-size{font-size:1rem}.valtimo-form-management-edit .cds--tab-content{background:#fff!important}\n/*!\n * Copyright 2015-2024 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: i1$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i1$1.FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: ["form"], outputs: ["change"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i1$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i1$1.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageExtraSpace"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "component", type: i1$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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", 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:#fff;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: i1$1.AlertService }, { type: FormManagementService }, { type: i6.ModalService }, { type: i1$1.PageTitleService }, { type: i3.ActivatedRoute }, { type: i3.Router }]; } });
+            args: [{ selector: 'valtimo-form-management-edit', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 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<ng-container\n  *ngIf=\"{\n    formDefinition: formDefinition$ | async,\n    jsonFormDefinition: jsonFormDefinition$ | async,\n    jsonOutput: jsonOutput$ | async,\n    compactMode: compactMode$ | async\n  } as obs\"\n>\n  @if (obs.formDefinition) {\n    <ng-container renderInPageHeader [fullWidth]=\"true\">\n      <ng-template>\n        <div\n          class=\"valtimo-form-management-edit__header-container\"\n          [ngClass]=\"{'--compact': obs.compactMode}\"\n        >\n          @if (obs.formDefinition.readOnly) {\n            <cds-tag size=\"sm\" type=\"blue\">{{ 'formManagement.readOnly' | translate }}</cds-tag>\n          }\n\n          <div class=\"valtimo-form-management-edit__header\">\n            <cds-overflow-menu>\n              <cds-overflow-menu-option (selected)=\"downloadFormDefinition(obs.formDefinition)\">\n                {{ 'Download' | translate }}\n              </cds-overflow-menu-option>\n\n              <cds-overflow-menu-option\n                [disabled]=\"obs.formDefinition.readOnly\"\n                (selected)=\"showUploadModal()\"\n              >\n                {{ 'Upload' | translate }}\n              </cds-overflow-menu-option>\n\n              <cds-overflow-menu-option\n                [disabled]=\"obs.formDefinition.readOnly\"\n                (selected)=\"delete(obs.formDefinition)\"\n              >\n                {{ 'interface.delete' | translate }}\n              </cds-overflow-menu-option>\n\n              <cds-overflow-menu-option (selected)=\"showDuplicateModal(obs.formDefinition)\">\n                {{ 'formManagement.duplicate' | translate }}\n              </cds-overflow-menu-option>\n            </cds-overflow-menu>\n\n            <button\n              cdsButton=\"primary\"\n              [disabled]=\"obs.formDefinition.readOnly || !validJsonChange\"\n              [size]=\"obs.compactMode ? 'sm' : 'md'\"\n              (click)=\"modifyFormDefinition(obs.formDefinition)\"\n            >\n              {{ 'interface.save' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n            </button>\n          </div>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <cds-tabs type=\"contained\">\n      <cds-tab [heading]=\"TABS.BUILDER | translate\" (selected)=\"onSelectedTab(TABS.BUILDER)\">\n        <valtimo-form-io-builder\n          *ngIf=\"(reloading$ | async) === false && activeTab === TABS.BUILDER\"\n          [form]=\"obs.formDefinition.formDefinition\"\n          (change)=\"formBuilderChanged($event, obs.jsonFormDefinition)\"\n        ></valtimo-form-io-builder>\n      </cds-tab>\n\n      <cds-tab [heading]=\"TABS.EDITOR | translate\" (selected)=\"onSelectedTab(TABS.EDITOR)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            jsonEditor;\n            context: {\n              data: {\n                disabled: obs.formDefinition.readOnly,\n                formDefinition: obs.formDefinition,\n                model: obs.jsonFormDefinition\n              }\n            }\n          \"\n        ></ng-container>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"TABS.OUTPUT | translate\"\n        (selected)=\"onSelectedTab(TABS.OUTPUT)\"\n        class=\"valtimo-form-management-edit__output\"\n      >\n        <valtimo-form-io\n          [form]=\"obs.formDefinition.formDefinition\"\n          (change)=\"onOutputChange($event)\"\n        ></valtimo-form-io>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            jsonEditor;\n            context: {\n              data: {disabled: true, formDefinition: obs.formDefinition, model: obs.jsonOutput}\n            }\n          \"\n        ></ng-container>\n      </cds-tab>\n    </cds-tabs>\n  } @else {\n    <valtimo-spinner></valtimo-spinner>\n  }\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"interface.deleteConfirmation\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    [outputOnConfirm]=\"obs.formDefinition\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"dashboardManagement.delete\"\n    (confirmEvent)=\"deleteFormDefinition($event)\"\n  ></valtimo-confirmation-modal>\n\n  <valtimo-form-management-upload\n    [show$]=\"showModal$\"\n    (definitionUploaded)=\"setFormDefinition($event)\"\n  ></valtimo-form-management-upload>\n\n  <ng-template #jsonEditor let-data=\"data\">\n    <valtimo-editor\n      [model]=\"data.model\"\n      [disabled]=\"data.disabled\"\n      (validEvent)=\"onValidEvent($event, data.disabled)\"\n      (valueChangeEvent)=\"onValueChangeEvent($event, data.formDefinition, data.disabled)\"\n      [fitPage]=\"true\"\n      [fitPageExtraSpace]=\"80\"\n    ></valtimo-editor>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-form-management-edit__header{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-left:auto}.valtimo-form-management-edit__header-container{width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.valtimo-form-management-edit__header-container .cds--tag{margin:0;height:var(--cds-layout-size-height-md)}.valtimo-form-management-edit__header-container.--compact{align-items:flex-start;padding-bottom:0}.valtimo-form-management-edit__output .cds--tab-content{display:grid;grid-template-columns:1fr 1fr}.valtimo-form-management-edit__output .cds--tab-content>*{min-width:100%!important}.valtimo-form-management-edit .formbuilder .btn.formcomponent.drag-copy,.valtimo-form-management-edit .btn.formcomponent.gu-mirror{font-weight:400;background-color:silver;border-color:silver;color:#fff}.valtimo-form-management-edit .formbuilder .btn.formcomponent.drag-copy:hover,.valtimo-form-management-edit .formbuilder .btn.formcomponent.drag-copy:active,.valtimo-form-management-edit .btn.formcomponent.gu-mirror:hover,.valtimo-form-management-edit .btn.formcomponent.gu-mirror:active{box-shadow:none}.valtimo-form-management-edit .formbuilder .btn.formcomponent.drag-copy:active,.valtimo-form-management-edit .btn.formcomponent.gu-mirror:active{background-color:silver;border-color:silver}.valtimo-form-management-edit .formbuilder-header{padding-left:18px;padding-right:18px;font-size:18px;height:80px;border:1px solid #dee2e6;border-bottom:0}.valtimo-form-management-edit .formbuilder-header .formbuilder-title{margin-top:21px;margin-bottom:7px}.valtimo-form-management-edit .formbuilder-header .formbuilder-subtitle{margin-top:0;margin-bottom:12px}.valtimo-form-management-edit .formbuilder{background:#fff;padding:1rem;border:1px solid #dee2e6;margin-right:0!important;margin-left:0!important}.valtimo-form-management-edit .formbuilder .form-builder-panel .builder-group-button[aria-expanded=false],.valtimo-form-management-edit .formbuilder .form-builder-panel .builder-group-button[aria-expanded=\"\"]{color:#a9a9a9}.valtimo-form-management-edit .formbuilder .form-builder-panel .builder-group-button[aria-expanded=true]{color:#000}.valtimo-form-management-edit .formbuilder .drag-and-drop-alert{display:none}.valtimo-form-management-edit .formbuilder .formarea{padding:10px;border:solid 1px silver;background-color:#fff}.valtimo-form-management-edit .increase-size{font-size:1rem}.valtimo-form-management-edit .cds--tab-content{background:#fff!important}\n/*!\n * Copyright 2015-2024 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: () => [{ type: i1$1.AlertService }, { type: FormManagementService }, { type: i3.ModalService }, { type: i1$1.PageTitleService }, { type: i3$1.ActivatedRoute }, { type: i3$1.Router }, { type: i1$1.ShellService }, { type: i1$1.PageHeaderService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -694,24 +848,20 @@ const routes = [
     },
 ];
 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: FormManagementRoutingModule, imports: [i3$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementRoutingModule, imports: [RouterModule.forRoot(routes, RouterUtils.getRouterExtraOptions()), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes)],
+                    imports: [RouterModule.forRoot(routes, RouterUtils.getRouterExtraOptions())],
                     exports: [RouterModule],
                 }]
-        }], ctorParameters: function () { return [{ type: i3.Router }]; } });
+        }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -726,10 +876,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * 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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: FormManagementModule, declarations: [FormManagementComponent,
             FormManagementCreateComponent,
-            FormManagementListComponent,
             FormManagementEditComponent,
             FormManagementUploadComponent,
             FormManagementDuplicateComponent], imports: [FormManagementRoutingModule,
@@ -754,8 +903,17 @@ class FormManagementModule {
             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,
+            ValtimoCdsModalDirectiveModule,
+            CarbonListModule,
+            DialogModule,
+            RenderInPageHeaderDirectiveModule,
+            TabsModule,
+            EditorModule,
+            SpinnerModule,
+            IconModule,
+            ConfirmationModalModule,
+            TagModule], exports: [FormManagementComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementModule, imports: [FormManagementRoutingModule,
             FormIoModule,
             CommonModule,
             ReactiveFormsModule,
@@ -777,15 +935,23 @@ class FormManagementModule {
             InputModule$1,
             PlaceholderModule,
             ButtonModule$1,
-            ValtimoCdsModalDirectiveModule] }); }
+            ValtimoCdsModalDirectiveModule,
+            CarbonListModule,
+            DialogModule,
+            RenderInPageHeaderDirectiveModule,
+            TabsModule,
+            EditorModule,
+            SpinnerModule,
+            IconModule,
+            ConfirmationModalModule,
+            TagModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         FormManagementComponent,
                         FormManagementCreateComponent,
-                        FormManagementListComponent,
                         FormManagementEditComponent,
                         FormManagementUploadComponent,
                         FormManagementDuplicateComponent,
@@ -814,54 +980,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         PlaceholderModule,
                         ButtonModule$1,
                         ValtimoCdsModalDirectiveModule,
+                        CarbonListModule,
+                        DialogModule,
+                        RenderInPageHeaderDirectiveModule,
+                        TabsModule,
+                        EditorModule,
+                        SpinnerModule,
+                        IconModule,
+                        ConfirmationModalModule,
+                        TagModule,
                     ],
                     exports: [FormManagementComponent],
                 }]
         }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-function compareFormDefinitions(fd1, fd2) {
-    if (fd1 === null && fd2 === null) {
-        return true;
-    }
-    if (fd1 === null || fd2 === null) {
-        return false;
-    }
-    return fd1.id === fd2.id;
-}
-
-/*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -883,5 +1017,5 @@ function compareFormDefinitions(fd1, fd2) {
  * Generated bundle index. Do not edit.
  */
 
-export { FormManagementComponent, FormManagementModule, FormManagementService, compareFormDefinitions };
+export { EDIT_TABS, FormManagementComponent, FormManagementModule, FormManagementService, compareFormDefinitions };
 //# sourceMappingURL=valtimo-form-management.mjs.map