@valtimo/components 13.0.0 → 13.0.1

package/fesm2022/valtimo-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, RendererStyleFlags2, Inject, Injectable, Input, Component, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, ViewEncapsulation, HostListener, inject, InjectionToken, ChangeDetectionStrategy, signal, TemplateRef, ContentChild, ElementRef, forwardRef, ViewChildren, ContentChildren } from '@angular/core';
+import { Pipe, NgModule, RendererStyleFlags2, Inject, Injectable, Input, Component, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, ViewEncapsulation, HostListener, inject, InjectionToken, ChangeDetectionStrategy, signal, TemplateRef, ContentChild, ElementRef, forwardRef, ViewChildren, ContentChildren, computed } from '@angular/core';
 import { combineLatest, map, BehaviorSubject, fromEvent, Subject, Subscription, Observable, take as take$1, of, tap as tap$1, interval, switchMap, startWith, filter as filter$1, merge, debounceTime as debounceTime$1, timer, first } from 'rxjs';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
@@ -13,7 +13,7 @@ import { HttpClient } from '@angular/common/http';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, NavigationStart, ResolveEnd, RouterModule } from '@angular/router';
 import { deepmerge } from 'deepmerge-ts';
-import { isEqual, isArray, isNil, clone, cloneDeep, get } from 'lodash';
+import { isEqual, isNil, clone, isArray, cloneDeep, get } from 'lodash';
 import { Components, Utils, Formio } from 'formiojs';
 import { createCustomElement } from '@angular/elements';
 import * as i11$1 from '@formio/angular';
@@ -37,7 +37,7 @@ import * as i11 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i3$1 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
-import { ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16 } from '@carbon/icons';
+import { ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16 } from '@carbon/icons';
 import localeNl from '@angular/common/locales/nl';
 import moment$1 from 'moment/moment';
 import BpmnViewer from 'bpmn-js';
@@ -2270,20 +2270,6 @@ function createCustomFormioComponent(customComponentOptions) {
                 schema: CustomComponent.schema(),
             };
         }
-        constructor(component, options, data) {
-            super(component, {
-                ...options,
-                sanitizeConfig: {
-                    addTags: [customComponentOptions.selector],
-                },
-            }, data);
-            this.component = component;
-            this.id = Utils.getRandomComponentId();
-            this.type = customComponentOptions.type;
-            if (customComponentOptions.extraValidators) {
-                this.validators = this.validators.concat(customComponentOptions.extraValidators);
-            }
-        }
         elementInfo() {
             const info = super.elementInfo();
             info.type = customComponentOptions.selector;
@@ -2302,6 +2288,32 @@ function createCustomFormioComponent(customComponentOptions) {
             };
             return info;
         }
