@valtimo/layout 13.33.0 → 13.35.0

package/fesm2022/valtimo-layout.mjs

@@ -1119,7 +1119,7 @@ class WidgetFormioComponent {
         }), map(([formDef]) => formDef));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetFormioComponent, deps: [{ token: i1$2.FormService }, { token: WidgetLayoutService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", widgetUuid: "widgetUuid", refreshForm: "refreshForm" }, 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\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <div class=\"formio-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".formio-widget{padding:16px}.formio-widget__header{display:flex;justify-content:space-between}.formio-widget__title-container{display:flex;align-items:center;gap:8px;margin-bottom:8px}.formio-widget{padding:24px}.formio-widget__header{display:flex;align-items:center;justify-content:space-between}.formio-widget__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2026 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i1$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", widgetUuid: "widgetUuid", refreshForm: "refreshForm" }, 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\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <div class=\"formio-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".formio-widget{padding:16px}.formio-widget__header{display:flex;justify-content:space-between}.formio-widget__title-container{display:flex;align-items:center;gap:8px;margin-bottom:8px}.formio-widget{padding:24px}.formio-widget__header{display:flex;align-items:center;justify-content:space-between}.formio-widget__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2026 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i1$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "errors", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetFormioComponent, decorators: [{
             type: Component,
@@ -4159,7 +4159,7 @@ class WidgetManagementComponent {
         this.$activeTab.set(tab);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementComponent, deps: [{ token: WIDGET_MANAGEMENT_SERVICE }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementComponent, isStandalone: true, selector: "valtimo-widget-management", inputs: { params: "params", availableWidgetTypes: "availableWidgetTypes", disableDuplicate: "disableDuplicate", enableWidgetDivider: "enableWidgetDivider", singleWidget: "singleWidget", disableJsonEditor: "disableJsonEditor", defaultWidth: "defaultWidth", widgetWizardSteps: "widgetWizardSteps" }, 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@if (!disableJsonEditor) {\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [heading]=\"'interface.editor.visualEditor' | translate\"\n      (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n    >\n      <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n    </cds-tab>\n\n    <cds-tab\n      [heading]=\"'interface.editor.jsonEditor' | translate\"\n      (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n    >\n      <valtimo-json-editor\n        *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n        [model]=\"jsonModel$ | async\"\n        [fitPage]=\"true\"\n        [fitPageSpaceAdjustment]=\"136\"\n        (saveEvent)=\"onSaveEvent($event)\"\n      ></valtimo-json-editor>\n    </cds-tab>\n  </cds-tabs>\n} @else {\n  <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n}\n\n<ng-template #widgetEditor>\n  <valtimo-widget-management-editor\n    *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n    [availableWidgetTypes]=\"availableWidgetTypes\"\n    [disableDuplicate]=\"disableDuplicate\"\n    [enableWidgetDivider]=\"enableWidgetDivider\"\n    [singleWidget]=\"singleWidget\"\n    [defaultWidth]=\"defaultWidth\"\n  ></valtimo-widget-management-editor>\n</ng-template>\n", styles: ["::ng-deep .cds--tab-content{padding: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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetManagementEditorComponent, selector: "valtimo-widget-management-editor", inputs: ["enableWidgetDivider", "params", "availableWidgetTypes", "disableDuplicate", "singleWidget", "defaultWidth"] }, { kind: "ngmodule", type: TabsModule }, { 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", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "fitPageSpaceAdjustment", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementComponent, isStandalone: true, selector: "valtimo-widget-management", inputs: { params: "params", availableWidgetTypes: "availableWidgetTypes", disableDuplicate: "disableDuplicate", enableWidgetDivider: "enableWidgetDivider", singleWidget: "singleWidget", disableJsonEditor: "disableJsonEditor", defaultWidth: "defaultWidth", widgetWizardSteps: "widgetWizardSteps" }, 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@if (!disableJsonEditor) {\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [heading]=\"'interface.editor.visualEditor' | translate\"\n      (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n    >\n      <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n    </cds-tab>\n\n    <cds-tab\n      [heading]=\"'interface.editor.jsonEditor' | translate\"\n      (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n    >\n      <valtimo-json-editor\n        *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n        [model]=\"jsonModel$ | async\"\n        [fitPage]=\"true\"\n        (saveEvent)=\"onSaveEvent($event)\"\n      ></valtimo-json-editor>\n    </cds-tab>\n  </cds-tabs>\n} @else {\n  <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n}\n\n<ng-template #widgetEditor>\n  <valtimo-widget-management-editor\n    *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n    [availableWidgetTypes]=\"availableWidgetTypes\"\n    [disableDuplicate]=\"disableDuplicate\"\n    [enableWidgetDivider]=\"enableWidgetDivider\"\n    [singleWidget]=\"singleWidget\"\n    [defaultWidth]=\"defaultWidth\"\n  ></valtimo-widget-management-editor>\n</ng-template>\n", styles: ["::ng-deep .cds--tab-content{padding: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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetManagementEditorComponent, selector: "valtimo-widget-management-editor", inputs: ["enableWidgetDivider", "params", "availableWidgetTypes", "disableDuplicate", "singleWidget", "defaultWidth"] }, { kind: "ngmodule", type: TabsModule }, { 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", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementComponent, decorators: [{
             type: Component,
@@ -4169,7 +4169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         TabsModule,
                         TranslateModule,
                         JsonEditorComponent,
-                    ], 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@if (!disableJsonEditor) {\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [heading]=\"'interface.editor.visualEditor' | translate\"\n      (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n    >\n      <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n    </cds-tab>\n\n    <cds-tab\n      [heading]=\"'interface.editor.jsonEditor' | translate\"\n      (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n    >\n      <valtimo-json-editor\n        *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n        [model]=\"jsonModel$ | async\"\n        [fitPage]=\"true\"\n        [fitPageSpaceAdjustment]=\"136\"\n        (saveEvent)=\"onSaveEvent($event)\"\n      ></valtimo-json-editor>\n    </cds-tab>\n  </cds-tabs>\n} @else {\n  <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n}\n\n<ng-template #widgetEditor>\n  <valtimo-widget-management-editor\n    *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n    [availableWidgetTypes]=\"availableWidgetTypes\"\n    [disableDuplicate]=\"disableDuplicate\"\n    [enableWidgetDivider]=\"enableWidgetDivider\"\n    [singleWidget]=\"singleWidget\"\n    [defaultWidth]=\"defaultWidth\"\n  ></valtimo-widget-management-editor>\n</ng-template>\n", styles: ["::ng-deep .cds--tab-content{padding: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"] }]
+                    ], 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@if (!disableJsonEditor) {\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [heading]=\"'interface.editor.visualEditor' | translate\"\n      (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n    >\n      <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n    </cds-tab>\n\n    <cds-tab\n      [heading]=\"'interface.editor.jsonEditor' | translate\"\n      (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n    >\n      <valtimo-json-editor\n        *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n        [model]=\"jsonModel$ | async\"\n        [fitPage]=\"true\"\n        (saveEvent)=\"onSaveEvent($event)\"\n      ></valtimo-json-editor>\n    </cds-tab>\n  </cds-tabs>\n} @else {\n  <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n}\n\n<ng-template #widgetEditor>\n  <valtimo-widget-management-editor\n    *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n    [availableWidgetTypes]=\"availableWidgetTypes\"\n    [disableDuplicate]=\"disableDuplicate\"\n    [enableWidgetDivider]=\"enableWidgetDivider\"\n    [singleWidget]=\"singleWidget\"\n    [defaultWidth]=\"defaultWidth\"\n  ></valtimo-widget-management-editor>\n</ng-template>\n", styles: ["::ng-deep .cds--tab-content{padding: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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
@@ -5282,7 +5282,7 @@ class WidgetManagementFieldsColumnComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementFieldsColumnComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormBuilder }, { token: i3.IconService }, { token: i2$2.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox", showSortableCheckbox: "showSortableCheckbox" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, 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<form\n  *ngIf=\"{\n    inputTheme: inputTheme$ | async,\n    params: params$ | async,\n    widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n    defaultSortIndex: defaultSortIndexForTemplate$ | async,\n    isInteractiveTable: $widgetType() === 'interactive-table',\n  } as data\"\n  class=\"valtimo-widget-management-field-column\"\n  [formGroup]=\"formGroup\"\n>\n  <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n    @for (formRow of formRows.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"fieldTitle\"\n        [context]=\"{\n          count: $count,\n          index: $index,\n          title: formRow.get('title')?.value,\n          defaultSortIndex: data.defaultSortIndex,\n        }\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-widget-management-field-column__item\"\n      >\n        <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n          <div\n            class=\"valtimo-widget-management-field-column__content\"\n            [class.valtimo-widget-management-field-column__content--collection]=\"\n              !!fieldWidthDropdown\n            \"\n          >\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                cdsLayer=\"2\"\n                [attr.data-test-id]=\"testIds.fieldTitleInput\"\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-test-id]=\"testIds.displayTypeDropdown\"\n              [attr.data-carbon-theme]=\"data.inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n\n            <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              @if ($widgetContext() === 'case') {\n                <valtimo-value-path-selector\n                  [attr.data-test-id]=\"testIds.valuePathSelector\"\n                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n                  [parentItem]=\"selectedCollection\"\n                ></valtimo-value-path-selector>\n              } @else {\n                <input\n                  cdsText\n                  [attr.data-carbon-theme]=\"data.inputTheme\"\n                  [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                  type=\"text\"\n                  formControlName=\"content\"\n                />\n              }\n            </cds-text-label>\n          </div>\n\n          <div class=\"valtimo-widget-management-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (WidgetDisplayTypeKey.CURRENCY) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.DATE) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.DATE_TIME) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"\n                      'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n                    \"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.ENUM) {\n                <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-widget-management-field-column__enum-form\"\n                    >\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumValueTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          [attr.data-carbon-theme]=\"data.inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"data.inputTheme\"\n                          [placeholder]=\"\n                            'widgetTabManagement.content.fields.enumDisplay' | translate\n                          \"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-widget-management-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                      </button>\n                    </form>\n                  }\n\n                  <button\n                    cdsButton=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n                  >\n                    {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n                    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n                  </button>\n                </div>\n              }\n              @case (WidgetDisplayTypeKey.NUMBER) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 3,\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.PERCENT) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 0,\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.LINK) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"linkText\"\n                  />\n                </cds-text-label>\n              }\n            }\n\n            <cds-text-label\n              *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n            >\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n                tooltip=\"{{\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n                }}\"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n                \"\n                type=\"text\"\n                formControlName=\"ellipsisCharacterLimit\"\n              />\n            </cds-text-label>\n\n            <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n              {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n            </cds-checkbox>\n\n            <div\n              *ngIf=\"showSortableCheckbox\"\n              class=\"valtimo-widget-management-field-column__sorting\"\n            >\n              <cds-checkbox\n                formControlName=\"sortable\"\n                (checkedChange)=\"onSortableCheckChange($index, $event)\"\n              >\n                {{ 'listColumn.sortable' | translate }}\n              </cds-checkbox>\n\n              <v-select\n                formControlName=\"defaultSort\"\n                [disabled]=\"!formRow.get('sortable')?.value\"\n                [items]=\"DEFAULT_SORT_OPTIONS\"\n                [dropUp]=\"false\"\n                [placeholder]=\"'interface.sorting.noDefault' | translate\"\n                [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n                [warn]=\"\n                  data.defaultSortIndex !== -1 &&\n                  data.defaultSortIndex !== $index &&\n                  !!formRow.get('sortable')?.value\n                \"\n                [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n                (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n              ></v-select>\n            </div>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template\n  #fieldTitle\n  let-defaultSortIndex=\"defaultSortIndex\"\n  let-count=\"count\"\n  let-index=\"index\"\n  let-title=\"title\"\n>\n  <div class=\"valtimo-widget-management-field-column__title\">\n    <section>\n      {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n      <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n        {{ 'ikoManagement.defaultSortTitle' | translate }}\n      </cds-tag>\n    </section>\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-widget-management-field-column__delete-button\"\n    >\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox", showSortableCheckbox: "showSortableCheckbox" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, 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<form\n  *ngIf=\"{\n    inputTheme: inputTheme$ | async,\n    params: params$ | async,\n    widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n    defaultSortIndex: defaultSortIndexForTemplate$ | async,\n    isInteractiveTable: $widgetType() === 'interactive-table',\n  } as data\"\n  class=\"valtimo-widget-management-field-column\"\n  [formGroup]=\"formGroup\"\n>\n  <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n    @for (formRow of formRows.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"fieldTitle\"\n        [context]=\"{\n          count: $count,\n          index: $index,\n          title: formRow.get('title')?.value,\n          defaultSortIndex: data.defaultSortIndex,\n        }\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-widget-management-field-column__item\"\n      >\n        <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n          <div\n            class=\"valtimo-widget-management-field-column__content\"\n            [class.valtimo-widget-management-field-column__content--collection]=\"\n              !!fieldWidthDropdown\n            \"\n          >\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                cdsLayer=\"2\"\n                [attr.data-test-id]=\"testIds.fieldTitleInput\"\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-test-id]=\"testIds.displayTypeDropdown\"\n              [attr.data-carbon-theme]=\"data.inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n\n            <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              @if ($widgetContext() === 'case') {\n                <valtimo-value-path-selector\n                  [attr.data-test-id]=\"testIds.valuePathSelector\"\n                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n                  [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n                  [parentItem]=\"selectedCollection\"\n                ></valtimo-value-path-selector>\n              } @else {\n                <input\n                  cdsText\n                  [attr.data-carbon-theme]=\"data.inputTheme\"\n                  [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                  type=\"text\"\n                  formControlName=\"content\"\n                />\n              }\n            </cds-text-label>\n          </div>\n\n          <div class=\"valtimo-widget-management-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (WidgetDisplayTypeKey.CURRENCY) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.DATE) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.DATE_TIME) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"\n                      'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n                    \"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.ENUM) {\n                <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-widget-management-field-column__enum-form\"\n                    >\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumValueTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          [attr.data-carbon-theme]=\"data.inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"data.inputTheme\"\n                          [placeholder]=\"\n                            'widgetTabManagement.content.fields.enumDisplay' | translate\n                          \"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-widget-management-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                      </button>\n                    </form>\n                  }\n\n                  <button\n                    cdsButton=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n                  >\n                    {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n                    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n                  </button>\n                </div>\n              }\n              @case (WidgetDisplayTypeKey.NUMBER) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 3,\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.PERCENT) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 0,\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.LINK) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"linkText\"\n                  />\n                </cds-text-label>\n              }\n            }\n\n            <cds-text-label\n              *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n            >\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n                tooltip=\"{{\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n                }}\"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n                \"\n                type=\"text\"\n                formControlName=\"ellipsisCharacterLimit\"\n              />\n            </cds-text-label>\n\n            <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n              {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n            </cds-checkbox>\n\n            <div\n              *ngIf=\"showSortableCheckbox\"\n              class=\"valtimo-widget-management-field-column__sorting\"\n            >\n              <cds-checkbox\n                formControlName=\"sortable\"\n                (checkedChange)=\"onSortableCheckChange($index, $event)\"\n              >\n                {{ 'listColumn.sortable' | translate }}\n              </cds-checkbox>\n\n              <v-select\n                formControlName=\"defaultSort\"\n                [disabled]=\"!formRow.get('sortable')?.value\"\n                [items]=\"DEFAULT_SORT_OPTIONS\"\n                [dropUp]=\"false\"\n                [placeholder]=\"'interface.sorting.noDefault' | translate\"\n                [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n                [warn]=\"\n                  data.defaultSortIndex !== -1 &&\n                  data.defaultSortIndex !== $index &&\n                  !!formRow.get('sortable')?.value\n                \"\n                [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n                (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n              ></v-select>\n            </div>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template\n  #fieldTitle\n  let-defaultSortIndex=\"defaultSortIndex\"\n  let-count=\"count\"\n  let-index=\"index\"\n  let-title=\"title\"\n>\n  <div class=\"valtimo-widget-management-field-column__title\">\n    <section>\n      {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n      <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n        {{ 'ikoManagement.defaultSortTitle' | translate }}\n      </cds-tag>\n    </section>\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-widget-management-field-column__delete-button\"\n    >\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementFieldsColumnComponent, decorators: [{
             type: Component,
@@ -5302,7 +5302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         SelectModule,
                         TagModule,
                         ToggleModule,
-                    ], 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<form\n  *ngIf=\"{\n    inputTheme: inputTheme$ | async,\n    params: params$ | async,\n    widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n    defaultSortIndex: defaultSortIndexForTemplate$ | async,\n    isInteractiveTable: $widgetType() === 'interactive-table',\n  } as data\"\n  class=\"valtimo-widget-management-field-column\"\n  [formGroup]=\"formGroup\"\n>\n  <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n    @for (formRow of formRows.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"fieldTitle\"\n        [context]=\"{\n          count: $count,\n          index: $index,\n          title: formRow.get('title')?.value,\n          defaultSortIndex: data.defaultSortIndex,\n        }\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-widget-management-field-column__item\"\n      >\n        <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n          <div\n            class=\"valtimo-widget-management-field-column__content\"\n            [class.valtimo-widget-management-field-column__content--collection]=\"\n              !!fieldWidthDropdown\n            \"\n          >\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                cdsLayer=\"2\"\n                [attr.data-test-id]=\"testIds.fieldTitleInput\"\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-test-id]=\"testIds.displayTypeDropdown\"\n              [attr.data-carbon-theme]=\"data.inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n\n            <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              @if ($widgetContext() === 'case') {\n                <valtimo-value-path-selector\n                  [attr.data-test-id]=\"testIds.valuePathSelector\"\n                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n                  [parentItem]=\"selectedCollection\"\n                ></valtimo-value-path-selector>\n              } @else {\n                <input\n                  cdsText\n                  [attr.data-carbon-theme]=\"data.inputTheme\"\n                  [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                  type=\"text\"\n                  formControlName=\"content\"\n                />\n              }\n            </cds-text-label>\n          </div>\n\n          <div class=\"valtimo-widget-management-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (WidgetDisplayTypeKey.CURRENCY) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.DATE) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.DATE_TIME) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"\n                      'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n                    \"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.ENUM) {\n                <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-widget-management-field-column__enum-form\"\n                    >\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumValueTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          [attr.data-carbon-theme]=\"data.inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"data.inputTheme\"\n                          [placeholder]=\"\n                            'widgetTabManagement.content.fields.enumDisplay' | translate\n                          \"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-widget-management-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                      </button>\n                    </form>\n                  }\n\n                  <button\n                    cdsButton=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n                  >\n                    {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n                    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n                  </button>\n                </div>\n              }\n              @case (WidgetDisplayTypeKey.NUMBER) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 3,\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.PERCENT) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 0,\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.LINK) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"linkText\"\n                  />\n                </cds-text-label>\n              }\n            }\n\n            <cds-text-label\n              *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n            >\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n                tooltip=\"{{\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n                }}\"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n                \"\n                type=\"text\"\n                formControlName=\"ellipsisCharacterLimit\"\n              />\n            </cds-text-label>\n\n            <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n              {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n            </cds-checkbox>\n\n            <div\n              *ngIf=\"showSortableCheckbox\"\n              class=\"valtimo-widget-management-field-column__sorting\"\n            >\n              <cds-checkbox\n                formControlName=\"sortable\"\n                (checkedChange)=\"onSortableCheckChange($index, $event)\"\n              >\n                {{ 'listColumn.sortable' | translate }}\n              </cds-checkbox>\n\n              <v-select\n                formControlName=\"defaultSort\"\n                [disabled]=\"!formRow.get('sortable')?.value\"\n                [items]=\"DEFAULT_SORT_OPTIONS\"\n                [dropUp]=\"false\"\n                [placeholder]=\"'interface.sorting.noDefault' | translate\"\n                [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n                [warn]=\"\n                  data.defaultSortIndex !== -1 &&\n                  data.defaultSortIndex !== $index &&\n                  !!formRow.get('sortable')?.value\n                \"\n                [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n                (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n              ></v-select>\n            </div>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template\n  #fieldTitle\n  let-defaultSortIndex=\"defaultSortIndex\"\n  let-count=\"count\"\n  let-index=\"index\"\n  let-title=\"title\"\n>\n  <div class=\"valtimo-widget-management-field-column__title\">\n    <section>\n      {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n      <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n        {{ 'ikoManagement.defaultSortTitle' | translate }}\n      </cds-tag>\n    </section>\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-widget-management-field-column__delete-button\"\n    >\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\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"] }]
+                    ], 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<form\n  *ngIf=\"{\n    inputTheme: inputTheme$ | async,\n    params: params$ | async,\n    widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n    defaultSortIndex: defaultSortIndexForTemplate$ | async,\n    isInteractiveTable: $widgetType() === 'interactive-table',\n  } as data\"\n  class=\"valtimo-widget-management-field-column\"\n  [formGroup]=\"formGroup\"\n>\n  <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n    @for (formRow of formRows.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"fieldTitle\"\n        [context]=\"{\n          count: $count,\n          index: $index,\n          title: formRow.get('title')?.value,\n          defaultSortIndex: data.defaultSortIndex,\n        }\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-widget-management-field-column__item\"\n      >\n        <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n          <div\n            class=\"valtimo-widget-management-field-column__content\"\n            [class.valtimo-widget-management-field-column__content--collection]=\"\n              !!fieldWidthDropdown\n            \"\n          >\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                cdsLayer=\"2\"\n                [attr.data-test-id]=\"testIds.fieldTitleInput\"\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-test-id]=\"testIds.displayTypeDropdown\"\n              [attr.data-carbon-theme]=\"data.inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n\n            <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              @if ($widgetContext() === 'case') {\n                <valtimo-value-path-selector\n                  [attr.data-test-id]=\"testIds.valuePathSelector\"\n                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n                  [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n                  [parentItem]=\"selectedCollection\"\n                ></valtimo-value-path-selector>\n              } @else {\n                <input\n                  cdsText\n                  [attr.data-carbon-theme]=\"data.inputTheme\"\n                  [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                  type=\"text\"\n                  formControlName=\"content\"\n                />\n              }\n            </cds-text-label>\n          </div>\n\n          <div class=\"valtimo-widget-management-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (WidgetDisplayTypeKey.CURRENCY) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.DATE) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.DATE_TIME) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"\n                      'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n                    \"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.ENUM) {\n                <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-widget-management-field-column__enum-form\"\n                    >\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumValueTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          [attr.data-carbon-theme]=\"data.inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"data.inputTheme\"\n                          [placeholder]=\"\n                            'widgetTabManagement.content.fields.enumDisplay' | translate\n                          \"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-widget-management-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                      </button>\n                    </form>\n                  }\n\n                  <button\n                    cdsButton=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n                  >\n                    {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n                    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n                  </button>\n                </div>\n              }\n              @case (WidgetDisplayTypeKey.NUMBER) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 3,\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.PERCENT) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 0,\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.LINK) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"linkText\"\n                  />\n                </cds-text-label>\n              }\n            }\n\n            <cds-text-label\n              *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n            >\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n                tooltip=\"{{\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n                }}\"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n                \"\n                type=\"text\"\n                formControlName=\"ellipsisCharacterLimit\"\n              />\n            </cds-text-label>\n\n            <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n              {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n            </cds-checkbox>\n\n            <div\n              *ngIf=\"showSortableCheckbox\"\n              class=\"valtimo-widget-management-field-column__sorting\"\n            >\n              <cds-checkbox\n                formControlName=\"sortable\"\n                (checkedChange)=\"onSortableCheckChange($index, $event)\"\n              >\n                {{ 'listColumn.sortable' | translate }}\n              </cds-checkbox>\n\n              <v-select\n                formControlName=\"defaultSort\"\n                [disabled]=\"!formRow.get('sortable')?.value\"\n                [items]=\"DEFAULT_SORT_OPTIONS\"\n                [dropUp]=\"false\"\n                [placeholder]=\"'interface.sorting.noDefault' | translate\"\n                [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n                [warn]=\"\n                  data.defaultSortIndex !== -1 &&\n                  data.defaultSortIndex !== $index &&\n                  !!formRow.get('sortable')?.value\n                \"\n                [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n                (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n              ></v-select>\n            </div>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template\n  #fieldTitle\n  let-defaultSortIndex=\"defaultSortIndex\"\n  let-count=\"count\"\n  let-index=\"index\"\n  let-title=\"title\"\n>\n  <div class=\"valtimo-widget-management-field-column__title\">\n    <section>\n      {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n      <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n        {{ 'ikoManagement.defaultSortTitle' | translate }}\n      </cds-tag>\n    </section>\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-widget-management-field-column__delete-button\"\n    >\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\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: i1$1.CdsThemeService }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormBuilder }, { type: i3.IconService }, { type: i2$2.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
@@ -5542,7 +5542,7 @@ class WidgetManagementTableComponent {
         this.selectedCollection$.next(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementTableComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i2$2.TranslateService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementTableComponent, isStandalone: true, selector: "valtimo-widget-management-table", inputs: { showFirstColumnOption: "showFirstColumnOption", sortableColumns: "sortableColumns" }, host: { properties: { "class": "this.class" } }, 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<form\n  *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <div\n    class=\"valtimo-widget-management-table__path-selector\"\n    [attr.data-carbon-theme]=\"theme\"\n  >\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n      [tooltip]=\"collectionDataTooltip$ | async\"\n    >\n    </v-input-label>\n\n    @if ($widgetContext() === 'case') {\n      <valtimo-value-path-selector\n        formControlName=\"collection\"\n        [attr.data-carbon-theme]=\"obs.theme\"\n        [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n        [type]=\"ValuePathType.COLLECTION\"\n        (collectionSelected)=\"onCollectionSelected($event)\"\n      ></valtimo-value-path-selector>\n    } @else {\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [attr.data-carbon-theme]=\"theme\"\n        [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n        type=\"text\"\n      />\n    }\n  </div>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"$content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  [selectedCollection]=\"selectedCollection$ | async\"\n  [showSortableCheckbox]=\"sortableColumns\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n  <span class=\"valtimo-widget-management-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"$checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background-color:var(--cds-layer-02)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column;padding:8px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__path-selector ::ng-deep .cds--text-input,.valtimo-widget-management-table__path-selector ::ng-deep .cds--list-box{background:var(--cds-layer-02)}.valtimo-widget-management-table ::ng-deep .cds--text-input,.valtimo-widget-management-table ::ng-deep .cds--list-box{background:var(--cds-layer-01)}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementTableComponent, isStandalone: true, selector: "valtimo-widget-management-table", inputs: { showFirstColumnOption: "showFirstColumnOption", sortableColumns: "sortableColumns" }, host: { properties: { "class": "this.class" } }, 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<form\n  *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <div\n    class=\"valtimo-widget-management-table__path-selector\"\n    [attr.data-carbon-theme]=\"theme\"\n  >\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n      [tooltip]=\"collectionDataTooltip$ | async\"\n    >\n    </v-input-label>\n\n    @if ($widgetContext() === 'case') {\n      <valtimo-value-path-selector\n        formControlName=\"collection\"\n        [attr.data-carbon-theme]=\"obs.theme\"\n        [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n        [type]=\"ValuePathType.COLLECTION\"\n        (collectionSelected)=\"onCollectionSelected($event)\"\n      ></valtimo-value-path-selector>\n    } @else {\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [attr.data-carbon-theme]=\"theme\"\n        [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n        type=\"text\"\n      />\n    }\n  </div>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"$content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  [selectedCollection]=\"selectedCollection$ | async\"\n  [showSortableCheckbox]=\"sortableColumns\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n  <span class=\"valtimo-widget-management-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"$checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background-color:var(--cds-layer-02)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column;padding:8px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__path-selector ::ng-deep .cds--text-input,.valtimo-widget-management-table__path-selector ::ng-deep .cds--list-box{background:var(--cds-layer-02)}.valtimo-widget-management-table ::ng-deep .cds--text-input,.valtimo-widget-management-table ::ng-deep .cds--list-box{background:var(--cds-layer-01)}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementTableComponent, decorators: [{
             type: Component,
@@ -5558,7 +5558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         LayerModule,
                         ValuePathSelectorComponent,
                         MdiIconSelectorComponent,
-                    ], 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<form\n  *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <div\n    class=\"valtimo-widget-management-table__path-selector\"\n    [attr.data-carbon-theme]=\"theme\"\n  >\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n      [tooltip]=\"collectionDataTooltip$ | async\"\n    >\n    </v-input-label>\n\n    @if ($widgetContext() === 'case') {\n      <valtimo-value-path-selector\n        formControlName=\"collection\"\n        [attr.data-carbon-theme]=\"obs.theme\"\n        [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n        [type]=\"ValuePathType.COLLECTION\"\n        (collectionSelected)=\"onCollectionSelected($event)\"\n      ></valtimo-value-path-selector>\n    } @else {\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [attr.data-carbon-theme]=\"theme\"\n        [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n        type=\"text\"\n      />\n    }\n  </div>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"$content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  [selectedCollection]=\"selectedCollection$ | async\"\n  [showSortableCheckbox]=\"sortableColumns\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n  <span class=\"valtimo-widget-management-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"$checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background-color:var(--cds-layer-02)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column;padding:8px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__path-selector ::ng-deep .cds--text-input,.valtimo-widget-management-table__path-selector ::ng-deep .cds--list-box{background:var(--cds-layer-02)}.valtimo-widget-management-table ::ng-deep .cds--text-input,.valtimo-widget-management-table ::ng-deep .cds--list-box{background:var(--cds-layer-01)}\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"] }]
+                    ], 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<form\n  *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <div\n    class=\"valtimo-widget-management-table__path-selector\"\n    [attr.data-carbon-theme]=\"theme\"\n  >\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n      [tooltip]=\"collectionDataTooltip$ | async\"\n    >\n    </v-input-label>\n\n    @if ($widgetContext() === 'case') {\n      <valtimo-value-path-selector\n        formControlName=\"collection\"\n        [attr.data-carbon-theme]=\"obs.theme\"\n        [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n        [type]=\"ValuePathType.COLLECTION\"\n        (collectionSelected)=\"onCollectionSelected($event)\"\n      ></valtimo-value-path-selector>\n    } @else {\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [attr.data-carbon-theme]=\"theme\"\n        [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n        type=\"text\"\n      />\n    }\n  </div>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"$content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  [selectedCollection]=\"selectedCollection$ | async\"\n  [showSortableCheckbox]=\"sortableColumns\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n  <span class=\"valtimo-widget-management-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"$checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background-color:var(--cds-layer-02)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column;padding:8px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__path-selector ::ng-deep .cds--text-input,.valtimo-widget-management-table__path-selector ::ng-deep .cds--list-box{background:var(--cds-layer-02)}.valtimo-widget-management-table ::ng-deep .cds--text-input,.valtimo-widget-management-table ::ng-deep .cds--list-box{background:var(--cds-layer-01)}\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: i1$1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i2$2.TranslateService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
@@ -5765,7 +5765,7 @@ class WidgetManagementCollectionComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementCollectionComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i2$2.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementCollectionComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, 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<ng-container *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <valtimo-mdi-icon-selector\n      [cdsLayer]=\"1\"\n      formControlName=\"widgetIcon\"\n    ></valtimo-mdi-icon-selector>\n\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <div class=\"valtimo-widget-management-collection__value-field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        [tooltip]=\"collectionDataTooltip$ | async\"\n      >\n      </v-input-label>\n\n      @if ($widgetContext() === 'case') {\n        <valtimo-value-path-selector\n          formControlName=\"collection\"\n          [attr.data-carbon-theme]=\"theme\"\n          [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n          [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n          [type]=\"ValuePathType.COLLECTION\"\n          (collectionSelected)=\"onCollectionSelected($event)\"\n        ></valtimo-value-path-selector>\n      } @else {\n        <input\n          formControlName=\"collection\"\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n          type=\"text\"\n        />\n      }\n    </div>\n  </form>\n\n  <ng-content></ng-content>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n    <section class=\"valtimo-widget-management-collection__card-title\">\n      <div class=\"valtimo-widget-management-collection__path-selector\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n        >\n        </v-input-label>\n        @if ($widgetContext() === 'case') {\n          <valtimo-value-path-selector\n            formControlName=\"value\"\n            [attr.data-carbon-theme]=\"theme\"\n            [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n            [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n            [parentItem]=\"selectedCollection$ | async\"\n          ></valtimo-value-path-selector>\n        } @else {\n          <input\n            formControlName=\"value\"\n            cdsText\n            [attr.data-carbon-theme]=\"theme\"\n            [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n            type=\"text\"\n          />\n        }\n      </div>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-widget-management-collection__card-options\">\n      @switch (cardForm.get('type').value.id) {\n        @case (WidgetDisplayTypeKey.CURRENCY) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.DATE) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.DATE_TIME) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    [attr.data-carbon-theme]=\"theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n                >\n                  <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                </button>\n              </form>\n            }\n\n            <button\n              cdsButton=\"primary\"\n              size=\"sm\"\n              (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (WidgetDisplayTypeKey.NUMBER) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 3,\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.PERCENT) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 0,\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-widget-management-fields-column\n    [columnData]=\"$content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    [showHideWhenEmptyCheckbox]=\"true\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n    [selectedCollection]=\"selectedCollection$ | async\"\n  >\n  </valtimo-widget-management-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer-02);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer-02);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-01)}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { 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: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementCollectionComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, 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<ng-container *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <valtimo-mdi-icon-selector\n      [cdsLayer]=\"1\"\n      formControlName=\"widgetIcon\"\n    ></valtimo-mdi-icon-selector>\n\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <div class=\"valtimo-widget-management-collection__value-field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        [tooltip]=\"collectionDataTooltip$ | async\"\n      >\n      </v-input-label>\n\n      @if ($widgetContext() === 'case') {\n        <valtimo-value-path-selector\n          formControlName=\"collection\"\n          [attr.data-carbon-theme]=\"theme\"\n          [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n          [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n          [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n          [type]=\"ValuePathType.COLLECTION\"\n          (collectionSelected)=\"onCollectionSelected($event)\"\n        ></valtimo-value-path-selector>\n      } @else {\n        <input\n          formControlName=\"collection\"\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n          type=\"text\"\n        />\n      }\n    </div>\n  </form>\n\n  <ng-content></ng-content>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n    <section class=\"valtimo-widget-management-collection__card-title\">\n      <div class=\"valtimo-widget-management-collection__path-selector\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n        >\n        </v-input-label>\n        @if ($widgetContext() === 'case') {\n          <valtimo-value-path-selector\n            formControlName=\"value\"\n            [attr.data-carbon-theme]=\"theme\"\n            [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n            [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n            [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n            [parentItem]=\"selectedCollection$ | async\"\n          ></valtimo-value-path-selector>\n        } @else {\n          <input\n            formControlName=\"value\"\n            cdsText\n            [attr.data-carbon-theme]=\"theme\"\n            [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n            type=\"text\"\n          />\n        }\n      </div>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-widget-management-collection__card-options\">\n      @switch (cardForm.get('type').value.id) {\n        @case (WidgetDisplayTypeKey.CURRENCY) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.DATE) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.DATE_TIME) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    [attr.data-carbon-theme]=\"theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n                >\n                  <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                </button>\n              </form>\n            }\n\n            <button\n              cdsButton=\"primary\"\n              size=\"sm\"\n              (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (WidgetDisplayTypeKey.NUMBER) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 3,\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.PERCENT) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 0,\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-widget-management-fields-column\n    [columnData]=\"$content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    [showHideWhenEmptyCheckbox]=\"true\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n    [selectedCollection]=\"selectedCollection$ | async\"\n  >\n  </valtimo-widget-management-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer-02);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer-02);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-01)}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { 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: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementCollectionComponent, decorators: [{
             type: Component,
@@ -5781,7 +5781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         InputLabelModule,
                         ValuePathSelectorComponent,
                         MdiIconSelectorComponent,
-                    ], 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<ng-container *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <valtimo-mdi-icon-selector\n      [cdsLayer]=\"1\"\n      formControlName=\"widgetIcon\"\n    ></valtimo-mdi-icon-selector>\n\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <div class=\"valtimo-widget-management-collection__value-field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        [tooltip]=\"collectionDataTooltip$ | async\"\n      >\n      </v-input-label>\n\n      @if ($widgetContext() === 'case') {\n        <valtimo-value-path-selector\n          formControlName=\"collection\"\n          [attr.data-carbon-theme]=\"theme\"\n          [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n          [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n          [type]=\"ValuePathType.COLLECTION\"\n          (collectionSelected)=\"onCollectionSelected($event)\"\n        ></valtimo-value-path-selector>\n      } @else {\n        <input\n          formControlName=\"collection\"\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n          type=\"text\"\n        />\n      }\n    </div>\n  </form>\n\n  <ng-content></ng-content>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n    <section class=\"valtimo-widget-management-collection__card-title\">\n      <div class=\"valtimo-widget-management-collection__path-selector\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n        >\n        </v-input-label>\n        @if ($widgetContext() === 'case') {\n          <valtimo-value-path-selector\n            formControlName=\"value\"\n            [attr.data-carbon-theme]=\"theme\"\n            [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n            [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n            [parentItem]=\"selectedCollection$ | async\"\n          ></valtimo-value-path-selector>\n        } @else {\n          <input\n            formControlName=\"value\"\n            cdsText\n            [attr.data-carbon-theme]=\"theme\"\n            [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n            type=\"text\"\n          />\n        }\n      </div>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-widget-management-collection__card-options\">\n      @switch (cardForm.get('type').value.id) {\n        @case (WidgetDisplayTypeKey.CURRENCY) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.DATE) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.DATE_TIME) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    [attr.data-carbon-theme]=\"theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n                >\n                  <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                </button>\n              </form>\n            }\n\n            <button\n              cdsButton=\"primary\"\n              size=\"sm\"\n              (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (WidgetDisplayTypeKey.NUMBER) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 3,\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.PERCENT) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 0,\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-widget-management-fields-column\n    [columnData]=\"$content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    [showHideWhenEmptyCheckbox]=\"true\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n    [selectedCollection]=\"selectedCollection$ | async\"\n  >\n  </valtimo-widget-management-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer-02);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer-02);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-01)}\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"] }]
+                    ], 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<ng-container *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <valtimo-mdi-icon-selector\n      [cdsLayer]=\"1\"\n      formControlName=\"widgetIcon\"\n    ></valtimo-mdi-icon-selector>\n\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <div class=\"valtimo-widget-management-collection__value-field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        [tooltip]=\"collectionDataTooltip$ | async\"\n      >\n      </v-input-label>\n\n      @if ($widgetContext() === 'case') {\n        <valtimo-value-path-selector\n          formControlName=\"collection\"\n          [attr.data-carbon-theme]=\"theme\"\n          [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n          [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n          [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n          [type]=\"ValuePathType.COLLECTION\"\n          (collectionSelected)=\"onCollectionSelected($event)\"\n        ></valtimo-value-path-selector>\n      } @else {\n        <input\n          formControlName=\"collection\"\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n          type=\"text\"\n        />\n      }\n    </div>\n  </form>\n\n  <ng-content></ng-content>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n    <section class=\"valtimo-widget-management-collection__card-title\">\n      <div class=\"valtimo-widget-management-collection__path-selector\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n        >\n        </v-input-label>\n        @if ($widgetContext() === 'case') {\n          <valtimo-value-path-selector\n            formControlName=\"value\"\n            [attr.data-carbon-theme]=\"theme\"\n            [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n            [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n            [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n            [parentItem]=\"selectedCollection$ | async\"\n          ></valtimo-value-path-selector>\n        } @else {\n          <input\n            formControlName=\"value\"\n            cdsText\n            [attr.data-carbon-theme]=\"theme\"\n            [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n            type=\"text\"\n          />\n        }\n      </div>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-widget-management-collection__card-options\">\n      @switch (cardForm.get('type').value.id) {\n        @case (WidgetDisplayTypeKey.CURRENCY) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.DATE) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.DATE_TIME) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    [attr.data-carbon-theme]=\"theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n                >\n                  <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                </button>\n              </form>\n            }\n\n            <button\n              cdsButton=\"primary\"\n              size=\"sm\"\n              (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (WidgetDisplayTypeKey.NUMBER) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 3,\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.PERCENT) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 0,\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-widget-management-fields-column\n    [columnData]=\"$content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    [showHideWhenEmptyCheckbox]=\"true\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n    [selectedCollection]=\"selectedCollection$ | async\"\n  >\n  </valtimo-widget-management-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer-02);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer-02);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-01)}\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: i1$1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i2$2.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
@@ -6052,6 +6052,7 @@ class WidgetManagementPersonCardComponent {
             city: this.fb.control(this.person?.city ?? ''),
         });
         this._subscriptions = new Subscription();
+        this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
     }
     ngOnInit() {
         if (this.widgetWizardService.$disableTitleInput())
@@ -6087,7 +6088,7 @@ class WidgetManagementPersonCardComponent {
         this.widgetWizardService.$widgetContentValid.set(this.form.valid);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementPersonCardComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetManagementPersonCardComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 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<form [formGroup]=\"form\">\n  <section\n    *ngIf=\"$showTitleInput()\"\n    class=\"valtimo-widget-management-person-card__title-form\"\n  >\n    <cds-text-label class=\"valtimo-widget-management-person-card__title-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"widgetTitle\"\n        cdsText\n        [attr.data-test-id]=\"testIds.widgetTitleInput\"\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <valtimo-mdi-icon-selector\n      [cdsLayer]=\"1\"\n      formControlName=\"widgetIcon\"\n    ></valtimo-mdi-icon-selector>\n  </section>\n\n  <div class=\"valtimo-widget-management-person-card__action-button-section\">\n    <ng-content></ng-content>\n  </div>\n\n  <section class=\"valtimo-widget-management-person-card__person-fields\">\n    <div\n      class=\"valtimo-widget-management-person-card__field valtimo-widget-management-person-card__field--full\"\n    >\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.fullNameLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.fullNameInput\"\n        formControlName=\"fullName\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.birthDateLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.birthDateInput\"\n        formControlName=\"birthDate\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label [title]=\"'widgetTabManagement.content.person-card.bsnLabel' | translate\">\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.bsnInput\"\n        formControlName=\"bsn\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.phoneLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.phoneInput\"\n        formControlName=\"phone\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.emailLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.emailInput\"\n        formControlName=\"email\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label [title]=\"'widgetTabManagement.content.person-card.cityLabel' | translate\">\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.cityInput\"\n        formControlName=\"city\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n  </section>\n</form>\n", styles: [".valtimo-widget-management-person-card{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-person-card>form{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-person-card__title-form{background:var(--cds-layer-02);display:flex;gap:16px}.valtimo-widget-management-person-card__title-input{max-width:288px}.valtimo-widget-management-person-card__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-person-card__person-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-person-card__field{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-person-card__field .cds--text-input,.valtimo-widget-management-person-card__field .cds--list-box{background:var(--cds-layer-02)}.valtimo-widget-management-person-card__field--full{grid-column:1/-1}\n/*!\n * Copyright 2015-2026 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetManagementPersonCardComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 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<form [formGroup]=\"form\">\n  <section\n    *ngIf=\"$showTitleInput()\"\n    class=\"valtimo-widget-management-person-card__title-form\"\n  >\n    <cds-text-label class=\"valtimo-widget-management-person-card__title-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"widgetTitle\"\n        cdsText\n        [attr.data-test-id]=\"testIds.widgetTitleInput\"\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <valtimo-mdi-icon-selector\n      [cdsLayer]=\"1\"\n      formControlName=\"widgetIcon\"\n    ></valtimo-mdi-icon-selector>\n  </section>\n\n  <div class=\"valtimo-widget-management-person-card__action-button-section\">\n    <ng-content></ng-content>\n  </div>\n\n  <section class=\"valtimo-widget-management-person-card__person-fields\">\n    <div\n      class=\"valtimo-widget-management-person-card__field valtimo-widget-management-person-card__field--full\"\n    >\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.fullNameLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.fullNameInput\"\n        formControlName=\"fullName\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.birthDateLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.birthDateInput\"\n        formControlName=\"birthDate\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label [title]=\"'widgetTabManagement.content.person-card.bsnLabel' | translate\">\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.bsnInput\"\n        formControlName=\"bsn\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.phoneLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.phoneInput\"\n        formControlName=\"phone\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.emailLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.emailInput\"\n        formControlName=\"email\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label [title]=\"'widgetTabManagement.content.person-card.cityLabel' | translate\">\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.cityInput\"\n        formControlName=\"city\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n  </section>\n</form>\n", styles: [".valtimo-widget-management-person-card{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-person-card>form{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-person-card__title-form{background:var(--cds-layer-02);display:flex;gap:16px}.valtimo-widget-management-person-card__title-input{max-width:288px}.valtimo-widget-management-person-card__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-person-card__person-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-person-card__field{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-person-card__field .cds--text-input,.valtimo-widget-management-person-card__field .cds--list-box{background:var(--cds-layer-02)}.valtimo-widget-management-person-card__field--full{grid-column:1/-1}\n/*!\n * Copyright 2015-2026 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementPersonCardComponent, decorators: [{
             type: Component,
@@ -6100,7 +6101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         MdiIconSelectorComponent,
                         ValuePathSelectorComponent,
                         LayerModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2026 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<form [formGroup]=\"form\">\n  <section\n    *ngIf=\"$showTitleInput()\"\n    class=\"valtimo-widget-management-person-card__title-form\"\n  >\n    <cds-text-label class=\"valtimo-widget-management-person-card__title-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"widgetTitle\"\n        cdsText\n        [attr.data-test-id]=\"testIds.widgetTitleInput\"\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <valtimo-mdi-icon-selector\n      [cdsLayer]=\"1\"\n      formControlName=\"widgetIcon\"\n    ></valtimo-mdi-icon-selector>\n  </section>\n\n  <div class=\"valtimo-widget-management-person-card__action-button-section\">\n    <ng-content></ng-content>\n  </div>\n\n  <section class=\"valtimo-widget-management-person-card__person-fields\">\n    <div\n      class=\"valtimo-widget-management-person-card__field valtimo-widget-management-person-card__field--full\"\n    >\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.fullNameLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.fullNameInput\"\n        formControlName=\"fullName\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.birthDateLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.birthDateInput\"\n        formControlName=\"birthDate\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label [title]=\"'widgetTabManagement.content.person-card.bsnLabel' | translate\">\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.bsnInput\"\n        formControlName=\"bsn\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.phoneLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.phoneInput\"\n        formControlName=\"phone\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.emailLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.emailInput\"\n        formControlName=\"email\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label [title]=\"'widgetTabManagement.content.person-card.cityLabel' | translate\">\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.cityInput\"\n        formControlName=\"city\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n      ></valtimo-value-path-selector>\n    </div>\n  </section>\n</form>\n", styles: [".valtimo-widget-management-person-card{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-person-card>form{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-person-card__title-form{background:var(--cds-layer-02);display:flex;gap:16px}.valtimo-widget-management-person-card__title-input{max-width:288px}.valtimo-widget-management-person-card__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-person-card__person-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-person-card__field{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-person-card__field .cds--text-input,.valtimo-widget-management-person-card__field .cds--list-box{background:var(--cds-layer-02)}.valtimo-widget-management-person-card__field--full{grid-column:1/-1}\n/*!\n * Copyright 2015-2026 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"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2026 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<form [formGroup]=\"form\">\n  <section\n    *ngIf=\"$showTitleInput()\"\n    class=\"valtimo-widget-management-person-card__title-form\"\n  >\n    <cds-text-label class=\"valtimo-widget-management-person-card__title-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"widgetTitle\"\n        cdsText\n        [attr.data-test-id]=\"testIds.widgetTitleInput\"\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <valtimo-mdi-icon-selector\n      [cdsLayer]=\"1\"\n      formControlName=\"widgetIcon\"\n    ></valtimo-mdi-icon-selector>\n  </section>\n\n  <div class=\"valtimo-widget-management-person-card__action-button-section\">\n    <ng-content></ng-content>\n  </div>\n\n  <section class=\"valtimo-widget-management-person-card__person-fields\">\n    <div\n      class=\"valtimo-widget-management-person-card__field valtimo-widget-management-person-card__field--full\"\n    >\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.fullNameLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.fullNameInput\"\n        formControlName=\"fullName\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.birthDateLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.birthDateInput\"\n        formControlName=\"birthDate\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label [title]=\"'widgetTabManagement.content.person-card.bsnLabel' | translate\">\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.bsnInput\"\n        formControlName=\"bsn\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.phoneLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.phoneInput\"\n        formControlName=\"phone\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.person-card.emailLabel' | translate\"\n      >\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.emailInput\"\n        formControlName=\"email\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <div class=\"valtimo-widget-management-person-card__field\">\n      <v-input-label [title]=\"'widgetTabManagement.content.person-card.cityLabel' | translate\">\n      </v-input-label>\n\n      <valtimo-value-path-selector\n        *ngIf=\"params$ | async as params\"\n        [attr.data-test-id]=\"testIds.cityInput\"\n        formControlName=\"city\"\n        [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n      ></valtimo-value-path-selector>\n    </div>\n  </section>\n</form>\n", styles: [".valtimo-widget-management-person-card{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-person-card>form{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-person-card__title-form{background:var(--cds-layer-02);display:flex;gap:16px}.valtimo-widget-management-person-card__title-input{max-width:288px}.valtimo-widget-management-person-card__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-person-card__person-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-person-card__field{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-person-card__field .cds--text-input,.valtimo-widget-management-person-card__field .cds--list-box{background:var(--cds-layer-02)}.valtimo-widget-management-person-card__field--full{grid-column:1/-1}\n/*!\n * Copyright 2015-2026 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$3.FormBuilder }, { type: WidgetWizardService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
@@ -6292,6 +6293,7 @@ class WidgetManagementHighlightComponent {
         this.$widgetContext = this.widgetWizardService.$widgetContext;
         this.params$ = this.widgetManagementService.params$;
         this._subscriptions = new Subscription();
+        this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
     }
     ngOnInit() {
         if (!this.widgetWizardService.$widgetColor()) {
@@ -6322,7 +6324,7 @@ class WidgetManagementHighlightComponent {
         this.widgetWizardService.$widgetContentValid.set(this.form.valid);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementHighlightComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: i2$2.TranslateService }, { token: i1$1.CdsThemeService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementHighlightComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 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<form\n  *ngIf=\"{params: params$ | async} as data\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-highlight__form\"\n>\n  <section class=\"valtimo-widget-management-highlight__panel\">\n    <div class=\"valtimo-widget-management-highlight__identity-row\">\n      <cds-text-label class=\"valtimo-widget-management-highlight__title-input\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n        ></v-input-label>\n\n        <input\n          formControlName=\"widgetTitle\"\n          cdsText\n          type=\"text\"\n          [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        />\n      </cds-text-label>\n\n      <valtimo-mdi-icon-selector\n        [cdsLayer]=\"1\"\n        formControlName=\"widgetIcon\"\n      ></valtimo-mdi-icon-selector>\n    </div>\n  </section>\n\n  <ng-content></ng-content>\n\n  <section class=\"valtimo-widget-management-highlight__panel\">\n    <div class=\"valtimo-widget-management-highlight__row\">\n      <div\n        class=\"valtimo-widget-management-highlight__row-item valtimo-widget-management-highlight__value\"\n      >\n        @if ($widgetContext() === 'case') {\n          <valtimo-value-path-selector\n            formControlName=\"value\"\n            [label]=\"'widgetTabManagement.content.highlight.value' | translate\"\n            [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n            [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n          ></valtimo-value-path-selector>\n        } @else {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.highlight.value' | translate\"\n            ></v-input-label>\n\n            <input\n              formControlName=\"value\"\n              cdsText\n              type=\"text\"\n              [placeholder]=\"'widgetTabManagement.content.highlight.valuePlaceholder' | translate\"\n            />\n          </cds-text-label>\n        }\n\n        <span class=\"valtimo-widget-management-highlight__helper\">\n          {{ 'widgetTabManagement.content.highlight.valueHelper' | translate }}\n        </span>\n      </div>\n\n      <cds-dropdown\n        class=\"valtimo-widget-management-highlight__row-item\"\n        [label]=\"'widgetTabManagement.content.highlight.accentColor' | translate\"\n        (selected)=\"onColorSelected($event)\"\n        [dropUp]=\"false\"\n      >\n        <cds-dropdown-list\n          [items]=\"$colorItems()\"\n          [listTpl]=\"colorDropdownItemTemplate\"\n        ></cds-dropdown-list>\n      </cds-dropdown>\n    </div>\n  </section>\n</form>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <ng-container *ngIf=\"item && item.content\">\n    <cds-tag\n      *ngIf=\"item.tagType; else customColorTag\"\n      class=\"cds-tag--no-margin\"\n      [type]=\"item.tagType\"\n    >\n      {{ item.content }}\n    </cds-tag>\n    <ng-template #customColorTag>\n      <cds-tag\n        class=\"cds-tag--no-margin valtimo-widget-management-highlight__color-tag\"\n        [style.--widget-color-tag-bg]=\"item.tagBackground\"\n        [style.--widget-color-tag-fg]=\"item.tagText\"\n      >\n        {{ item.content }}\n      </cds-tag>\n    </ng-template>\n  </ng-container>\n</ng-template>\n", styles: [".valtimo-widget-management-highlight__form{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-highlight__panel{display:flex;flex-direction:column;gap:12px;background:var(--cds-layer-02)}.valtimo-widget-management-highlight__identity-row{display:flex;gap:16px;align-items:flex-end}.valtimo-widget-management-highlight__title-input{max-width:288px;flex:1 1 auto}.valtimo-widget-management-highlight__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-highlight__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.valtimo-widget-management-highlight__row-item{width:100%}.valtimo-widget-management-highlight__row-item .cds--list-box,.valtimo-widget-management-highlight__row-item .cds--text-input,.valtimo-widget-management-highlight__row-item input.cds--text-input{background:var(--cds-layer-01)}.valtimo-widget-management-highlight__value{display:flex;flex-direction:column;padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-highlight__value .cds--list-box,.valtimo-widget-management-highlight__value .cds--text-input,.valtimo-widget-management-highlight__value input.cds--text-input{background:var(--cds-layer-02)}.valtimo-widget-management-highlight__helper{margin-top:8px;font-size:12px;color:var(--cds-text-helper)}.valtimo-widget-management-highlight__color-tag.cds--tag{background-color:var(--widget-color-tag-bg, var(--cds-layer-02));color:var(--widget-color-tag-fg, var(--cds-text-primary));border:none}\n/*!\n * Copyright 2015-2026 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementHighlightComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 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<form\n  *ngIf=\"{params: params$ | async} as data\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-highlight__form\"\n>\n  <section class=\"valtimo-widget-management-highlight__panel\">\n    <div class=\"valtimo-widget-management-highlight__identity-row\">\n      <cds-text-label class=\"valtimo-widget-management-highlight__title-input\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n        ></v-input-label>\n\n        <input\n          formControlName=\"widgetTitle\"\n          cdsText\n          type=\"text\"\n          [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        />\n      </cds-text-label>\n\n      <valtimo-mdi-icon-selector\n        [cdsLayer]=\"1\"\n        formControlName=\"widgetIcon\"\n      ></valtimo-mdi-icon-selector>\n    </div>\n  </section>\n\n  <ng-content></ng-content>\n\n  <section class=\"valtimo-widget-management-highlight__panel\">\n    <div class=\"valtimo-widget-management-highlight__row\">\n      <div\n        class=\"valtimo-widget-management-highlight__row-item valtimo-widget-management-highlight__value\"\n      >\n        @if ($widgetContext() === 'case') {\n          <valtimo-value-path-selector\n            formControlName=\"value\"\n            [label]=\"'widgetTabManagement.content.highlight.value' | translate\"\n            [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n            [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n            [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n          ></valtimo-value-path-selector>\n        } @else {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.highlight.value' | translate\"\n            ></v-input-label>\n\n            <input\n              formControlName=\"value\"\n              cdsText\n              type=\"text\"\n              [placeholder]=\"'widgetTabManagement.content.highlight.valuePlaceholder' | translate\"\n            />\n          </cds-text-label>\n        }\n\n        <span class=\"valtimo-widget-management-highlight__helper\">\n          {{ 'widgetTabManagement.content.highlight.valueHelper' | translate }}\n        </span>\n      </div>\n\n      <cds-dropdown\n        class=\"valtimo-widget-management-highlight__row-item\"\n        [label]=\"'widgetTabManagement.content.highlight.accentColor' | translate\"\n        (selected)=\"onColorSelected($event)\"\n        [dropUp]=\"false\"\n      >\n        <cds-dropdown-list\n          [items]=\"$colorItems()\"\n          [listTpl]=\"colorDropdownItemTemplate\"\n        ></cds-dropdown-list>\n      </cds-dropdown>\n    </div>\n  </section>\n</form>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <ng-container *ngIf=\"item && item.content\">\n    <cds-tag\n      *ngIf=\"item.tagType; else customColorTag\"\n      class=\"cds-tag--no-margin\"\n      [type]=\"item.tagType\"\n    >\n      {{ item.content }}\n    </cds-tag>\n    <ng-template #customColorTag>\n      <cds-tag\n        class=\"cds-tag--no-margin valtimo-widget-management-highlight__color-tag\"\n        [style.--widget-color-tag-bg]=\"item.tagBackground\"\n        [style.--widget-color-tag-fg]=\"item.tagText\"\n      >\n        {{ item.content }}\n      </cds-tag>\n    </ng-template>\n  </ng-container>\n</ng-template>\n", styles: [".valtimo-widget-management-highlight__form{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-highlight__panel{display:flex;flex-direction:column;gap:12px;background:var(--cds-layer-02)}.valtimo-widget-management-highlight__identity-row{display:flex;gap:16px;align-items:flex-end}.valtimo-widget-management-highlight__title-input{max-width:288px;flex:1 1 auto}.valtimo-widget-management-highlight__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-highlight__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.valtimo-widget-management-highlight__row-item{width:100%}.valtimo-widget-management-highlight__row-item .cds--list-box,.valtimo-widget-management-highlight__row-item .cds--text-input,.valtimo-widget-management-highlight__row-item input.cds--text-input{background:var(--cds-layer-01)}.valtimo-widget-management-highlight__value{display:flex;flex-direction:column;padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-highlight__value .cds--list-box,.valtimo-widget-management-highlight__value .cds--text-input,.valtimo-widget-management-highlight__value input.cds--text-input{background:var(--cds-layer-02)}.valtimo-widget-management-highlight__helper{margin-top:8px;font-size:12px;color:var(--cds-text-helper)}.valtimo-widget-management-highlight__color-tag.cds--tag{background-color:var(--widget-color-tag-bg, var(--cds-layer-02));color:var(--widget-color-tag-fg, var(--cds-text-primary));border:none}\n/*!\n * Copyright 2015-2026 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementHighlightComponent, decorators: [{
             type: Component,
@@ -6339,7 +6341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         TagModule,
                         MdiIconSelectorComponent,
                         ValuePathSelectorComponent,
-                    ], template: "<!--\n  ~ Copyright 2015-2026 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<form\n  *ngIf=\"{params: params$ | async} as data\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-highlight__form\"\n>\n  <section class=\"valtimo-widget-management-highlight__panel\">\n    <div class=\"valtimo-widget-management-highlight__identity-row\">\n      <cds-text-label class=\"valtimo-widget-management-highlight__title-input\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n        ></v-input-label>\n\n        <input\n          formControlName=\"widgetTitle\"\n          cdsText\n          type=\"text\"\n          [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        />\n      </cds-text-label>\n\n      <valtimo-mdi-icon-selector\n        [cdsLayer]=\"1\"\n        formControlName=\"widgetIcon\"\n      ></valtimo-mdi-icon-selector>\n    </div>\n  </section>\n\n  <ng-content></ng-content>\n\n  <section class=\"valtimo-widget-management-highlight__panel\">\n    <div class=\"valtimo-widget-management-highlight__row\">\n      <div\n        class=\"valtimo-widget-management-highlight__row-item valtimo-widget-management-highlight__value\"\n      >\n        @if ($widgetContext() === 'case') {\n          <valtimo-value-path-selector\n            formControlName=\"value\"\n            [label]=\"'widgetTabManagement.content.highlight.value' | translate\"\n            [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n            [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n          ></valtimo-value-path-selector>\n        } @else {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.highlight.value' | translate\"\n            ></v-input-label>\n\n            <input\n              formControlName=\"value\"\n              cdsText\n              type=\"text\"\n              [placeholder]=\"'widgetTabManagement.content.highlight.valuePlaceholder' | translate\"\n            />\n          </cds-text-label>\n        }\n\n        <span class=\"valtimo-widget-management-highlight__helper\">\n          {{ 'widgetTabManagement.content.highlight.valueHelper' | translate }}\n        </span>\n      </div>\n\n      <cds-dropdown\n        class=\"valtimo-widget-management-highlight__row-item\"\n        [label]=\"'widgetTabManagement.content.highlight.accentColor' | translate\"\n        (selected)=\"onColorSelected($event)\"\n        [dropUp]=\"false\"\n      >\n        <cds-dropdown-list\n          [items]=\"$colorItems()\"\n          [listTpl]=\"colorDropdownItemTemplate\"\n        ></cds-dropdown-list>\n      </cds-dropdown>\n    </div>\n  </section>\n</form>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <ng-container *ngIf=\"item && item.content\">\n    <cds-tag\n      *ngIf=\"item.tagType; else customColorTag\"\n      class=\"cds-tag--no-margin\"\n      [type]=\"item.tagType\"\n    >\n      {{ item.content }}\n    </cds-tag>\n    <ng-template #customColorTag>\n      <cds-tag\n        class=\"cds-tag--no-margin valtimo-widget-management-highlight__color-tag\"\n        [style.--widget-color-tag-bg]=\"item.tagBackground\"\n        [style.--widget-color-tag-fg]=\"item.tagText\"\n      >\n        {{ item.content }}\n      </cds-tag>\n    </ng-template>\n  </ng-container>\n</ng-template>\n", styles: [".valtimo-widget-management-highlight__form{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-highlight__panel{display:flex;flex-direction:column;gap:12px;background:var(--cds-layer-02)}.valtimo-widget-management-highlight__identity-row{display:flex;gap:16px;align-items:flex-end}.valtimo-widget-management-highlight__title-input{max-width:288px;flex:1 1 auto}.valtimo-widget-management-highlight__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-highlight__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.valtimo-widget-management-highlight__row-item{width:100%}.valtimo-widget-management-highlight__row-item .cds--list-box,.valtimo-widget-management-highlight__row-item .cds--text-input,.valtimo-widget-management-highlight__row-item input.cds--text-input{background:var(--cds-layer-01)}.valtimo-widget-management-highlight__value{display:flex;flex-direction:column;padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-highlight__value .cds--list-box,.valtimo-widget-management-highlight__value .cds--text-input,.valtimo-widget-management-highlight__value input.cds--text-input{background:var(--cds-layer-02)}.valtimo-widget-management-highlight__helper{margin-top:8px;font-size:12px;color:var(--cds-text-helper)}.valtimo-widget-management-highlight__color-tag.cds--tag{background-color:var(--widget-color-tag-bg, var(--cds-layer-02));color:var(--widget-color-tag-fg, var(--cds-text-primary));border:none}\n/*!\n * Copyright 2015-2026 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"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2026 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<form\n  *ngIf=\"{params: params$ | async} as data\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-highlight__form\"\n>\n  <section class=\"valtimo-widget-management-highlight__panel\">\n    <div class=\"valtimo-widget-management-highlight__identity-row\">\n      <cds-text-label class=\"valtimo-widget-management-highlight__title-input\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n        ></v-input-label>\n\n        <input\n          formControlName=\"widgetTitle\"\n          cdsText\n          type=\"text\"\n          [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        />\n      </cds-text-label>\n\n      <valtimo-mdi-icon-selector\n        [cdsLayer]=\"1\"\n        formControlName=\"widgetIcon\"\n      ></valtimo-mdi-icon-selector>\n    </div>\n  </section>\n\n  <ng-content></ng-content>\n\n  <section class=\"valtimo-widget-management-highlight__panel\">\n    <div class=\"valtimo-widget-management-highlight__row\">\n      <div\n        class=\"valtimo-widget-management-highlight__row-item valtimo-widget-management-highlight__value\"\n      >\n        @if ($widgetContext() === 'case') {\n          <valtimo-value-path-selector\n            formControlName=\"value\"\n            [label]=\"'widgetTabManagement.content.highlight.value' | translate\"\n            [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n            [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n            [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n          ></valtimo-value-path-selector>\n        } @else {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.highlight.value' | translate\"\n            ></v-input-label>\n\n            <input\n              formControlName=\"value\"\n              cdsText\n              type=\"text\"\n              [placeholder]=\"'widgetTabManagement.content.highlight.valuePlaceholder' | translate\"\n            />\n          </cds-text-label>\n        }\n\n        <span class=\"valtimo-widget-management-highlight__helper\">\n          {{ 'widgetTabManagement.content.highlight.valueHelper' | translate }}\n        </span>\n      </div>\n\n      <cds-dropdown\n        class=\"valtimo-widget-management-highlight__row-item\"\n        [label]=\"'widgetTabManagement.content.highlight.accentColor' | translate\"\n        (selected)=\"onColorSelected($event)\"\n        [dropUp]=\"false\"\n      >\n        <cds-dropdown-list\n          [items]=\"$colorItems()\"\n          [listTpl]=\"colorDropdownItemTemplate\"\n        ></cds-dropdown-list>\n      </cds-dropdown>\n    </div>\n  </section>\n</form>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <ng-container *ngIf=\"item && item.content\">\n    <cds-tag\n      *ngIf=\"item.tagType; else customColorTag\"\n      class=\"cds-tag--no-margin\"\n      [type]=\"item.tagType\"\n    >\n      {{ item.content }}\n    </cds-tag>\n    <ng-template #customColorTag>\n      <cds-tag\n        class=\"cds-tag--no-margin valtimo-widget-management-highlight__color-tag\"\n        [style.--widget-color-tag-bg]=\"item.tagBackground\"\n        [style.--widget-color-tag-fg]=\"item.tagText\"\n      >\n        {{ item.content }}\n      </cds-tag>\n    </ng-template>\n  </ng-container>\n</ng-template>\n", styles: [".valtimo-widget-management-highlight__form{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-highlight__panel{display:flex;flex-direction:column;gap:12px;background:var(--cds-layer-02)}.valtimo-widget-management-highlight__identity-row{display:flex;gap:16px;align-items:flex-end}.valtimo-widget-management-highlight__title-input{max-width:288px;flex:1 1 auto}.valtimo-widget-management-highlight__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-highlight__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.valtimo-widget-management-highlight__row-item{width:100%}.valtimo-widget-management-highlight__row-item .cds--list-box,.valtimo-widget-management-highlight__row-item .cds--text-input,.valtimo-widget-management-highlight__row-item input.cds--text-input{background:var(--cds-layer-01)}.valtimo-widget-management-highlight__value{display:flex;flex-direction:column;padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-highlight__value .cds--list-box,.valtimo-widget-management-highlight__value .cds--text-input,.valtimo-widget-management-highlight__value input.cds--text-input{background:var(--cds-layer-02)}.valtimo-widget-management-highlight__helper{margin-top:8px;font-size:12px;color:var(--cds-text-helper)}.valtimo-widget-management-highlight__color-tag.cds--tag{background-color:var(--widget-color-tag-bg, var(--cds-layer-02));color:var(--widget-color-tag-fg, var(--cds-text-primary));border:none}\n/*!\n * Copyright 2015-2026 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$3.FormBuilder }, { type: WidgetWizardService }, { type: i2$2.TranslateService }, { type: i1$1.CdsThemeService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]