@valtimo/layout 13.6.0 → 13.7.0

package/fesm2022/valtimo-layout.mjs

@@ -419,6 +419,7 @@ class WidgetFieldComponent {
         if (!value)
             return;
         this.widgetConfiguration$.next(value);
+        this.hostClasses = `valtimo-widget-field ${value.isCompact ? 'valtimo-widget-field--compact' : ''}`;
     }
     set widgetData(value) {
         if (!value)
@@ -428,10 +429,9 @@ class WidgetFieldComponent {
     }
     constructor(viewContentService) {
         this.viewContentService = viewContentService;
-        this.class = 'widget-field';
+        this.hostClasses = 'valtimo-widget-field';
         this.isEmptyWidgetData$ = new BehaviorSubject(false);
         this.noVisibleFields$ = new BehaviorSubject(true);
-        this.compact = false;
         this.noVisibleFieldsEvent = new EventEmitter();
         this.renderVertically = signal(0);
         this.widgetConfiguration$ = new BehaviorSubject(null);
@@ -503,7 +503,7 @@ class WidgetFieldComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldComponent, deps: [{ token: i1.ViewContentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", compact: "compact" }, outputs: { noVisibleFieldsEvent: "noVisibleFieldsEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], descendants: true }], 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\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-field__header\">\n    <div class=\"widget-field__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=\"widget-field__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  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @if (obs.noVisibleFields) {\n        <valtimo-no-results\n          [collapseVertically]=\"true\"\n          [description]=\"'widgets.emptyFields' | translate\"\n          [smallPadding]=\"true\"\n        ></valtimo-no-results>\n      } @else {\n        @for (column of obs?.widgetPropertyValue; track column.key) {\n          <div class=\"widget-field__column\" [ngClass]=\"{'widget-field__column--compact': compact}\">\n            @for (property of column; track property) {\n              <div\n                *ngIf=\"\n                  (property?.value !== null &&\n                    property?.value !== '-' &&\n                    property?.hideWhenEmpty) ||\n                  !property?.hideWhenEmpty\n                \"\n                class=\"widget-field__field\"\n                [ngClass]=\"{'widget-field__field--compact': compact}\"\n              >\n                <label\n                  class=\"widget-field__field-label\"\n                  [ngClass]=\"{'widget-field__field-label--compact': compact}\"\n                  [attr.title]=\"property?.title\"\n                >\n                  {{ property?.title }}</label\n                >\n\n                <div\n                  [attr.title]=\"property?.value\"\n                  class=\"widget-field__field-value\"\n                  [ngClass]=\"{'widget-field__field-value--compact': compact}\"\n                >\n                  @if (property?.isRawValue) {\n                    <div [innerHTML]=\"property?.value\"></div>\n                  } @else {\n                    {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field--compact,.widget-field__column--compact{gap:0;border-left:1px solid var(--cds-border-subtle-01);padding-left:16px}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__title-container{display:flex;align-items:center;gap:8px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field--compact{flex-direction:row;justify-content:space-between}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-label--compact{margin:auto 0!important;display:flex;height:min-content}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field__field-value--compact{padding:0;border:none}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: EllipsisPipe, name: "valtimoEllipsis" }, { 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"] }, { kind: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { noVisibleFieldsEvent: "noVisibleFieldsEvent" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], descendants: true }], 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\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"valtimo-widget-field__header\">\n    <div class=\"valtimo-widget-field__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=\"valtimo-widget-field__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  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      class=\"valtimo-widget-field__render\"\n      [ngClass]=\"{\n        'valtimo-widget-field__render-vertically': renderVertically() === 1,\n        'valtimo-widget-field__render-two-columns': renderVertically() === 2,\n        'valtimo-widget-field__render-three-columns': renderVertically() === 3,\n        'valtimo-widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @if (obs.noVisibleFields) {\n        <valtimo-no-results\n          [collapseVertically]=\"true\"\n          [description]=\"'widgets.emptyFields' | translate\"\n          [smallPadding]=\"true\"\n        ></valtimo-no-results>\n      } @else {\n        @for (column of obs?.widgetPropertyValue; track column.key) {\n          <div class=\"valtimo-widget-field__column\">\n            @for (property of column; track property) {\n              <div\n                *ngIf=\"\n                  (property?.value !== null &&\n                    property?.value !== '-' &&\n                    property?.hideWhenEmpty) ||\n                  !property?.hideWhenEmpty\n                \"\n                class=\"valtimo-widget-field__field\"\n              >\n                <label class=\"valtimo-widget-field__field-label\" [attr.title]=\"property?.title\">\n                  {{ property?.title }}</label\n                >\n\n                <div [attr.title]=\"property?.value\" class=\"valtimo-widget-field__field-value\">\n                  @if (property?.isRawValue) {\n                    <div [innerHTML]=\"property?.value\"></div>\n                  } @else {\n                    {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".valtimo-widget-field{padding:24px}.valtimo-widget-field__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-field,.valtimo-widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.valtimo-widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-field__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.valtimo-widget-field__field{display:flex;flex-direction:column;width:100%;gap:8px}.valtimo-widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.valtimo-widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-widget-field__render-vertically,.valtimo-widget-field__render-two-columns,.valtimo-widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.valtimo-widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.valtimo-widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-field--compact .valtimo-widget-field__column{gap:8px;border-left:1px solid var(--cds-border-subtle-01);padding-left:16px}.valtimo-widget-field--compact .valtimo-widget-field__field{flex-direction:row;justify-content:space-between}.valtimo-widget-field--compact .valtimo-widget-field__field-value{padding:0;border:none}.valtimo-widget-field--compact .valtimo-widget-field-label{margin:auto 0!important;display:flex;height:min-content}.valtimo-widget-field--compact .valtimo-widget-field__render>*{padding-left:16px;border-left:1px solid var(--cds-border-subtle-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: EllipsisPipe, name: "valtimoEllipsis" }, { 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"] }, { kind: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldComponent, decorators: [{
             type: Component,
@@ -517,8 +517,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         WidgetActionButtonComponent,
                         MdiIconViewerComponent,
                         LayerModule,
-                    ], 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\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-field__header\">\n    <div class=\"widget-field__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=\"widget-field__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  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @if (obs.noVisibleFields) {\n        <valtimo-no-results\n          [collapseVertically]=\"true\"\n          [description]=\"'widgets.emptyFields' | translate\"\n          [smallPadding]=\"true\"\n        ></valtimo-no-results>\n      } @else {\n        @for (column of obs?.widgetPropertyValue; track column.key) {\n          <div class=\"widget-field__column\" [ngClass]=\"{'widget-field__column--compact': compact}\">\n            @for (property of column; track property) {\n              <div\n                *ngIf=\"\n                  (property?.value !== null &&\n                    property?.value !== '-' &&\n                    property?.hideWhenEmpty) ||\n                  !property?.hideWhenEmpty\n                \"\n                class=\"widget-field__field\"\n                [ngClass]=\"{'widget-field__field--compact': compact}\"\n              >\n                <label\n                  class=\"widget-field__field-label\"\n                  [ngClass]=\"{'widget-field__field-label--compact': compact}\"\n                  [attr.title]=\"property?.title\"\n                >\n                  {{ property?.title }}</label\n                >\n\n                <div\n                  [attr.title]=\"property?.value\"\n                  class=\"widget-field__field-value\"\n                  [ngClass]=\"{'widget-field__field-value--compact': compact}\"\n                >\n                  @if (property?.isRawValue) {\n                    <div [innerHTML]=\"property?.value\"></div>\n                  } @else {\n                    {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field--compact,.widget-field__column--compact{gap:0;border-left:1px solid var(--cds-border-subtle-01);padding-left:16px}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__title-container{display:flex;align-items:center;gap:8px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field--compact{flex-direction:row;justify-content:space-between}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-label--compact{margin:auto 0!important;display:flex;height:min-content}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field__field-value--compact{padding:0;border:none}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.ViewContentService }], propDecorators: { class: [{
+                    ], 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\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"valtimo-widget-field__header\">\n    <div class=\"valtimo-widget-field__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=\"valtimo-widget-field__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  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      class=\"valtimo-widget-field__render\"\n      [ngClass]=\"{\n        'valtimo-widget-field__render-vertically': renderVertically() === 1,\n        'valtimo-widget-field__render-two-columns': renderVertically() === 2,\n        'valtimo-widget-field__render-three-columns': renderVertically() === 3,\n        'valtimo-widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @if (obs.noVisibleFields) {\n        <valtimo-no-results\n          [collapseVertically]=\"true\"\n          [description]=\"'widgets.emptyFields' | translate\"\n          [smallPadding]=\"true\"\n        ></valtimo-no-results>\n      } @else {\n        @for (column of obs?.widgetPropertyValue; track column.key) {\n          <div class=\"valtimo-widget-field__column\">\n            @for (property of column; track property) {\n              <div\n                *ngIf=\"\n                  (property?.value !== null &&\n                    property?.value !== '-' &&\n                    property?.hideWhenEmpty) ||\n                  !property?.hideWhenEmpty\n                \"\n                class=\"valtimo-widget-field__field\"\n              >\n                <label class=\"valtimo-widget-field__field-label\" [attr.title]=\"property?.title\">\n                  {{ property?.title }}</label\n                >\n\n                <div [attr.title]=\"property?.value\" class=\"valtimo-widget-field__field-value\">\n                  @if (property?.isRawValue) {\n                    <div [innerHTML]=\"property?.value\"></div>\n                  } @else {\n                    {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".valtimo-widget-field{padding:24px}.valtimo-widget-field__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-field,.valtimo-widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.valtimo-widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-field__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.valtimo-widget-field__field{display:flex;flex-direction:column;width:100%;gap:8px}.valtimo-widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.valtimo-widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-widget-field__render-vertically,.valtimo-widget-field__render-two-columns,.valtimo-widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.valtimo-widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.valtimo-widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-field--compact .valtimo-widget-field__column{gap:8px;border-left:1px solid var(--cds-border-subtle-01);padding-left:16px}.valtimo-widget-field--compact .valtimo-widget-field__field{flex-direction:row;justify-content:space-between}.valtimo-widget-field--compact .valtimo-widget-field__field-value{padding:0;border:none}.valtimo-widget-field--compact .valtimo-widget-field-label{margin:auto 0!important;display:flex;height:min-content}.valtimo-widget-field--compact .valtimo-widget-field__render>*{padding-left:16px;border-left:1px solid var(--cds-border-subtle-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.ViewContentService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], _widgetFieldRef: [{
@@ -528,8 +528,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], widgetData: [{
                 type: Input
-            }], compact: [{
-                type: Input
             }], noVisibleFieldsEvent: [{
                 type: Output
             }] } });