+        // @ts-ignore
+        get defaultValue() {
+            let defaultValue = this.emptyValue;
+            // handle falsy default value
+            if (!isNil(this.component.defaultValue)) {
+                defaultValue = this.component.defaultValue;
+            }
+            if (this.component.customDefaultValue && !this.options.preview) {
+                defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');
+            }
+            return clone(defaultValue);
+        }
+        constructor(component, options, data) {
+            super(component, {
+                ...options,
+                sanitizeConfig: {
+                    addTags: [customComponentOptions.selector],
+                },
+            }, data);
+            this.component = component;
+            this.id = Utils.getRandomComponentId();
+            this.type = customComponentOptions.type;
+            if (customComponentOptions.extraValidators) {
+                this.validators = this.validators.concat(customComponentOptions.extraValidators);
+            }
+        }
         renderElement(value, index) {
             const info = this.inputInfo;
             return this.renderTemplate(customComponentOptions.template || 'input', {
@@ -2371,17 +2383,13 @@ function createCustomFormioComponent(customComponentOptions) {
                 this.component.multiple &&
                 !this.component.disableMultiValueWrapper);
         }
-        // @ts-ignore
-        get defaultValue() {
-            let defaultValue = this.emptyValue;
-            // handle falsy default value
-            if (!isNil(this.component.defaultValue)) {
-                defaultValue = this.component.defaultValue;
-            }
-            if (this.component.customDefaultValue && !this.options.preview) {
-                defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');
+        // override setValue method to allow for array values
+        setValue(value) {
+            if (!this._customAngularElement || !('value' in this._customAngularElement)) {
+                return false;
             }
-            return clone(defaultValue);
+            this._customAngularElement.value = value;
+            return true;
         }
     };
 }
@@ -2470,15 +2478,6 @@ function registerCustomFormioComponent(options, angularComponent, injector) {
     }
     Components.setComponent(options.type, createCustomFormioComponent(options));
 }
-function registerCustomFormioComponentWithClass(options, angularComponent, formioClass, injector) {
-    registerCustomTag(options.selector, injector);
-    registerCustomTag(options.type, injector);
-    if (!customElements.get(options.selector)) {
-        const complexCustomComponent = createCustomElement(angularComponent, { injector });
-        customElements.define(options.selector, complexCustomComponent);
-    }
-    Components.setComponent(options.type, formioClass);
-}
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -5278,7 +5277,7 @@ class ValtimoCdsModalDirective {
         this.document = document;
         this.elementRef = elementRef;
         this.renderer = renderer;
-        this.enableOverflow = false;
+        this.minContentHeight = 0;
     }
     ngAfterViewInit() {
         this._mutationObserver = new MutationObserver((mutations) => {
@@ -5288,12 +5287,14 @@ class ValtimoCdsModalDirective {
             attributes: true,
             childList: true,
             subtree: true,
+            characterData: true,
         });
         const open = this.elementRef.nativeElement.getAttribute('ng-reflect-open');
         if (open === 'true') {
             this.applyDocumentOverflowHidden();
         }
-        this.applyOverflowToModalElements();
+        this.applyStyleToModalElements();
+        setTimeout(() => this.applyStyleToModalElements(), 0);
     }
     ngOnDestroy() {
         this._mutationObserver.disconnect();
@@ -5311,7 +5312,7 @@ class ValtimoCdsModalDirective {
                 }
             }
         }
-        this.applyOverflowToModalElements();
+        this.applyStyleToModalElements();
     }
     applyDocumentOverflowHidden() {
         this.renderer.setStyle(this.document.body, 'overflow', 'hidden', RendererStyleFlags2.Important);
@@ -5322,12 +5323,12 @@ class ValtimoCdsModalDirective {
         this.renderer.removeStyle(this.document.body, 'overflow');
         this.renderer.removeStyle(this.document.documentElement, 'overflow');
     }
-    applyOverflowToModalElements() {
-        if (this.enableOverflow) {
-            const modalElements = this.document.querySelectorAll('.cds--modal, .cds--modal-content');
-            modalElements.forEach((el) => {
-                this.renderer.setStyle(el, 'overflow', 'auto');
-            });
+    applyStyleToModalElements() {
+        if (this.minContentHeight <= 0)
+            return;
+        const contentElements = Array.from(this.document.querySelectorAll('.cds--modal-content'));
+        for (const element of contentElements) {
+            this.renderer.setStyle(element, 'min-height', `${this.minContentHeight}px`, RendererStyleFlags2.Important);
         }
     }
     preventModalCloseButtonTooltip() {
@@ -5350,7 +5351,7 @@ class ValtimoCdsModalDirective {
         requestAnimationFrame(blurIfFocused);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ValtimoCdsModalDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ValtimoCdsModalDirective, isStandalone: true, selector: "[valtimoCdsModal]", inputs: { enableOverflow: "enableOverflow" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ValtimoCdsModalDirective, isStandalone: true, selector: "[valtimoCdsModal]", inputs: { minContentHeight: "minContentHeight" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ValtimoCdsModalDirective, decorators: [{
             type: Directive,
@@ -5361,7 +5362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { enableOverflow: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { minContentHeight: [{
                 type: Input
             }] } });
 
@@ -5396,7 +5397,7 @@ class CarbonTagsModalComponent {
         this.closeEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CarbonTagsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CarbonTagsModalComponent, isStandalone: false, selector: "valtimo-tags-modal", inputs: { open: "open", tags: "tags" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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<cds-modal\n  valtimoCdsModal\n  [title]=\"'interface.tags' | translate\"\n  size=\"xs\"\n  [open]=\"open\"\n  (close)=\"onCloseSelect()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\">\n    <h3 cdsModalHeading>{{ 'interface.tags' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-tags-modal__content\">\n    <div class=\"valtimo-tags-modal__container\">\n      @for (tag of tags; track tag.content) {\n        <cds-tag [type]=\"tag.type\">\n          {{ tag.content }}\n        </cds-tag>\n      }\n    </div>\n  </section>\n</cds-modal>\n", styles: [".valtimo-tags-modal__content{max-height:300px}.valtimo-tags-modal__container{width:100%;max-height:100%;overflow:auto;background:var(--cds-layer-02);padding:16px;border-radius:8px}.valtimo-tags-modal__container>*:first-child{margin-left:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { 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: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["enableOverflow"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CarbonTagsModalComponent, isStandalone: false, selector: "valtimo-tags-modal", inputs: { open: "open", tags: "tags" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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<cds-modal\n  valtimoCdsModal\n  [title]=\"'interface.tags' | translate\"\n  size=\"xs\"\n  [open]=\"open\"\n  (close)=\"onCloseSelect()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\">\n    <h3 cdsModalHeading>{{ 'interface.tags' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-tags-modal__content\">\n    <div class=\"valtimo-tags-modal__container\">\n      @for (tag of tags; track tag.content) {\n        <cds-tag [type]=\"tag.type\">\n          {{ tag.content }}\n        </cds-tag>\n      }\n    </div>\n  </section>\n</cds-modal>\n", styles: [".valtimo-tags-modal__content{max-height:300px}.valtimo-tags-modal__container{width:100%;max-height:100%;overflow:auto;background:var(--cds-layer-02);padding:16px;border-radius:8px}.valtimo-tags-modal__container>*:first-child{margin-left:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { 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: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CarbonTagsModalComponent, decorators: [{
             type: Component,
@@ -10350,22 +10351,8 @@ const COMPONENT_OPTIONS$5 = {
     editForm: formIoUploaderEditForm,
 };
 function registerFormioUploadComponent(injector) {
-    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$5);
-    // override setValue function to allow for setting an array value
-    class UploaderComponent extends originalUploadComponent {
-        setValue(value) {
-            if (!this._customAngularElement) {
-                return false;
-            }
-            let componentValue = this._customAngularElement?.value;
-            if (componentValue) {
-                componentValue = value;
-            }
-            return true;
-        }
-    }
     if (!customElements.get(COMPONENT_OPTIONS$5.selector)) {
-        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$5, FormIoUploaderComponent, UploaderComponent, injector);
+        registerCustomFormioComponent(COMPONENT_OPTIONS$5, FormIoUploaderComponent, injector);
     }
 }
 
@@ -13602,7 +13589,7 @@ class ConfirmationModalComponent {
         this.optionalEvent.emit(this.outputOnOptional);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ConfirmationModalComponent, isStandalone: false, selector: "valtimo-confirmation-modal", inputs: { titleTranslationKey: "titleTranslationKey", title: "title", content: "content", contentTranslationKey: "contentTranslationKey", confirmButtonText: "confirmButtonText", confirmButtonTextTranslationKey: "confirmButtonTextTranslationKey", confirmButtonType: "confirmButtonType", showOptionalButton: "showOptionalButton", optionalButtonText: "optionalButtonText", optionalButtonTextTranslationKey: "optionalButtonTextTranslationKey", optionalButtonType: "optionalButtonType", cancelButtonText: "cancelButtonText", cancelButtonTextTranslationKey: "cancelButtonTextTranslationKey", cancelButtonType: "cancelButtonType", showModalSubject$: "showModalSubject$", outputOnConfirm: "outputOnConfirm", outputOnOptional: "outputOnOptional", spacerAfterCancelButton: "spacerAfterCancelButton" }, outputs: { confirmEvent: "confirmEvent", optionalEvent: "optionalEvent", cancelEvent: "cancelEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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<cds-modal\n  valtimoCdsModal\n  [open]=\"modalOpen$ | async\"\n  *ngIf=\"{\n    deleteTranslation: 'interface.delete' | translate,\n    deleteConfirmationTranslation: 'interface.deleteConfirmation' | translate,\n    cancelTranslation: 'interface.cancel' | translate,\n    titleTranslation: titleTranslationKey | translate,\n    contentTranslation: contentTranslationKey | translate,\n    confirmButtonTranslation: confirmButtonTextTranslationKey | translate,\n    cancelButtonTranslation: cancelButtonTextTranslationKey | translate,\n    optionalButtonTranslation: optionalButtonTextTranslationKey | translate,\n  } as obs\"\n  (close)=\"closeModal()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        (titleTranslationKey !== obs.titleTranslation ? obs.titleTranslation : '') ||\n          title ||\n          obs.deleteTranslation\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n\n    <div class=\"modal-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        data-testid=\"confirmation-modal-close\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"cancelButtonType\"\n        (click)=\"closeModal()\"\n      >\n        {{\n          (cancelButtonTextTranslationKey !== obs.cancelButtonTranslation\n            ? obs.cancelButtonTranslation\n            : '') ||\n            cancelButtonText ||\n            obs.cancelTranslation\n        }}\n      </button>\n      <div *ngIf=\"spacerAfterCancelButton\" class=\"modal-spacer\"></div>\n      <button\n        *ngIf=\"showOptionalButton\"\n        data-testid=\"confirmation-modal-optional\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"optionalButtonType\"\n        (click)=\"onOptional()\"\n      >\n        {{\n          (optionalButtonTextTranslationKey !== obs.optionalButtonTranslation\n            ? obs.optionalButtonTranslation\n            : '') ||\n            optionalButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n      <button\n        data-testid=\"confirmation-modal-confirm\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"confirmButtonType\"\n        (click)=\"onConfirm()\"\n      >\n        {{\n          (confirmButtonTextTranslationKey !== obs.confirmButtonTranslation\n            ? obs.confirmButtonTranslation\n            : '') ||\n            confirmButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".modal-spacer{flex:0 1 50%}.modal-body-content{margin-top:16px}\n/*!\n * Copyright 2015-2025 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: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["enableOverflow"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ConfirmationModalComponent, isStandalone: false, selector: "valtimo-confirmation-modal", inputs: { titleTranslationKey: "titleTranslationKey", title: "title", content: "content", contentTranslationKey: "contentTranslationKey", confirmButtonText: "confirmButtonText", confirmButtonTextTranslationKey: "confirmButtonTextTranslationKey", confirmButtonType: "confirmButtonType", showOptionalButton: "showOptionalButton", optionalButtonText: "optionalButtonText", optionalButtonTextTranslationKey: "optionalButtonTextTranslationKey", optionalButtonType: "optionalButtonType", cancelButtonText: "cancelButtonText", cancelButtonTextTranslationKey: "cancelButtonTextTranslationKey", cancelButtonType: "cancelButtonType", showModalSubject$: "showModalSubject$", outputOnConfirm: "outputOnConfirm", outputOnOptional: "outputOnOptional", spacerAfterCancelButton: "spacerAfterCancelButton" }, outputs: { confirmEvent: "confirmEvent", optionalEvent: "optionalEvent", cancelEvent: "cancelEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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<cds-modal\n  valtimoCdsModal\n  [open]=\"modalOpen$ | async\"\n  *ngIf=\"{\n    deleteTranslation: 'interface.delete' | translate,\n    deleteConfirmationTranslation: 'interface.deleteConfirmation' | translate,\n    cancelTranslation: 'interface.cancel' | translate,\n    titleTranslation: titleTranslationKey | translate,\n    contentTranslation: contentTranslationKey | translate,\n    confirmButtonTranslation: confirmButtonTextTranslationKey | translate,\n    cancelButtonTranslation: cancelButtonTextTranslationKey | translate,\n    optionalButtonTranslation: optionalButtonTextTranslationKey | translate,\n  } as obs\"\n  (close)=\"closeModal()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        (titleTranslationKey !== obs.titleTranslation ? obs.titleTranslation : '') ||\n          title ||\n          obs.deleteTranslation\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n\n    <div class=\"modal-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        data-testid=\"confirmation-modal-close\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"cancelButtonType\"\n        (click)=\"closeModal()\"\n      >\n        {{\n          (cancelButtonTextTranslationKey !== obs.cancelButtonTranslation\n            ? obs.cancelButtonTranslation\n            : '') ||\n            cancelButtonText ||\n            obs.cancelTranslation\n        }}\n      </button>\n      <div *ngIf=\"spacerAfterCancelButton\" class=\"modal-spacer\"></div>\n      <button\n        *ngIf=\"showOptionalButton\"\n        data-testid=\"confirmation-modal-optional\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"optionalButtonType\"\n        (click)=\"onOptional()\"\n      >\n        {{\n          (optionalButtonTextTranslationKey !== obs.optionalButtonTranslation\n            ? obs.optionalButtonTranslation\n            : '') ||\n            optionalButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n      <button\n        data-testid=\"confirmation-modal-confirm\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"confirmButtonType\"\n        (click)=\"onConfirm()\"\n      >\n        {{\n          (confirmButtonTextTranslationKey !== obs.confirmButtonTranslation\n            ? obs.confirmButtonTranslation\n            : '') ||\n            confirmButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".modal-spacer{flex:0 1 50%}.modal-body-content{margin-top:16px}\n/*!\n * Copyright 2015-2025 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: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
@@ -15326,6 +15313,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['content', { read: TemplateRef, static: true }]
             }] } });
 
+class JsonEditorComponent {
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    set model(value) {
+        this._initialModel = value;
+    }
+    get model() {
+        return this._initialModel;
+    }
+    constructor(iconService) {
+        this.iconService = iconService;
+        this._disabled = signal(false);
+        this.fitPage = false;
+        this.fitPageExtraSpace = 0;
+        this.formatOnLoad = true;
+        this.showEditButton = true;
+        this.changeEvent = new EventEmitter();
+        this.discardEvent = new EventEmitter();
+        this.keepEditingEvent = new EventEmitter();
+        this.saveEvent = new EventEmitter();
+        this.isEditActive = signal(false);
+        this.isDisabled = computed(() => !this.isEditActive() || this._disabled());
+        this.isValidJson = signal(false);
+        this.showSaveConfirmationModal$ = new BehaviorSubject(false);
+        this.showCancelConfirmationModal$ = new BehaviorSubject(false);
+        this._changesToSave = null;
+        this.iconService.registerAll([Edit16, Save16]);
+    }
+    onCancelClick() {
+        if (!this._changesToSave) {
+            this.resetEditor();
+            return;
+        }
+        this.showCancelConfirmationModal$.next(true);
+    }
+    onEditClick() {
+        this.isEditActive.set(true);
+    }
+    onDiscardChanges() {
+        this.discardEvent.emit();
+        this.resetEditor();
+        this.model = { ...this._initialModel };
+    }
+    onKeepEditingDefinition() {
+        this.keepEditingEvent.emit();
+    }
+    onSaveChanges() {
+        if (!!this._changesToSave)
+            this.saveEvent.emit(JSON.parse(this._changesToSave));
+        this.resetEditor();
+    }
+    onSaveClick() {
+        this.showSaveConfirmationModal$.next(true);
+    }
+    onValidEvent(isValid) {
+        this.isValidJson.set(isValid);
+    }
+    onValueChangeEvent(value) {
+        if (!this.isValidJson())
+            return;
+        this._changesToSave = value;
+        this.changeEvent.emit();
+    }
+    resetEditor() {
+        this._changesToSave = null;
+        this.isEditActive.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonEditorComponent, deps: [{ token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: JsonEditorComponent, isStandalone: true, selector: "valtimo-json-editor", inputs: { disabled: "disabled", model: "model", editorOptions: "editorOptions", fitPage: "fitPage", fitPageExtraSpace: "fitPageExtraSpace", formatOnLoad: "formatOnLoad", heightPx: "heightPx", heightStyle: "heightStyle", jsonSchema: "jsonSchema", showEditButton: "showEditButton", widthPx: "widthPx" }, outputs: { changeEvent: "changeEvent", discardEvent: "discardEvent", keepEditingEvent: "keepEditingEvent", saveEvent: "saveEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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=\"cds--toolbar-content\">\n  @if (isEditActive()) {\n    <button cdsButton=\"secondary\" (click)=\"onCancelClick()\">\n      {{ 'interface.cancel' | translate }}\n\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"!isValidJson()\" (click)=\"onSaveClick()\">\n      {{ 'interface.save' | translate }}\n\n      <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  } @else {\n    <ng-content></ng-content>\n\n    <button\n      *ngIf=\"showEditButton\"\n      cdsButton=\"primary\"\n      [disabled]=\"disableEditButton\"\n      (click)=\"onEditClick()\"\n    >\n      {{ 'interface.edit' | translate }}\n\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  }\n</div>\n\n<valtimo-editor\n  [disabled]=\"isDisabled()\"\n  [fitPage]=\"fitPage\"\n  [fitPageExtraSpace]=\"fitPageExtraSpace\"\n  [formatOnLoad]=\"formatOnLoad\"\n  [heightPx]=\"heightPx\"\n  [heightStyle]=\"heightStyle\"\n  [jsonSchema]=\"jsonSchema\"\n  [model]=\"model\"\n  [widthPx]=\"widthPx\"\n  (validEvent)=\"onValidEvent($event)\"\n  (valueChangeEvent)=\"onValueChangeEvent($event)\"\n>\n</valtimo-editor>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showSaveConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.cancel\"\n  confirmButtonTextTranslationKey=\"interface.save\"\n  contentTranslationKey=\"interface.jsonEditor.saveModalContent\"\n  titleTranslationKey=\"interface.save\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showCancelConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.pendingChanges.keepEditing\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.discard\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"interface.jsonEditor.cancelModal.content\"\n  optionalButtonTextTranslationKey=\"interface.save\"\n  optionalButtonType=\"secondary\"\n  titleTranslationKey=\"interface.jsonEditor.cancelModal.title\"\n  showOptionalButton=\"true\"\n  spacerAfterCancelButton=\"true\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onDiscardChanges()\"\n  (optionalEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n", styles: [".cds--toolbar-content{background-color:var(--cds-layer)}\n/*!\n * Copyright 2015-2025 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageExtraSpace"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-json-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        EditorModule,
+                        ButtonModule,
+                        IconModule,
+                        TranslateModule,
+                        ConfirmationModalModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2025 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=\"cds--toolbar-content\">\n  @if (isEditActive()) {\n    <button cdsButton=\"secondary\" (click)=\"onCancelClick()\">\n      {{ 'interface.cancel' | translate }}\n\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"!isValidJson()\" (click)=\"onSaveClick()\">\n      {{ 'interface.save' | translate }}\n\n      <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  } @else {\n    <ng-content></ng-content>\n\n    <button\n      *ngIf=\"showEditButton\"\n      cdsButton=\"primary\"\n      [disabled]=\"disableEditButton\"\n      (click)=\"onEditClick()\"\n    >\n      {{ 'interface.edit' | translate }}\n\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  }\n</div>\n\n<valtimo-editor\n  [disabled]=\"isDisabled()\"\n  [fitPage]=\"fitPage\"\n  [fitPageExtraSpace]=\"fitPageExtraSpace\"\n  [formatOnLoad]=\"formatOnLoad\"\n  [heightPx]=\"heightPx\"\n  [heightStyle]=\"heightStyle\"\n  [jsonSchema]=\"jsonSchema\"\n  [model]=\"model\"\n  [widthPx]=\"widthPx\"\n  (validEvent)=\"onValidEvent($event)\"\n  (valueChangeEvent)=\"onValueChangeEvent($event)\"\n>\n</valtimo-editor>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showSaveConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.cancel\"\n  confirmButtonTextTranslationKey=\"interface.save\"\n  contentTranslationKey=\"interface.jsonEditor.saveModalContent\"\n  titleTranslationKey=\"interface.save\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showCancelConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.pendingChanges.keepEditing\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.discard\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"interface.jsonEditor.cancelModal.content\"\n  optionalButtonTextTranslationKey=\"interface.save\"\n  optionalButtonType=\"secondary\"\n  titleTranslationKey=\"interface.jsonEditor.cancelModal.title\"\n  showOptionalButton=\"true\"\n  spacerAfterCancelButton=\"true\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onDiscardChanges()\"\n  (optionalEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n", styles: [".cds--toolbar-content{background-color:var(--cds-layer)}\n/*!\n * Copyright 2015-2025 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: i3.IconService }], propDecorators: { disabled: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], editorOptions: [{
+                type: Input
+            }], fitPage: [{
+                type: Input
+            }], fitPageExtraSpace: [{
+                type: Input
+            }], formatOnLoad: [{
+                type: Input
+            }], heightPx: [{
+                type: Input
+            }], heightStyle: [{
+                type: Input
+            }], jsonSchema: [{
+                type: Input
+            }], showEditButton: [{
+                type: Input
+            }], widthPx: [{
+                type: Input
+            }], changeEvent: [{
+                type: Output
+            }], discardEvent: [{
+                type: Output
+            }], keepEditingEvent: [{
+                type: Output
+            }], saveEvent: [{
+                type: Output
+            }] } });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -15799,5 +15899,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoCdsOverflowButtonDirective, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, pendingChangesGuard, registerCustomFormioComponent, registerCustomFormioComponentWithClass, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent };
+export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JsonEditorComponent, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoCdsOverflowButtonDirective, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent };
 //# sourceMappingURL=valtimo-components.mjs.map