@@ -991,6 +989,7 @@ class WidgetCollectionComponent {
         if (!value)
             return;
         this.widgetConfiguration$.next(value);
+        this.hostClasses = `valtimo-widget-collection ${value.isCompact ? 'valtimo-widget-collection--compact' : ''}`;
     }
     get widgetData$() {
         return this._widgetData$.pipe(filter$1(data => !!data));
@@ -1033,7 +1032,7 @@ class WidgetCollectionComponent {
     constructor(viewContentService, cdr) {
         this.viewContentService = viewContentService;
         this.cdr = cdr;
-        this.class = 'valtimo-widget-collection';
+        this.hostClasses = 'valtimo-widget-collection';
         this.showPagination$ = new BehaviorSubject(false);
         this._widgetData$ = new BehaviorSubject(null);
         this._paginationInitialized = false;
@@ -1129,7 +1128,7 @@ class WidgetCollectionComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCollectionComponent, deps: [{ token: i1.ViewContentService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], descendants: true }], 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\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <div class=\"valtimo-widget-collection__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\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  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        *ngIf=\"!obs.noVisibleFields\"\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            *ngIf=\"\n              (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n              !field?.hideWhenEmpty\n            \"\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half',\n            }\"\n          >\n            <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], descendants: true }], 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\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <div class=\"valtimo-widget-collection__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\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  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        *ngIf=\"!obs.noVisibleFields\"\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{\n          'valtimo-widget-collection__card--hidden': card.hidden,\n        }\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        <section\n          class=\"valtimo-widget-collection__card-content\"\n        >\n          @for (field of card.fields; track field.key) {\n            <div\n              *ngIf=\"\n                (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n                !field?.hideWhenEmpty\n              \"\n              [ngClass]=\"{\n                'valtimo-widget-collection__full-width-input': field?.width === 'full',\n                'valtimo-widget-collection__half-width-input': field?.width === 'half',\n              }\"\n            >\n              <cds-label\n                class=\"valtimo-widget-collection__label\"\n                [attr.title]=\"field?.value ?? field?.title\"\n              >\n                {{ field?.title }}\n\n                <input\n                  [value]=\"field?.value\"\n                  [readonly]=\"true\"\n                  class=\"valtimo-widget-collection__card-input\"\n                  cdsText\n                />\n              </cds-label>\n            </div>\n          }\n        </section>\n      </div>\n    }\n  </div>\n\n  @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-content{width:100%;display:flex;flex-direction:column;gap:16px}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-collection--compact.valtimo-widget-collection .cds--label{margin:0}.valtimo-widget-collection--compact.valtimo-widget-collection .valtimo-widget-collection__label .cds--text-input-wrapper{display:flex;flex-direction:row;align-items:center;height:32px}.valtimo-widget-collection--compact.valtimo-widget-collection__card{gap:12px}.valtimo-widget-collection--compact.valtimo-widget-collection__card-content{padding-left:16px;gap:12px;border-left:1px solid var(--cds-border-subtle-01)}.valtimo-widget-collection--compact.valtimo-widget-collection__card-input{border:none}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCollectionComponent, decorators: [{
             type: Component,
@@ -1143,8 +1142,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ButtonModule,
                         WidgetActionButtonComponent,
                         MdiIconViewerComponent,
-                    ], 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\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <div class=\"valtimo-widget-collection__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\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  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        *ngIf=\"!obs.noVisibleFields\"\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            *ngIf=\"\n              (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n              !field?.hideWhenEmpty\n            \"\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half',\n            }\"\n          >\n            <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.ViewContentService }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
+                    ], 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\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <div class=\"valtimo-widget-collection__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\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  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        *ngIf=\"!obs.noVisibleFields\"\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{\n          'valtimo-widget-collection__card--hidden': card.hidden,\n        }\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        <section\n          class=\"valtimo-widget-collection__card-content\"\n        >\n          @for (field of card.fields; track field.key) {\n            <div\n              *ngIf=\"\n                (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n                !field?.hideWhenEmpty\n              \"\n              [ngClass]=\"{\n                'valtimo-widget-collection__full-width-input': field?.width === 'full',\n                'valtimo-widget-collection__half-width-input': field?.width === 'half',\n              }\"\n            >\n              <cds-label\n                class=\"valtimo-widget-collection__label\"\n                [attr.title]=\"field?.value ?? field?.title\"\n              >\n                {{ field?.title }}\n\n                <input\n                  [value]=\"field?.value\"\n                  [readonly]=\"true\"\n                  class=\"valtimo-widget-collection__card-input\"\n                  cdsText\n                />\n              </cds-label>\n            </div>\n          }\n        </section>\n      </div>\n    }\n  </div>\n\n  @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-content{width:100%;display:flex;flex-direction:column;gap:16px}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-collection--compact.valtimo-widget-collection .cds--label{margin:0}.valtimo-widget-collection--compact.valtimo-widget-collection .valtimo-widget-collection__label .cds--text-input-wrapper{display:flex;flex-direction:row;align-items:center;height:32px}.valtimo-widget-collection--compact.valtimo-widget-collection__card{gap:12px}.valtimo-widget-collection--compact.valtimo-widget-collection__card-content{padding-left:16px;gap:12px;border-left:1px solid var(--cds-border-subtle-01)}.valtimo-widget-collection--compact.valtimo-widget-collection__card-input{border:none}\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.ViewContentService }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], _widgetCollectionRef: [{
@@ -1221,7 +1220,7 @@ class WidgetTableComponent {
     set widgetData(value) {
         if (!value)
             return;
-        this.showPagination.set(value.totalElements > value.size);
+        this.$showPagination.set(value.totalElements > value.size);
         if (!this._initialNumberOfElements)
             this._initialNumberOfElements = value.numberOfElements;
         let widgetData = value.content;
@@ -1234,8 +1233,8 @@ class WidgetTableComponent {
         this.widgetData$.next(widgetData);
         this.resolvedData$.next(value?.resolved);
         if (!this._paginationInitialized) {
-            this.showPagination.set(value.totalElements > value.size);
-            this.paginationModel.set(value.totalPages < 0
+            this.$showPagination.set(value.totalElements > value.size);
+            this.$paginationModel.set(value.totalPages < 0
                 ? null
                 : {
                     currentPage: 1,
@@ -1245,7 +1244,7 @@ class WidgetTableComponent {
             this._paginationInitialized = true;
         }
         else {
-            this.paginationModel.update((model) => !model
+            this.$paginationModel.update((model) => !model
                 ? null
                 : {
                     ...model,
@@ -1256,22 +1255,22 @@ class WidgetTableComponent {
     }
     constructor(cdr) {
         this.cdr = cdr;
-        this.showPagination = signal(false);
+        this.$showPagination = signal(false);
         this.widgetData$ = new BehaviorSubject(null);
         this.resolvedData$ = new BehaviorSubject(null);
         this._paginationInitialized = false;
         this.paginationEvent = new EventEmitter();
         this.fields$ = new BehaviorSubject([]);
-        this.paginationModel = signal(new PaginationModel());
+        this.$paginationModel = signal(new PaginationModel());
     }
     onSelectPage(page) {
-        const paginationModel = this.paginationModel();
+        const paginationModel = this.$paginationModel();
         if (!paginationModel)
             return;
         this.paginationEvent.emit({ ...paginationModel, currentPage: page });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetTableComponent, isStandalone: true, selector: "valtimo-widget-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    resolvedData: resolvedData$ | async,\n  } as obs\"\n  class=\"valtimo-widget-table\"\n>\n  <section class=\"valtimo-widget-table__header\">\n    <div class=\"valtimo-widget-table__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"widgetConfiguration?.icon\"\n        [mdiIcon]=\"widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"widgetConfiguration\"\n      [resolvedData]=\"obs.resolvedData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n    <section class=\"valtimo-widget-table__content\">\n      <valtimo-carbon-list\n        [header]=\"false\"\n        [hideToolbar]=\"true\"\n        [fields]=\"obs.fields\"\n        [items]=\"obs.widgetData\"\n      >\n      </valtimo-carbon-list>\n\n      <cds-pagination-nav\n        *ngIf=\"paginationModel() && showPagination()\"\n        class=\"valtimo-widget-table__pagination\"\n        [model]=\"paginationModel()\"\n        (selectPage)=\"onSelectPage($event)\"\n      >\n      </cds-pagination-nav>\n    </section>\n  } @else {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\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: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.Tile, selector: "cds-tile, ibm-tile", inputs: ["theme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetTableComponent, isStandalone: true, selector: "valtimo-widget-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    resolvedData: resolvedData$ | async,\n  } as obs\"\n  class=\"valtimo-widget-table\"\n  [class.valtimo-widget-table--compact]=\"widgetConfiguration?.isCompact\"\n>\n  <section class=\"valtimo-widget-table__header\">\n    <div class=\"valtimo-widget-table__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"widgetConfiguration?.icon\"\n        [mdiIcon]=\"widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"widgetConfiguration\"\n      [resolvedData]=\"obs.resolvedData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n    <section class=\"valtimo-widget-table__content\">\n      <valtimo-carbon-list\n        [header]=\"false\"\n        [hideToolbar]=\"true\"\n        [fields]=\"obs.fields\"\n        [items]=\"obs.widgetData\"\n      >\n      </valtimo-carbon-list>\n\n      <cds-pagination-nav\n        *ngIf=\"$paginationModel() && $showPagination()\"\n        class=\"valtimo-widget-table__pagination\"\n        [model]=\"$paginationModel()\"\n        (selectPage)=\"onSelectPage($event)\"\n      >\n      </cds-pagination-nav>\n    </section>\n  } @else {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table--compact .cds--data-table tr{gap:12px;height:32px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--compact .valtimo-widget-table--transparent{border:none!important}.valtimo-widget-table--title{font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\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: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.Tile, selector: "cds-tile, ibm-tile", inputs: ["theme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetTableComponent, decorators: [{
             type: Component,
@@ -1284,7 +1283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ButtonModule,
                         WidgetActionButtonComponent,
                         MdiIconViewerComponent,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    resolvedData: resolvedData$ | async,\n  } as obs\"\n  class=\"valtimo-widget-table\"\n>\n  <section class=\"valtimo-widget-table__header\">\n    <div class=\"valtimo-widget-table__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"widgetConfiguration?.icon\"\n        [mdiIcon]=\"widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"widgetConfiguration\"\n      [resolvedData]=\"obs.resolvedData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n    <section class=\"valtimo-widget-table__content\">\n      <valtimo-carbon-list\n        [header]=\"false\"\n        [hideToolbar]=\"true\"\n        [fields]=\"obs.fields\"\n        [items]=\"obs.widgetData\"\n      >\n      </valtimo-carbon-list>\n\n      <cds-pagination-nav\n        *ngIf=\"paginationModel() && showPagination()\"\n        class=\"valtimo-widget-table__pagination\"\n        [model]=\"paginationModel()\"\n        (selectPage)=\"onSelectPage($event)\"\n      >\n      </cds-pagination-nav>\n    </section>\n  } @else {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\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<cds-tile\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    resolvedData: resolvedData$ | async,\n  } as obs\"\n  class=\"valtimo-widget-table\"\n  [class.valtimo-widget-table--compact]=\"widgetConfiguration?.isCompact\"\n>\n  <section class=\"valtimo-widget-table__header\">\n    <div class=\"valtimo-widget-table__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"widgetConfiguration?.icon\"\n        [mdiIcon]=\"widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"widgetConfiguration\"\n      [resolvedData]=\"obs.resolvedData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n    <section class=\"valtimo-widget-table__content\">\n      <valtimo-carbon-list\n        [header]=\"false\"\n        [hideToolbar]=\"true\"\n        [fields]=\"obs.fields\"\n        [items]=\"obs.widgetData\"\n      >\n      </valtimo-carbon-list>\n\n      <cds-pagination-nav\n        *ngIf=\"$paginationModel() && $showPagination()\"\n        class=\"valtimo-widget-table__pagination\"\n        [model]=\"$paginationModel()\"\n        (selectPage)=\"onSelectPage($event)\"\n      >\n      </cds-pagination-nav>\n    </section>\n  } @else {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table--compact .cds--data-table tr{gap:12px;height:32px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--compact .valtimo-widget-table--transparent{border:none!important}.valtimo-widget-table--title{font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\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: i0.ChangeDetectorRef }], propDecorators: { widgetConfiguration: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2207,9 +2206,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class WidgetWizardService {
     constructor() {
         this.$currentStepIndex = signal(0);
+        this.$currentStep = signal(WidgetWizardStep.TYPE);
         this.$selectedWidget = signal(null);
         this.$widgetWidth = signal(null);
         this.$widgetStyle = signal(null);
+        this.$widgetDensity = signal(null);
         this.$widgetContent = signal(null);
         this.$widgetDisplayConditions = signal(null);
         this.$widgetTitle = signal(null);
@@ -2224,6 +2225,7 @@ class WidgetWizardService {
         this.$widgetWizardSteps = signal([
             WidgetWizardStep.TYPE,
             WidgetWizardStep.WIDTH,
+            WidgetWizardStep.DENSITY,
             WidgetWizardStep.STYLE,
             WidgetWizardStep.CONTENT,
             WidgetWizardStep.DISPLAY_CONDITIONS,
@@ -2232,19 +2234,37 @@ class WidgetWizardService {
         this._$stepCompleteCondition = computed(() => ({
             [WidgetWizardStep.TYPE]: !!this.$selectedWidget()?.type,
             [WidgetWizardStep.WIDTH]: !!this.$widgetWidth(),
+            [WidgetWizardStep.DENSITY]: this.$widgetDensity() !== null,
             [WidgetWizardStep.STYLE]: !!this.$widgetStyle(),
-            [WidgetWizardStep.CONTENT]: !!this.$widgetContent() && this.$widgetContentValid(),
+            [WidgetWizardStep.CONTENT]: !!this.$widgetContent() && this.$widgetContentValid() && !!this.$widgetTitle(),
             [WidgetWizardStep.DISPLAY_CONDITIONS]: this.$widgetConditionsValid(),
         }));
-        this.$widgetWizardStepProperties = computed(() => this.$widgetWizardSteps().reduce((acc, curr, index, steps) => ({
-            ...acc,
-            [curr]: {
-                disabled: (this.$editMode() && index === 0) ||
-                    (!this._$stepCompleteCondition()[steps[index - 1]] && index > 0),
-                complete: this._$stepCompleteCondition()[curr] || this.$editMode(),
+        this.$widgetWizardStepEnableCondition = computed(() => ({
+            [WidgetWizardStep.DENSITY]: {
+                dependingStep: WidgetWizardStep.TYPE,
+                condition: () => {
+                    const selectedType = this.$selectedWidget()?.type;
+                    return !selectedType
+                        ? false
+                        : [WidgetType.COLLECTION, WidgetType.FIELDS, WidgetType.TABLE].includes(selectedType);
+                },
             },
-        }), {}));
-        this.$nextButtonDisabled = computed(() => !this._$stepCompleteCondition()[this.$widgetWizardSteps()[this.$currentStepIndex()]]);
+        }));
+        this.$widgetWizardStepProperties = computed(() => {
+            const enabledConditions = this.$widgetWizardStepEnableCondition();
+            const completeConditions = this._$stepCompleteCondition();
+            const isEditMode = this.$editMode();
+            const steps = this.$widgetWizardSteps().filter(step => enabledConditions[step]?.condition() ?? true);
+            return steps.reduce((acc, step, index) => ({
+                ...acc,
+                [step]: {
+                    disabled: (isEditMode && index === 0) ||
+                        (!isEditMode && index > 0 && !completeConditions[steps[index - 1]]),
+                    complete: !!completeConditions[step] || isEditMode,
+                },
+            }), {});
+        });
+        this.$nextButtonDisabled = computed(() => !this._$stepCompleteCondition()[this.$currentStep()]);
         this.$widgetsConfig = computed(() => ({
             key: this.$widgetKey() ?? '',
             title: this.$widgetTitle() ?? '',
@@ -2252,6 +2272,7 @@ class WidgetWizardService {
             type: this.$selectedWidget()?.type ?? WidgetType.FIELDS,
             width: this.$widgetWidth() || this._defaultWidth || 4,
             highContrast: (this.$widgetStyle() ?? WidgetStyle.DEFAULT) === WidgetStyle.HIGH_CONTRAST,
+            isCompact: this.$widgetDensity() === WidgetDensity.COMPACT,
             properties: this.$widgetContent() ?? {},
             actions: this.$widgetActions() ?? [],
             displayConditions: this.$widgetDisplayConditions() ?? [],
@@ -2265,6 +2286,7 @@ class WidgetWizardService {
     resetWizard() {
         setTimeout(() => {
             this.$currentStepIndex.set(0);
+            this.$currentStep.set(WidgetWizardStep.TYPE);
             this.$selectedWidget.set(null);
             this.$widgetWidth.set(this._defaultWidth || null);
             this.$widgetStyle.set(null);
@@ -2275,6 +2297,7 @@ class WidgetWizardService {
             this.$widgetActions.set(undefined);
             this.$widgetDisplayConditions.set(null);
             this.$editMode.set(false);
+            this.$widgetDensity.set(null);
             this.$disableActionButton.set(false);
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
@@ -2282,6 +2305,7 @@ class WidgetWizardService {
         this.$widgetWizardSteps.set([
             WidgetWizardStep.TYPE,
             WidgetWizardStep.WIDTH,
+            WidgetWizardStep.DENSITY,
             WidgetWizardStep.STYLE,
             WidgetWizardStep.CONTENT,
             WidgetWizardStep.DISPLAY_CONDITIONS,
@@ -2352,6 +2376,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['contentRenderer', { read: ViewContainerRef }]
             }] } });
 
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetWizardDensityStepComponent {
+    constructor(widgetWizardService) {
+        this.widgetWizardService = widgetWizardService;
+        this.WidgetDensity = WidgetDensity;
+        this.$widgetDensity = this.widgetWizardService.$widgetDensity;
+    }
+    onSelectedEvent(event) {
+        this.widgetWizardService.$widgetDensity.set(event.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardDensityStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetWizardDensityStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetDensity.DEFAULT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/default.svg\"\n      [alt]=\"'widgetTabManagement.density.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetDensity.COMPACT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.COMPACT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.compact.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.compact.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/compact.svg\"\n      [alt]=\"'widgetTabManagement.density.compact.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardDensityStepComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetDensity.DEFAULT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/default.svg\"\n      [alt]=\"'widgetTabManagement.density.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetDensity.COMPACT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.COMPACT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.compact.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.compact.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/compact.svg\"\n      [alt]=\"'widgetTabManagement.density.compact.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n" }]
+        }], ctorParameters: () => [{ type: WidgetWizardService }] });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -2566,6 +2622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 const WIDGET_STEPS = [
     WidgetWizardContentStepComponent,
     WidgetWizardStyleStepComponent,
+    WidgetWizardDensityStepComponent,
     WidgetWizardTypeStepComponent,
     WidgetWizardWidthStepComponent,
     WidgetWizardDisplayConditionsStepComponent,
@@ -2594,9 +2651,12 @@ class WidgetManagementWizardComponent {
         this.widgetWizardService.$editMode.set(value);
         if (!value)
             return;
-        this.$currentStepIndex.set(this.widgetWizardService
-            .$widgetWizardSteps()
-            .findIndex((step) => step === WidgetWizardStep.CONTENT));
+        this.widgetWizardService.$currentStep.set(WidgetWizardStep.CONTENT);
+        this.steps$
+            .pipe(map((steps) => steps.findIndex(step => step.stepId === WidgetWizardStep.CONTENT)), filter$1(index => index !== -1), take(1))
+            .subscribe(index => {
+            this.widgetWizardService.$currentStepIndex.set(index);
+        });
     }
     get editMode() {
         return this._editMode;
@@ -2613,38 +2673,71 @@ class WidgetManagementWizardComponent {
             toObservable(this.widgetWizardService.$selectedWidget),
             toObservable(this.widgetWizardService.$widgetWidth),
             toObservable(this.widgetWizardService.$widgetStyle),
-        ]).pipe(map(([selectedWidget, selectedWidth, selectedStyle]) => {
+            toObservable(this.widgetWizardService.$widgetDensity),
+        ]).pipe(map(([selectedWidget, selectedWidth, selectedStyle, selectedDensity]) => {
             const type = selectedWidget?.type ?? '';
-            const width = selectedWidth ?? '';
-            const style = selectedStyle ?? '';
             return {
                 [WidgetWizardStep.TYPE]: type ? `widgetTabManagement.type.${type}.title` : '',
-                [WidgetWizardStep.WIDTH]: WIDGET_WIDTH_LABELS[width] ?? '',
-                [WidgetWizardStep.STYLE]: WIDGET_STYLE_LABELS[style] ?? '',
+                [WidgetWizardStep.WIDTH]: WIDGET_WIDTH_LABELS[selectedWidth ?? ''] ?? '',
+                [WidgetWizardStep.STYLE]: WIDGET_STYLE_LABELS[selectedStyle ?? ''] ?? '',
+                [WidgetWizardStep.DENSITY]: WIDGET_DENSITY_LABELS[selectedDensity ?? ''] ?? '',
             };
         }));
         this.steps$ = combineLatest([
             toObservable(this.widgetWizardService.$widgetWizardSteps),
             toObservable(this.widgetWizardService.$widgetWizardStepProperties),
+            toObservable(this.widgetWizardService.$widgetWizardStepEnableCondition),
             this.secondaryLabels$,
             this.translateService.stream('key'),
-        ]).pipe(map(([steps, stepProperties, secondaryLabels]) => steps.map((step) => ({
-            label: this.translateService.instant(`widgetTabManagement.wizard.steps.${step}`),
-            ...(!!secondaryLabels[step] && {
-                secondaryLabel: this.translateService.instant(secondaryLabels[step]),
-            }),
-            disabled: stepProperties[step]?.disabled,
-            complete: stepProperties[step]?.complete,
-        }))));
+        ]).pipe(map(([steps, stepProperties, stepEnableConditions, secondaryLabels]) => {
+            return steps.reduce((acc, step) => {
+                if (acc.__blocked)
+                    return acc;
+                const enableMeta = stepEnableConditions[step];
+                if (enableMeta) {
+                    const { dependingStep, condition } = enableMeta;
+                    const dependingComplete = !!stepProperties[dependingStep]?.complete;
+                    if (!dependingComplete) {
+                        acc.push({ label: '', disabled: true, complete: false, stepId: '' });
+                        acc.__blocked = true;
+                        return acc;
+                    }
+                    if (!condition())
+                        return acc;
+                }
+                const stepConfig = {
+                    label: this.translateService.instant(`widgetTabManagement.wizard.steps.${step}`),
+                    disabled: stepProperties[step]?.disabled,
+                    complete: stepProperties[step]?.complete,
+                    ...(!!secondaryLabels[step] && {
+                        secondaryLabel: this.translateService.instant(secondaryLabels[step]),
+                    }),
+                    stepId: step,
+                    onClick: () => {
+                        this.widgetWizardService.$currentStep.set(step);
+                        this.renderStep(WIZARD_STEP_COMPONENTS[step]);
+                    },
+                };
+                acc.push(stepConfig);
+                return acc;
+            }, []);
+        }));
         this.$currentStepIndex = this.widgetWizardService.$currentStepIndex;
-        this.$numberOfSteps = computed(() => this.widgetWizardService.$widgetWizardSteps().length);
-        this.stepLabel$ = toObservable(this.$currentStepIndex).pipe(switchMap((stepIndex) => this.translateService.stream(`widgetTabManagement.${this.widgetWizardService.$widgetWizardSteps()[stepIndex]}.description`)));
+        this._numberOfSteps = 0;
+        this.numberOfSteps$ = this.steps$.pipe(map((steps) => {
+            this._numberOfSteps = steps.length;
+            return this._numberOfSteps;
+        }));
+        this.stepLabel$ = toObservable(this.widgetWizardService.$currentStep).pipe(switchMap((step) => this.translateService.stream(`widgetTabManagement.${step}.description`)));
         this.$backButtonDisabled = computed(() => this.widgetWizardService.$editMode() && this.$currentStepIndex() === 1);
         this.$nextButtonDisabled = this.widgetWizardService.$nextButtonDisabled;
         this._subscriptions = new Subscription();
         effect(() => {
             this.cdr.detectChanges();
-            this.renderStep(this.$currentStepIndex());
+            const stepIndex = this.$currentStepIndex();
+            this.steps$.pipe(take(1)).subscribe(steps => {
+                steps[stepIndex]?.onClick?.();
+            });
         });
     }
     ngOnDestroy() {
@@ -2654,7 +2747,7 @@ class WidgetManagementWizardComponent {
         this.widgetWizardService.$currentStepIndex.set(event.index);
     }
     onNextButtonClick() {
-        if (this.$currentStepIndex() === this.$numberOfSteps() - 1) {
+        if (this.$currentStepIndex() === this._numberOfSteps - 1) {
             const isDuplicateMode = this.editMode && !this.disableDuplicate && !this.widgetWizardService.$widgetKey();
             if (isDuplicateMode || !this.editMode) {
                 this.widgetWizardService.$widgetKey.set(this.keyGeneratorService.getUniqueKey(this.widgetWizardService.$widgetTitle() ?? '', this.widgetWizardService.$usedWidgetKeys()));
@@ -2682,14 +2775,14 @@ class WidgetManagementWizardComponent {
             this.widgetWizardService.resetWizard();
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
-    renderStep(stepIndex) {
+    renderStep(stepComponent) {
         this._vcr.clear();
-        const componentRef = this._vcr.createComponent(WIZARD_STEP_COMPONENTS[this.widgetWizardService.$widgetWizardSteps()[stepIndex]]);
+        const componentRef = this._vcr.createComponent(stepComponent);
         componentRef.location.nativeElement.classList.add('valtimo-widget-wizard-step');
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWizardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.KeyGeneratorService }, { token: i2$1.TranslateService }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementWizardComponent, isStandalone: true, selector: "valtimo-widget-management-wizard", inputs: { open: "open", disableDuplicate: "disableDuplicate", editMode: "editMode" }, outputs: { closeEvent: "closeEvent" }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["wizardStepRenderer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-widget-management-wizard\"\n  (close)=\"onClose()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-widget-management-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"$currentStepIndex()\"\n      [spacing]=\"'equal'\"\n      [steps]=\"steps$ | async\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    <p>{{ stepLabel$ | async }}</p>\n\n    <ng-template #wizardStepRenderer></ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n    <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if ($currentStepIndex() !== 0) {\n      <button\n        class=\"valtimo-widget-management-wizard__back\"\n        cdsButton=\"secondary\"\n        [disabled]=\"$backButtonDisabled()\"\n        (click)=\"onBackButtonClick()\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n    }\n\n    <button\n      class=\"valtimo-widget-management-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"$nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + ($currentStepIndex() === $numberOfSteps() - 1 ? 'save' : 'next') | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "component", type: i3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementWizardComponent, isStandalone: true, selector: "valtimo-widget-management-wizard", inputs: { open: "open", disableDuplicate: "disableDuplicate", editMode: "editMode" }, outputs: { closeEvent: "closeEvent" }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["wizardStepRenderer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-widget-management-wizard\"\n  (close)=\"onClose()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-widget-management-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"$currentStepIndex()\"\n      [spacing]=\"'equal'\"\n      [steps]=\"steps$ | async\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    <p>{{ stepLabel$ | async }}</p>\n\n    <ng-template #wizardStepRenderer></ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n    <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if ($currentStepIndex() !== 0) {\n      <button\n        class=\"valtimo-widget-management-wizard__back\"\n        cdsButton=\"secondary\"\n        [disabled]=\"$backButtonDisabled()\"\n        (click)=\"onBackButtonClick()\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n    }\n\n    <button\n      class=\"valtimo-widget-management-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"$nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + ($currentStepIndex() === (numberOfSteps$ | async) - 1 ? 'save' : 'next')\n          | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "component", type: i3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWizardComponent, decorators: [{
             type: Component,
@@ -2700,7 +2793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ModalModule,
                         ButtonModule,
                         ...WIDGET_STEPS,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-widget-management-wizard\"\n  (close)=\"onClose()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-widget-management-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"$currentStepIndex()\"\n      [spacing]=\"'equal'\"\n      [steps]=\"steps$ | async\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    <p>{{ stepLabel$ | async }}</p>\n\n    <ng-template #wizardStepRenderer></ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n    <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if ($currentStepIndex() !== 0) {\n      <button\n        class=\"valtimo-widget-management-wizard__back\"\n        cdsButton=\"secondary\"\n        [disabled]=\"$backButtonDisabled()\"\n        (click)=\"onBackButtonClick()\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n    }\n\n    <button\n      class=\"valtimo-widget-management-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"$nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + ($currentStepIndex() === $numberOfSteps() - 1 ? 'save' : 'next') | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\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<cds-modal\n  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-widget-management-wizard\"\n  (close)=\"onClose()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-widget-management-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"$currentStepIndex()\"\n      [spacing]=\"'equal'\"\n      [steps]=\"steps$ | async\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    <p>{{ stepLabel$ | async }}</p>\n\n    <ng-template #wizardStepRenderer></ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n    <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if ($currentStepIndex() !== 0) {\n      <button\n        class=\"valtimo-widget-management-wizard__back\"\n        cdsButton=\"secondary\"\n        [disabled]=\"$backButtonDisabled()\"\n        (click)=\"onBackButtonClick()\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n    }\n\n    <button\n      class=\"valtimo-widget-management-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"$nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + ($currentStepIndex() === (numberOfSteps$ | async) - 1 ? 'save' : 'next')\n          | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\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: i0.ChangeDetectorRef }, { type: i1.KeyGeneratorService }, { type: i2$1.TranslateService }, { type: WidgetWizardService }], propDecorators: { _vcr: [{
                 type: ViewChild,
                 args: ['wizardStepRenderer', { read: ViewContainerRef }]
@@ -2793,6 +2886,15 @@ class WidgetManagementEditorComponent {
                     },
                 ]
                 : []),
+            ...(!singleWidget
+                ? [
+                    {
+                        key: 'densityTranslation',
+                        label: 'widgetTabManagement.columns.density',
+                        ViewType: ViewType.BOOLEAN,
+                    },
+                ]
+                : []),
             {
                 key: 'highContrast',
                 label: 'widgetTabManagement.columns.highContrast',
@@ -2826,6 +2928,7 @@ class WidgetManagementEditorComponent {
         ])), filter$1(([widgets]) => !!widgets), tap(([widgets]) => this.widgetWizardService.$usedWidgetKeys.set(widgets.map((widget) => widget.key))), map(([widgets]) => widgets.map(item => ({
             ...item,
             widthTranslation: this.translateService.instant(this.getWidthTranslationKey(item.width)),
+            densityTranslation: this.translateService.instant(`widgetTabManagement.density.${item.isCompact ? 'compact' : 'default'}.title`),
             tags: [
                 {
                     content: this.translateService.instant(`widgetTabManagement.type.${item.type}.title`),
@@ -2855,10 +2958,11 @@ class WidgetManagementEditorComponent {
             return;
         }
         this.widgetWizardService.$widgetTitle.set(widget.title);
-        this.widgetWizardService.$widgetIcon.set(widget.icon);
+        this.widgetWizardService.$widgetIcon.set(widget.icon ?? null);
         this.widgetWizardService.$widgetStyle.set(widget.highContrast ? WidgetStyle.HIGH_CONTRAST : WidgetStyle.DEFAULT);
         this.widgetWizardService.$widgetWidth.set(widget.width || this.widgetWizardService.defaultWidth);
         this.widgetWizardService.$selectedWidget.set(AVAILABLE_WIDGETS.find(available => available.type === widget.type) ?? null);
+        this.widgetWizardService.$widgetDensity.set(!!widget.isCompact ? WidgetDensity.COMPACT : WidgetDensity.DEFAULT);
         this.widgetWizardService.$widgetContent.set(widget.properties ?? null);
         this.widgetWizardService.$widgetDisplayConditions.set(widget.displayConditions);
         this.widgetWizardService.$editMode.set(true);
@@ -3487,7 +3591,7 @@ class WidgetManagementFieldsColumnComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsColumnComponent, deps: [{ token: i1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormBuilder }, { token: i3.IconService }, { token: i2$1.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.15", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox" }, 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  } 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]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\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-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-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                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\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          </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 #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-widget-management-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\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__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--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$1.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.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", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox" }, 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  } 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]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\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-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-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                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\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          </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 #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-widget-management-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\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__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$1.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.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", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsColumnComponent, decorators: [{
             type: Component,
@@ -3504,7 +3608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ValuePathSelectorComponent,
                         CheckboxModule,
                         LayerModule,
-                    ], 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  } 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]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\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-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-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                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\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          </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 #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-widget-management-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\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__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--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  } 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]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\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-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-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                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\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          </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 #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-widget-management-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\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__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.CdsThemeService }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormBuilder }, { type: i3.IconService }, { type: i2$1.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
@@ -4430,6 +4534,7 @@ var WidgetWizardStep;
 (function (WidgetWizardStep) {
     WidgetWizardStep["TYPE"] = "type";
     WidgetWizardStep["WIDTH"] = "width";
+    WidgetWizardStep["DENSITY"] = "density";
     WidgetWizardStep["STYLE"] = "style";
     WidgetWizardStep["CONTENT"] = "content";
     WidgetWizardStep["DISPLAY_CONDITIONS"] = "displayConditions";
@@ -4445,9 +4550,15 @@ var WidgetStyle;
     WidgetStyle["DEFAULT"] = "default";
     WidgetStyle["HIGH_CONTRAST"] = "high-contrast";
 })(WidgetStyle || (WidgetStyle = {}));
+var WidgetDensity;
+(function (WidgetDensity) {
+    WidgetDensity["DEFAULT"] = "default";
+    WidgetDensity["COMPACT"] = "compact";
+})(WidgetDensity || (WidgetDensity = {}));
 const WIZARD_STEP_COMPONENTS = {
     [WidgetWizardStep.TYPE]: WidgetWizardTypeStepComponent,
     [WidgetWizardStep.WIDTH]: WidgetWizardWidthStepComponent,
+    [WidgetWizardStep.DENSITY]: WidgetWizardDensityStepComponent,
     [WidgetWizardStep.STYLE]: WidgetWizardStyleStepComponent,
     [WidgetWizardStep.CONTENT]: WidgetWizardContentStepComponent,
     [WidgetWizardStep.DISPLAY_CONDITIONS]: WidgetWizardDisplayConditionsStepComponent,
@@ -4513,6 +4624,10 @@ const WIDGET_STYLE_LABELS = {
     [WidgetStyle.DEFAULT]: 'widgetTabManagement.style.default.title',
     [WidgetStyle.HIGH_CONTRAST]: 'widgetTabManagement.style.highContrast.title',
 };
+const WIDGET_DENSITY_LABELS = {
+    [WidgetDensity.DEFAULT]: 'widgetTabManagement.density.default.title',
+    [WidgetDensity.COMPACT]: 'widgetTabManagement.density.compact.title',
+};
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -4873,5 +4988,5 @@ class ManagementWidgetDetailsComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_STYLE_LABELS, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetContainerComponent, WidgetCustomComponent, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetStyle, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
+export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_DENSITY_LABELS, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_STYLE_LABELS, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetContainerComponent, WidgetCustomComponent, WidgetDensity, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetStyle, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
 //# sourceMappingURL=valtimo-layout.mjs.map