@valtimo/layout 13.14.0 → 13.16.0

package/fesm2022/valtimo-layout.mjs

@@ -131,6 +131,20 @@ var WidgetType;
     WidgetType["DIVIDER"] = "divider";
     WidgetType["MAP"] = "map";
 })(WidgetType || (WidgetType = {}));
+var WidgetColor;
+(function (WidgetColor) {
+    WidgetColor["YELLOW"] = "YELLOW";
+    WidgetColor["ORANGE"] = "ORANGE";
+    WidgetColor["RED"] = "RED";
+    WidgetColor["BROWN"] = "BROWN";
+    WidgetColor["GREEN"] = "GREEN";
+    WidgetColor["TURQOISE"] = "TURQOISE";
+    WidgetColor["PURPLE"] = "PURPLE";
+    WidgetColor["PERIWINKLE"] = "PERIWINKLE";
+    WidgetColor["BLUE"] = "BLUE";
+    WidgetColor["WHITE"] = "WHITE";
+    WidgetColor["HIGHCONTRAST"] = "HIGHCONTRAST";
+})(WidgetColor || (WidgetColor = {}));
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -514,7 +528,7 @@ class WidgetFieldComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetFieldComponent, deps: [{ token: i1.ViewContentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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.widgetData && 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 (!obs.widgetData) {\n                    <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"100\"></cds-skeleton-text>\n                  } @else {\n                    @if (property?.isRawValue) {\n                      <div [innerHTML]=\"property?.value\"></div>\n                    } @else {\n                      {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                    }\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__field-value cds-skeleton-text{font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text .cds--skeleton__text{margin-bottom:0;height:14px;min-height: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 }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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.widgetData && 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 (!obs.widgetData) {\n                    <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"100\"></cds-skeleton-text>\n                  } @else {\n                    @if (property?.isRawValue) {\n                      <div [innerHTML]=\"property?.value\"></div>\n                    } @else {\n                      {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                    }\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(--widget-text-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;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-field__title-container .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))!important}.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(--widget-text-color, var(--cds-text-secondary))}.valtimo-widget-field__field-value{color:var(--widget-text-color, var(--cds-text-primary));padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text{font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text .cds--skeleton__text{margin-bottom:0;height:14px;min-height: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(--widget-accent-color, 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(--widget-accent-color, var(--cds-border-subtle-01))}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.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 }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetFieldComponent, decorators: [{
             type: Component,
@@ -529,7 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         MdiIconViewerComponent,
                         LayerModule,
                         SkeletonModule,
-                    ], 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.widgetData && 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 (!obs.widgetData) {\n                    <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"100\"></cds-skeleton-text>\n                  } @else {\n                    @if (property?.isRawValue) {\n                      <div [innerHTML]=\"property?.value\"></div>\n                    } @else {\n                      {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                    }\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__field-value cds-skeleton-text{font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text .cds--skeleton__text{margin-bottom:0;height:14px;min-height: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"] }]
+                    ], 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.widgetData && 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 (!obs.widgetData) {\n                    <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"100\"></cds-skeleton-text>\n                  } @else {\n                    @if (property?.isRawValue) {\n                      <div [innerHTML]=\"property?.value\"></div>\n                    } @else {\n                      {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                    }\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(--widget-text-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;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-field__title-container .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))!important}.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(--widget-text-color, var(--cds-text-secondary))}.valtimo-widget-field__field-value{color:var(--widget-text-color, var(--cds-text-primary));padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text{font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text .cds--skeleton__text{margin-bottom:0;height:14px;min-height: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(--widget-accent-color, 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(--widget-accent-color, var(--cds-border-subtle-01))}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1.ViewContentService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -941,7 +955,7 @@ class WidgetFormioComponent {
         }), map(([formDef]) => formDef));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetFormioComponent, deps: [{ token: i1$2.FormService }, { token: WidgetLayoutService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", widgetUuid: "widgetUuid", refreshForm: "refreshForm" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <div class=\"formio-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".formio-widget{padding:16px}.formio-widget__header{display:flex;justify-content:space-between}.formio-widget__title-container{display:flex;align-items:center;gap:8px;margin-bottom:8px}.formio-widget{padding:24px}.formio-widget__header{display:flex;align-items:center;justify-content:space-between}.formio-widget__title{color:var(--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: TranslateModule }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", widgetUuid: "widgetUuid", refreshForm: "refreshForm" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <div class=\"formio-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".formio-widget{padding:16px}.formio-widget__header{display:flex;justify-content:space-between}.formio-widget__title-container{display:flex;align-items:center;gap:8px;margin-bottom:8px}.formio-widget{padding:24px}.formio-widget__header{display:flex;align-items:center;justify-content:space-between}.formio-widget__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetFormioComponent, decorators: [{
             type: Component,
@@ -952,7 +966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         ButtonModule,
                         WidgetActionButtonComponent,
                         MdiIconViewerComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <div class=\"formio-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".formio-widget{padding:16px}.formio-widget__header{display:flex;justify-content:space-between}.formio-widget__title-container{display:flex;align-items:center;gap:8px;margin-bottom:8px}.formio-widget{padding:24px}.formio-widget__header{display:flex;align-items:center;justify-content:space-between}.formio-widget__title{color:var(--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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <div class=\"formio-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".formio-widget{padding:16px}.formio-widget__header{display:flex;justify-content:space-between}.formio-widget__title-container{display:flex;align-items:center;gap:8px;margin-bottom:8px}.formio-widget{padding:24px}.formio-widget__header{display:flex;align-items:center;justify-content:space-between}.formio-widget__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormService }, { type: WidgetLayoutService }, { type: i0.DestroyRef }], propDecorators: { documentId: [{
                 type: Input
             }], widgetConfiguration: [{
@@ -1166,7 +1180,7 @@ class WidgetCollectionComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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.18", 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\">\n          @if (!obs.widgetData) {\n            <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n          } @else {\n            {{ card.title }}\n          }\n        </span>\n\n        <section class=\"valtimo-widget-collection__card-content\">\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                @if (!obs.widgetData) {\n                  <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n                } @else {\n                  <input\n                    [value]=\"field?.value\"\n                    [readonly]=\"true\"\n                    class=\"valtimo-widget-collection__card-input\"\n                    cdsText\n                  />\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  @if ($paginationModel() && $showPagination()) {\n    <cds-pagination-nav\n      class=\"valtimo-widget-collection__pagination\"\n      [model]=\"$paginationModel()\"\n      (selectPage)=\"onSelectPage($event)\"\n    >\n    </cds-pagination-nav>\n  } @else if (!obs.widgetData) {\n    <div class=\"valtimo-widget-collection__pagination\">\n      <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"150\" [minLineWidth]=\"150\"></cds-skeleton-text>\n    </div>\n  }\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 .cds--label cds-skeleton-text{margin:16px 0 0;display:block}.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-title cds-skeleton-text{display:block}.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;height:64px;align-items:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{grid-template-columns:1fr}.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"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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\">\n          @if (!obs.widgetData) {\n            <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n          } @else {\n            {{ card.title }}\n          }\n        </span>\n\n        <section class=\"valtimo-widget-collection__card-content\">\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                @if (!obs.widgetData) {\n                  <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n                } @else {\n                  <input\n                    [value]=\"field?.value\"\n                    [readonly]=\"true\"\n                    class=\"valtimo-widget-collection__card-input\"\n                    cdsText\n                  />\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  @if ($paginationModel() && $showPagination()) {\n    <cds-pagination-nav\n      class=\"valtimo-widget-collection__pagination\"\n      [model]=\"$paginationModel()\"\n      (selectPage)=\"onSelectPage($event)\"\n    >\n    </cds-pagination-nav>\n  } @else if (!obs.widgetData) {\n    <div class=\"valtimo-widget-collection__pagination\">\n      <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"150\" [minLineWidth]=\"150\"></cds-skeleton-text>\n    </div>\n  }\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%;color:inherit}.valtimo-widget-collection .cds--label cds-skeleton-text{margin:16px 0 0;display:block}.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-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection__title{color:var(--widget-text-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(--widget-layer-color, var(--cds-background));padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-title cds-skeleton-text{display:block}.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;height:64px;align-items:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{grid-template-columns:1fr}.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-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.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"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetCollectionComponent, decorators: [{
             type: Component,
@@ -1181,7 +1195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         WidgetActionButtonComponent,
                         MdiIconViewerComponent,
                         SkeletonModule,
-                    ], 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\">\n          @if (!obs.widgetData) {\n            <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n          } @else {\n            {{ card.title }}\n          }\n        </span>\n\n        <section class=\"valtimo-widget-collection__card-content\">\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                @if (!obs.widgetData) {\n                  <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n                } @else {\n                  <input\n                    [value]=\"field?.value\"\n                    [readonly]=\"true\"\n                    class=\"valtimo-widget-collection__card-input\"\n                    cdsText\n                  />\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  @if ($paginationModel() && $showPagination()) {\n    <cds-pagination-nav\n      class=\"valtimo-widget-collection__pagination\"\n      [model]=\"$paginationModel()\"\n      (selectPage)=\"onSelectPage($event)\"\n    >\n    </cds-pagination-nav>\n  } @else if (!obs.widgetData) {\n    <div class=\"valtimo-widget-collection__pagination\">\n      <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"150\" [minLineWidth]=\"150\"></cds-skeleton-text>\n    </div>\n  }\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 .cds--label cds-skeleton-text{margin:16px 0 0;display:block}.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-title cds-skeleton-text{display:block}.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;height:64px;align-items:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{grid-template-columns:1fr}.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"] }]
+                    ], 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\">\n          @if (!obs.widgetData) {\n            <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n          } @else {\n            {{ card.title }}\n          }\n        </span>\n\n        <section class=\"valtimo-widget-collection__card-content\">\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                @if (!obs.widgetData) {\n                  <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n                } @else {\n                  <input\n                    [value]=\"field?.value\"\n                    [readonly]=\"true\"\n                    class=\"valtimo-widget-collection__card-input\"\n                    cdsText\n                  />\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  @if ($paginationModel() && $showPagination()) {\n    <cds-pagination-nav\n      class=\"valtimo-widget-collection__pagination\"\n      [model]=\"$paginationModel()\"\n      (selectPage)=\"onSelectPage($event)\"\n    >\n    </cds-pagination-nav>\n  } @else if (!obs.widgetData) {\n    <div class=\"valtimo-widget-collection__pagination\">\n      <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"150\" [minLineWidth]=\"150\"></cds-skeleton-text>\n    </div>\n  }\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%;color:inherit}.valtimo-widget-collection .cds--label cds-skeleton-text{margin:16px 0 0;display:block}.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-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection__title{color:var(--widget-text-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(--widget-layer-color, var(--cds-background));padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-title cds-skeleton-text{display:block}.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;height:64px;align-items:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{grid-template-columns:1fr}.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-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1.ViewContentService }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -1311,7 +1325,7 @@ class WidgetTableComponent {
         this.paginationEvent.emit({ ...paginationModel, currentPage: page });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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.fields && (obs.widgetData === null || obs.widgetData.length > 0)) {\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        [loading]=\"obs.widgetData === null\"\n        [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n      >\n      </valtimo-carbon-list>\n\n      @if ($paginationModel() && $showPagination()) {\n        <cds-pagination-nav\n          class=\"valtimo-widget-table__pagination\"\n          [model]=\"$paginationModel()\"\n          (selectPage)=\"onSelectPage($event)\"\n        >\n        </cds-pagination-nav>\n      } @else if (obs.widgetData === null) {\n        <div class=\"valtimo-widget-table__pagination\">\n          <cds-skeleton-text\n            [lines]=\"1\"\n            [maxLineWidth]=\"150\"\n            [minLineWidth]=\"150\"\n          ></cds-skeleton-text>\n        </div>\n      }\n    </section>\n  } @else if (obs.widgetData !== null) {\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;display:flex;justify-content:center;height:64px;align-items:center}.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", "skeletonRowCount", "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"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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.fields && (obs.widgetData === null || obs.widgetData.length > 0)) {\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        [loading]=\"obs.widgetData === null\"\n        [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n      >\n      </valtimo-carbon-list>\n\n      @if ($paginationModel() && $showPagination()) {\n        <cds-pagination-nav\n          class=\"valtimo-widget-table__pagination\"\n          [model]=\"$paginationModel()\"\n          (selectPage)=\"onSelectPage($event)\"\n        >\n        </cds-pagination-nav>\n      } @else if (obs.widgetData === null) {\n        <div class=\"valtimo-widget-table__pagination\">\n          <cds-skeleton-text\n            [lines]=\"1\"\n            [maxLineWidth]=\"150\"\n            [minLineWidth]=\"150\"\n          ></cds-skeleton-text>\n        </div>\n      }\n    </section>\n  } @else if (obs.widgetData !== null) {\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;background-color:var(--widget-background-color, var(--cds-layer));color:var(--widget-text-color, var(--cds-text-primary));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__title-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column;color:inherit}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0;display:flex;justify-content:center;height:64px;align-items:center}.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(--widget-text-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(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-table .valtimo-no-results__content{color:var(--widget-text-color, var(--cds-text-primary))!important}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "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"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetTableComponent, decorators: [{
             type: Component,
@@ -1325,7 +1339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         WidgetActionButtonComponent,
                         MdiIconViewerComponent,
                         SkeletonModule,
-                    ], 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.fields && (obs.widgetData === null || obs.widgetData.length > 0)) {\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        [loading]=\"obs.widgetData === null\"\n        [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n      >\n      </valtimo-carbon-list>\n\n      @if ($paginationModel() && $showPagination()) {\n        <cds-pagination-nav\n          class=\"valtimo-widget-table__pagination\"\n          [model]=\"$paginationModel()\"\n          (selectPage)=\"onSelectPage($event)\"\n        >\n        </cds-pagination-nav>\n      } @else if (obs.widgetData === null) {\n        <div class=\"valtimo-widget-table__pagination\">\n          <cds-skeleton-text\n            [lines]=\"1\"\n            [maxLineWidth]=\"150\"\n            [minLineWidth]=\"150\"\n          ></cds-skeleton-text>\n        </div>\n      }\n    </section>\n  } @else if (obs.widgetData !== null) {\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;display:flex;justify-content:center;height:64px;align-items:center}.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"] }]
+                    ], 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.fields && (obs.widgetData === null || obs.widgetData.length > 0)) {\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        [loading]=\"obs.widgetData === null\"\n        [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n      >\n      </valtimo-carbon-list>\n\n      @if ($paginationModel() && $showPagination()) {\n        <cds-pagination-nav\n          class=\"valtimo-widget-table__pagination\"\n          [model]=\"$paginationModel()\"\n          (selectPage)=\"onSelectPage($event)\"\n        >\n        </cds-pagination-nav>\n      } @else if (obs.widgetData === null) {\n        <div class=\"valtimo-widget-table__pagination\">\n          <cds-skeleton-text\n            [lines]=\"1\"\n            [maxLineWidth]=\"150\"\n            [minLineWidth]=\"150\"\n          ></cds-skeleton-text>\n        </div>\n      }\n    </section>\n  } @else if (obs.widgetData !== null) {\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;background-color:var(--widget-background-color, var(--cds-layer));color:var(--widget-text-color, var(--cds-text-primary));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__title-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column;color:inherit}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0;display:flex;justify-content:center;height:64px;align-items:center}.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(--widget-text-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(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-table .valtimo-no-results__content{color:var(--widget-text-color, var(--cds-text-primary))!important}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { widgetConfiguration: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1445,7 +1459,7 @@ class WidgetInteractiveTableSearchComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableSearchComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetInteractiveTableSearchComponent, isStandalone: true, selector: "valtimo-widget-interactive-table-search", inputs: { initSearchRequest: "initSearchRequest", filters: "filters" }, outputs: { searchSubmitEvent: "searchSubmitEvent" }, 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=\"theme$ | async as theme\"\n  class=\"valtimo-widget-interactive-table-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopImmediatePropagation()\"\n>\n  <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n    @for (filter of filters; track filter.key) {\n      <cds-text-label class=\"valtimo-widget-interactive-table-search__filter-field\">\n        {{ filter.title }}\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [formControlName]=\"filter.key\"\n          [placeholder]=\"filter.title\"\n        />\n      </cds-text-label>\n    }\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;width:360px;padding:16px}.valtimo-widget-interactive-table-search__fields{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;margin-bottom:16px;gap:16px}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--cds-text-secondary)}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetInteractiveTableSearchComponent, isStandalone: true, selector: "valtimo-widget-interactive-table-search", inputs: { initSearchRequest: "initSearchRequest", filters: "filters" }, outputs: { searchSubmitEvent: "searchSubmitEvent" }, 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=\"theme$ | async as theme\"\n  class=\"valtimo-widget-interactive-table-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopImmediatePropagation()\"\n>\n  <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n    @for (filter of filters; track filter.key) {\n      <cds-text-label class=\"valtimo-widget-interactive-table-search__filter-field\">\n        {{ filter.title }}\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [formControlName]=\"filter.key\"\n          [placeholder]=\"filter.title\"\n        />\n      </cds-text-label>\n    }\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;width:360px;padding:16px}.valtimo-widget-interactive-table-search__fields{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;margin-bottom:16px;gap:16px}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--widget-text-color, var(--cds-text-secondary))}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$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: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableSearchComponent, decorators: [{
             type: Component,
@@ -1457,7 +1471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         InputModule,
                         ReactiveFormsModule,
                         FormsModule,
-                    ], 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=\"theme$ | async as theme\"\n  class=\"valtimo-widget-interactive-table-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopImmediatePropagation()\"\n>\n  <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n    @for (filter of filters; track filter.key) {\n      <cds-text-label class=\"valtimo-widget-interactive-table-search__filter-field\">\n        {{ filter.title }}\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [formControlName]=\"filter.key\"\n          [placeholder]=\"filter.title\"\n        />\n      </cds-text-label>\n    }\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;width:360px;padding:16px}.valtimo-widget-interactive-table-search__fields{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;margin-bottom:16px;gap:16px}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--cds-text-secondary)}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<form\n  *ngIf=\"theme$ | async as theme\"\n  class=\"valtimo-widget-interactive-table-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopImmediatePropagation()\"\n>\n  <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n    @for (filter of filters; track filter.key) {\n      <cds-text-label class=\"valtimo-widget-interactive-table-search__filter-field\">\n        {{ filter.title }}\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [formControlName]=\"filter.key\"\n          [placeholder]=\"filter.title\"\n        />\n      </cds-text-label>\n    }\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;width:360px;padding:16px}.valtimo-widget-interactive-table-search__fields{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;margin-bottom:16px;gap:16px}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--widget-text-color, var(--cds-text-secondary))}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i3.IconService }], propDecorators: { initSearchRequest: [{
                 type: Input
             }], filters: [{
@@ -1661,7 +1675,7 @@ class WidgetInteractiveTableComponent {
         this.searchSubmitEvent.emit(searchRequest);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.DocumentService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetInteractiveTableComponent, isStandalone: true, selector: "valtimo-widget-interactive-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", searchRequest: "searchRequest" }, outputs: { paginationEvent: "paginationEvent", rowClickEvent: "rowClickEvent", actionEvent: "actionEvent", caseStartEvent: "caseStartEvent", queryParamsEvent: "queryParamsEvent", searchSubmitEvent: "searchSubmitEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    caseDefinitions: caseDefinitions$ | async,\n    filters: filters$ | async,\n  } as obs\"\n>\n  <div class=\"valtimo-widget-interactive-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  <valtimo-carbon-list\n    [header]=\"false\"\n    [fields]=\"obs.fields\"\n    [items]=\"obs.widgetData || []\"\n    [initialSortState]=\"$initialSortState()\"\n    [loading]=\"obs.widgetData === null\"\n    [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n    [pagination]=\"$paginationModel()\"\n    [paginatorConfig]=\"$paginatorConfig()\"\n    (paginationClicked)=\"onPaginationClicked($event)\"\n    (paginationSet)=\"onPaginationSet($event)\"\n    (sortChanged)=\"onSortChanged($event)\"\n    (rowClicked)=\"rowClick($event)\"\n  >\n    <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n      <button\n        *ngIf=\"!!obs.filters.length\"\n        carbonToolbarContent\n        [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n        [customPane]=\"true\"\n        [iconOnly]=\"true\"\n        [flip]=\"true\"\n        [offset]=\"{x: 0, y: 47}\"\n        placement=\"bottom\"\n        cdsButton=\"ghost\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <cds-overflow-menu\n        *ngIf=\"!!widgetConfiguration?.actions?.length\"\n        [customTrigger]=\"externalLinkTrigger\"\n        placement=\"bottom\"\n        flip=\"true\"\n        [offset]=\"{x: 4, y: 44}\"\n      >\n        @for (action of widgetConfiguration?.actions; track action.name) {\n          <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n            {{ action.name }}\n          </cds-overflow-menu-option>\n        }\n      </cds-overflow-menu>\n\n      <cds-menu-button\n        *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n        [label]=\"'Start Case' | translate\"\n      >\n        @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n          <cds-menu-item\n            [label]=\"definition.name\"\n            (click)=\"onCaseStart(definition)\"\n          ></cds-menu-item>\n        }\n      </cds-menu-button>\n    </section>\n\n    <valtimo-no-results\n      *ngIf=\"obs.widgetData !== null\"\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #widgetInteractiveTableSearch>\n    <valtimo-widget-interactive-table-search\n      [filters]=\"obs.filters\"\n      [initSearchRequest]=\"searchRequest\"\n      (searchSubmitEvent)=\"onSearchSubmit($event)\"\n    ></valtimo-widget-interactive-table-search>\n  </ng-template>\n\n  <ng-template #externalLinkTrigger>\n    <button cdsButton=\"ghost\" iconOnly=\"true\">\n      <svg cdsIcon=\"link\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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", "skeletonRowCount", "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: "ngmodule", type: TilesModule }, { 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: DialogModule }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "directive", type: i3.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "ngmodule", type: MenuButtonModule }, { kind: "component", type: i3.MenuButtonComponent, selector: "cds-menu-button", inputs: ["menuId", "kind", "size", "menuAlignment", "buttonTabIndex", "disabled", "open", "label"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3.ContextMenuItemComponent, selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", inputs: ["disabled", "danger", "label", "info", "type", "checked", "icon", "value"], outputs: ["checkedChange", "itemClick"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: WidgetInteractiveTableSearchComponent, selector: "valtimo-widget-interactive-table-search", inputs: ["initSearchRequest", "filters"], outputs: ["searchSubmitEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetInteractiveTableComponent, isStandalone: true, selector: "valtimo-widget-interactive-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", searchRequest: "searchRequest" }, outputs: { paginationEvent: "paginationEvent", rowClickEvent: "rowClickEvent", actionEvent: "actionEvent", caseStartEvent: "caseStartEvent", queryParamsEvent: "queryParamsEvent", searchSubmitEvent: "searchSubmitEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    caseDefinitions: caseDefinitions$ | async,\n    filters: filters$ | async,\n  } as obs\"\n>\n  <div class=\"valtimo-widget-interactive-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  <valtimo-carbon-list\n    [header]=\"false\"\n    [fields]=\"obs.fields\"\n    [items]=\"obs.widgetData || []\"\n    [initialSortState]=\"$initialSortState()\"\n    [loading]=\"obs.widgetData === null\"\n    [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n    [pagination]=\"$paginationModel()\"\n    [paginatorConfig]=\"$paginatorConfig()\"\n    (paginationClicked)=\"onPaginationClicked($event)\"\n    (paginationSet)=\"onPaginationSet($event)\"\n    (sortChanged)=\"onSortChanged($event)\"\n    (rowClicked)=\"rowClick($event)\"\n  >\n    <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n      <button\n        *ngIf=\"!!obs.filters.length\"\n        carbonToolbarContent\n        [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n        [customPane]=\"true\"\n        [iconOnly]=\"true\"\n        [flip]=\"true\"\n        [offset]=\"{x: 0, y: 47}\"\n        placement=\"bottom\"\n        cdsButton=\"ghost\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <cds-overflow-menu\n        *ngIf=\"!!widgetConfiguration?.actions?.length\"\n        [customTrigger]=\"externalLinkTrigger\"\n        placement=\"bottom\"\n        flip=\"true\"\n        [offset]=\"{x: 4, y: 44}\"\n      >\n        @for (action of widgetConfiguration?.actions; track action.name) {\n          <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n            {{ action.name }}\n          </cds-overflow-menu-option>\n        }\n      </cds-overflow-menu>\n\n      <cds-menu-button\n        *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n        [label]=\"'Start Case' | translate\"\n      >\n        @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n          <cds-menu-item\n            [label]=\"definition.name\"\n            (click)=\"onCaseStart(definition)\"\n          ></cds-menu-item>\n        }\n      </cds-menu-button>\n    </section>\n\n    <valtimo-no-results\n      *ngIf=\"obs.widgetData !== null\"\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #widgetInteractiveTableSearch>\n    <valtimo-widget-interactive-table-search\n      [filters]=\"obs.filters\"\n      [initSearchRequest]=\"searchRequest\"\n      (searchSubmitEvent)=\"onSearchSubmit($event)\"\n    ></valtimo-widget-interactive-table-search>\n  </ng-template>\n\n  <ng-template #externalLinkTrigger>\n    <button cdsButton=\"ghost\" iconOnly=\"true\">\n      <svg cdsIcon=\"link\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "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: "ngmodule", type: TilesModule }, { 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: DialogModule }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "directive", type: i3.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "ngmodule", type: MenuButtonModule }, { kind: "component", type: i3.MenuButtonComponent, selector: "cds-menu-button", inputs: ["menuId", "kind", "size", "menuAlignment", "buttonTabIndex", "disabled", "open", "label"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3.ContextMenuItemComponent, selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", inputs: ["disabled", "danger", "label", "info", "type", "checked", "icon", "value"], outputs: ["checkedChange", "itemClick"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: WidgetInteractiveTableSearchComponent, selector: "valtimo-widget-interactive-table-search", inputs: ["initSearchRequest", "filters"], outputs: ["searchSubmitEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableComponent, decorators: [{
             type: Component,
@@ -1679,7 +1693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         MdiIconViewerComponent,
                         SkeletonModule,
                         WidgetInteractiveTableSearchComponent,
-                    ], 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    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    caseDefinitions: caseDefinitions$ | async,\n    filters: filters$ | async,\n  } as obs\"\n>\n  <div class=\"valtimo-widget-interactive-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  <valtimo-carbon-list\n    [header]=\"false\"\n    [fields]=\"obs.fields\"\n    [items]=\"obs.widgetData || []\"\n    [initialSortState]=\"$initialSortState()\"\n    [loading]=\"obs.widgetData === null\"\n    [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n    [pagination]=\"$paginationModel()\"\n    [paginatorConfig]=\"$paginatorConfig()\"\n    (paginationClicked)=\"onPaginationClicked($event)\"\n    (paginationSet)=\"onPaginationSet($event)\"\n    (sortChanged)=\"onSortChanged($event)\"\n    (rowClicked)=\"rowClick($event)\"\n  >\n    <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n      <button\n        *ngIf=\"!!obs.filters.length\"\n        carbonToolbarContent\n        [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n        [customPane]=\"true\"\n        [iconOnly]=\"true\"\n        [flip]=\"true\"\n        [offset]=\"{x: 0, y: 47}\"\n        placement=\"bottom\"\n        cdsButton=\"ghost\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <cds-overflow-menu\n        *ngIf=\"!!widgetConfiguration?.actions?.length\"\n        [customTrigger]=\"externalLinkTrigger\"\n        placement=\"bottom\"\n        flip=\"true\"\n        [offset]=\"{x: 4, y: 44}\"\n      >\n        @for (action of widgetConfiguration?.actions; track action.name) {\n          <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n            {{ action.name }}\n          </cds-overflow-menu-option>\n        }\n      </cds-overflow-menu>\n\n      <cds-menu-button\n        *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n        [label]=\"'Start Case' | translate\"\n      >\n        @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n          <cds-menu-item\n            [label]=\"definition.name\"\n            (click)=\"onCaseStart(definition)\"\n          ></cds-menu-item>\n        }\n      </cds-menu-button>\n    </section>\n\n    <valtimo-no-results\n      *ngIf=\"obs.widgetData !== null\"\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #widgetInteractiveTableSearch>\n    <valtimo-widget-interactive-table-search\n      [filters]=\"obs.filters\"\n      [initSearchRequest]=\"searchRequest\"\n      (searchSubmitEvent)=\"onSearchSubmit($event)\"\n    ></valtimo-widget-interactive-table-search>\n  </ng-template>\n\n  <ng-template #externalLinkTrigger>\n    <button cdsButton=\"ghost\" iconOnly=\"true\">\n      <svg cdsIcon=\"link\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    caseDefinitions: caseDefinitions$ | async,\n    filters: filters$ | async,\n  } as obs\"\n>\n  <div class=\"valtimo-widget-interactive-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  <valtimo-carbon-list\n    [header]=\"false\"\n    [fields]=\"obs.fields\"\n    [items]=\"obs.widgetData || []\"\n    [initialSortState]=\"$initialSortState()\"\n    [loading]=\"obs.widgetData === null\"\n    [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n    [pagination]=\"$paginationModel()\"\n    [paginatorConfig]=\"$paginatorConfig()\"\n    (paginationClicked)=\"onPaginationClicked($event)\"\n    (paginationSet)=\"onPaginationSet($event)\"\n    (sortChanged)=\"onSortChanged($event)\"\n    (rowClicked)=\"rowClick($event)\"\n  >\n    <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n      <button\n        *ngIf=\"!!obs.filters.length\"\n        carbonToolbarContent\n        [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n        [customPane]=\"true\"\n        [iconOnly]=\"true\"\n        [flip]=\"true\"\n        [offset]=\"{x: 0, y: 47}\"\n        placement=\"bottom\"\n        cdsButton=\"ghost\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <cds-overflow-menu\n        *ngIf=\"!!widgetConfiguration?.actions?.length\"\n        [customTrigger]=\"externalLinkTrigger\"\n        placement=\"bottom\"\n        flip=\"true\"\n        [offset]=\"{x: 4, y: 44}\"\n      >\n        @for (action of widgetConfiguration?.actions; track action.name) {\n          <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n            {{ action.name }}\n          </cds-overflow-menu-option>\n        }\n      </cds-overflow-menu>\n\n      <cds-menu-button\n        *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n        [label]=\"'Start Case' | translate\"\n      >\n        @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n          <cds-menu-item\n            [label]=\"definition.name\"\n            (click)=\"onCaseStart(definition)\"\n          ></cds-menu-item>\n        }\n      </cds-menu-button>\n    </section>\n\n    <valtimo-no-results\n      *ngIf=\"obs.widgetData !== null\"\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #widgetInteractiveTableSearch>\n    <valtimo-widget-interactive-table-search\n      [filters]=\"obs.filters\"\n      [initSearchRequest]=\"searchRequest\"\n      (searchSubmitEvent)=\"onSearchSubmit($event)\"\n    ></valtimo-widget-interactive-table-search>\n  </ng-template>\n\n  <ng-template #externalLinkTrigger>\n    <button cdsButton=\"ghost\" iconOnly=\"true\">\n      <svg cdsIcon=\"link\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$2.DocumentService }, { type: i3.IconService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -1791,7 +1805,7 @@ class WidgetCustomComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetCustomComponent, deps: [{ token: CUSTOM_WIDGET_TOKEN, optional: true }, { token: i0.ChangeDetectorRef }, { token: WidgetLayoutService }, { token: i2$2.DocumentService }, { token: i3$1.PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetCustomComponent, isStandalone: true, selector: "valtimo-widget-custom", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", widgetUuid: "widgetUuid" }, viewQueries: [{ propertyName: "_customWidgetContainerRef", first: true, predicate: ["customWidgetContainer"], 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<div\n  *ngIf=\"{\n    widgetConfiguration: widgetConfig$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n  class=\"custom-widget\"\n>\n  <section class=\"custom-widget__header\">\n    <div class=\"custom-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration?.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"custom-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <div class=\"custom-widget__content\">\n    <ng-template #customWidgetContainer></ng-template>\n\n    @if (noCustomComponentAvailable()) {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'widgets.noCustomComponentDescription' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </div>\n</div>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title-container{display:flex;align-items:center;gap:8px}.custom-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.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"] }, { kind: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetCustomComponent, isStandalone: true, selector: "valtimo-widget-custom", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", widgetUuid: "widgetUuid" }, viewQueries: [{ propertyName: "_customWidgetContainerRef", first: true, predicate: ["customWidgetContainer"], 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<div\n  *ngIf=\"{\n    widgetConfiguration: widgetConfig$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n  class=\"custom-widget\"\n>\n  <section class=\"custom-widget__header\">\n    <div class=\"custom-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration?.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"custom-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <div class=\"custom-widget__content\">\n    <ng-template #customWidgetContainer></ng-template>\n\n    @if (noCustomComponentAvailable()) {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'widgets.noCustomComponentDescription' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </div>\n</div>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title-container{display:flex;align-items:center;gap:8px}.custom-widget__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 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"] }, { kind: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetCustomComponent, decorators: [{
             type: Component,
@@ -1803,7 +1817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         WidgetActionButtonComponent,
                         MdiIconViewerComponent,
                         LayerModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    widgetConfiguration: widgetConfig$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n  class=\"custom-widget\"\n>\n  <section class=\"custom-widget__header\">\n    <div class=\"custom-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration?.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"custom-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <div class=\"custom-widget__content\">\n    <ng-template #customWidgetContainer></ng-template>\n\n    @if (noCustomComponentAvailable()) {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'widgets.noCustomComponentDescription' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </div>\n</div>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title-container{display:flex;align-items:center;gap:8px}.custom-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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    widgetConfiguration: widgetConfig$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n  class=\"custom-widget\"\n>\n  <section class=\"custom-widget__header\">\n    <div class=\"custom-widget__title-container\">\n      <valtimo-mdi-icon-viewer\n        *ngIf=\"obs.widgetConfiguration?.icon\"\n        [mdiIcon]=\"obs.widgetConfiguration?.icon\"\n      ></valtimo-mdi-icon-viewer>\n\n      <h4 class=\"custom-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n    </div>\n\n    <ng-content></ng-content>\n\n    <valtimo-widget-action-button\n      [widgetConfiguration]=\"obs.widgetConfiguration\"\n      [resolvedData]=\"obs.widgetData\"\n    ></valtimo-widget-action-button>\n  </section>\n\n  <div class=\"custom-widget__content\">\n    <ng-template #customWidgetContainer></ng-template>\n\n    @if (noCustomComponentAvailable()) {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'widgets.noCustomComponentDescription' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </div>\n</div>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title-container{display:flex;align-items:center;gap:8px}.custom-widget__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1837,7 +1851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  */
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1888,15 +1902,10 @@ class WidgetBlockComponent {
             this.widgetLayoutService.triggerMuuriLayout();
         }));
         this.documentId$ = this.route.params.pipe(map(params => params?.documentId), filter$1(documentId => !!documentId));
-        this.theme$ = combineLatest([this.cdsThemeService.currentTheme$, this.widget$]).pipe(map(([currentTheme, widgetConfiguration]) => {
-            return currentTheme === CurrentCarbonTheme.G10
-                ? widgetConfiguration.highContrast
-                    ? CARBON_THEME.G100
-                    : CARBON_THEME.G10
-                : widgetConfiguration.highContrast
-                    ? CARBON_THEME.WHITE
-                    : CARBON_THEME.G90;
-        }));
+        this.theme$ = this.cdsThemeService.currentTheme$.pipe(map(currentTheme => currentTheme === CurrentCarbonTheme.G10
+            ? CARBON_THEME.G10
+            : CARBON_THEME.G90));
+        this.widgetColors$ = combineLatest([this.widget$, this.theme$]).pipe(map(([widgetConfiguration, theme]) => this.getWidgetColorVariant(widgetConfiguration, theme)));
         this._subscriptions = new Subscription();
     }
     ngAfterViewInit() {
@@ -1934,12 +1943,21 @@ class WidgetBlockComponent {
             componentRef.instance.widgetParams = this.widgetParams;
         }));
     }
+    getWidgetColorVariant(widgetConfiguration, theme) {
+        const colorKey = widgetConfiguration.color ?? WidgetColor.WHITE;
+        const widgetColor = WIDGET_COLOR_THEME_MAP[colorKey] ?? WIDGET_COLOR_THEME_MAP[WidgetColor.WHITE];
+        const themeType = this.isLightTheme(theme) ? 'light' : 'dark';
+        return widgetColor[themeType] ?? WIDGET_COLOR_THEME_MAP[WidgetColor.WHITE][themeType];
+    }
+    isLightTheme(theme) {
+        return theme === CARBON_THEME.G10 || theme === CARBON_THEME.WHITE;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetBlockComponent, deps: [{ token: WidgetLayoutService }, { token: i2.ActivatedRoute }, { token: i1.CdsThemeService }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: WidgetBlockComponent, isStandalone: true, selector: "valtimo-widget-block", inputs: { widget: "widget", widgetComponentMap: "widgetComponentMap", widgetParams: "widgetParams" }, viewQueries: [{ propertyName: "_widgetBlockContentRef", first: true, predicate: ["widgetBlockContent"], descendants: true }, { propertyName: "dynamicContainer", first: true, predicate: ["widgetComponent"], descendants: true, read: ViewContainerRef, static: 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<div class=\"widget-block\" [attr.data-carbon-theme]=\"theme$ | async\">\n  <div #widgetBlockContent class=\"widget-block__content\">\n    <ng-template #widgetComponent></ng-template>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    documentId: documentId$ | async,\n    widgetConfiguration: widget$ | async,\n    theme: theme$ | async,\n    blockHeightPx: blockHeightPx$ | async,\n    blockWidthPercentage: blockWidthPercentage$ | async,\n  } as obs\"\n></ng-container>\n", styles: [":host{display:block;position:absolute}.widget-block{width:100%;height:100%;box-sizing:border-box;padding:8px;overflow-wrap:break-word;background-color:var(--cds-layer-01);background-clip:content-box}.widget-block__not-available{padding:16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: LoadingModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TilesModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: WidgetBlockComponent, isStandalone: true, selector: "valtimo-widget-block", inputs: { widget: "widget", widgetComponentMap: "widgetComponentMap", widgetParams: "widgetParams" }, viewQueries: [{ propertyName: "_widgetBlockContentRef", first: true, predicate: ["widgetBlockContent"], descendants: true }, { propertyName: "dynamicContainer", first: true, predicate: ["widgetComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@let widgetColors = widgetColors$ | async;\n\n<div\n  class=\"widget-block\"\n  [attr.data-carbon-theme]=\"theme$ | async\"\n  [style.--widget-background-color]=\"widgetColors?.background\"\n  [style.--widget-layer-color]=\"widgetColors?.layer\"\n  [style.--widget-text-color]=\"widgetColors?.text\"\n  [style.--widget-accent-color]=\"widgetColors?.accent\"\n>\n  <div #widgetBlockContent class=\"widget-block__content\">\n    <ng-template #widgetComponent></ng-template>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    documentId: documentId$ | async,\n    widgetConfiguration: widget$ | async,\n    theme: theme$ | async,\n    blockHeightPx: blockHeightPx$ | async,\n    blockWidthPercentage: blockWidthPercentage$ | async,\n  } as obs\"\n></ng-container>\n", styles: [":host{display:block;position:absolute}.widget-block{width:100%;height:100%;box-sizing:border-box;padding:8px;overflow-wrap:break-word;background-color:var(--widget-background-color, var(--cds-layer-01));background-clip:content-box;color:var(--widget-text-color, var(--cds-text-primary))}.widget-block__not-available{padding:16px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: LoadingModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TilesModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-widget-block', standalone: true, imports: [CommonModule, LoadingModule, CarbonListModule, TranslateModule, TilesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"widget-block\" [attr.data-carbon-theme]=\"theme$ | async\">\n  <div #widgetBlockContent class=\"widget-block__content\">\n    <ng-template #widgetComponent></ng-template>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    documentId: documentId$ | async,\n    widgetConfiguration: widget$ | async,\n    theme: theme$ | async,\n    blockHeightPx: blockHeightPx$ | async,\n    blockWidthPercentage: blockWidthPercentage$ | async,\n  } as obs\"\n></ng-container>\n", styles: [":host{display:block;position:absolute}.widget-block{width:100%;height:100%;box-sizing:border-box;padding:8px;overflow-wrap:break-word;background-color:var(--cds-layer-01);background-clip:content-box}.widget-block__not-available{padding:16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'valtimo-widget-block', standalone: true, imports: [CommonModule, LoadingModule, CarbonListModule, TranslateModule, TilesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@let widgetColors = widgetColors$ | async;\n\n<div\n  class=\"widget-block\"\n  [attr.data-carbon-theme]=\"theme$ | async\"\n  [style.--widget-background-color]=\"widgetColors?.background\"\n  [style.--widget-layer-color]=\"widgetColors?.layer\"\n  [style.--widget-text-color]=\"widgetColors?.text\"\n  [style.--widget-accent-color]=\"widgetColors?.accent\"\n>\n  <div #widgetBlockContent class=\"widget-block__content\">\n    <ng-template #widgetComponent></ng-template>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    documentId: documentId$ | async,\n    widgetConfiguration: widget$ | async,\n    theme: theme$ | async,\n    blockHeightPx: blockHeightPx$ | async,\n    blockWidthPercentage: blockWidthPercentage$ | async,\n  } as obs\"\n></ng-container>\n", styles: [":host{display:block;position:absolute}.widget-block{width:100%;height:100%;box-sizing:border-box;padding:8px;overflow-wrap:break-word;background-color:var(--widget-background-color, var(--cds-layer-01));background-clip:content-box;color:var(--widget-text-color, var(--cds-text-primary))}.widget-block__not-available{padding:16px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: WidgetLayoutService }, { type: i2.ActivatedRoute }, { type: i1.CdsThemeService }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { _widgetBlockContentRef: [{
                 type: ViewChild,
                 args: ['widgetBlockContent']
@@ -2089,7 +2107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  */
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2430,7 +2448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2450,7 +2468,8 @@ class WidgetWizardService {
         this.$currentStep = signal(WidgetWizardStep.TYPE);
         this.$selectedWidget = signal(null);
         this.$widgetWidth = signal(null);
-        this.$widgetStyle = signal(null);
+        this.$widgetHighContrast = signal(false);
+        this.$widgetColor = signal(null);
         this.$widgetDensity = signal(null);
         this.$widgetContent = signal(null);
         this.$widgetDisplayConditions = signal(null);
@@ -2468,7 +2487,7 @@ class WidgetWizardService {
             WidgetWizardStep.TYPE,
             WidgetWizardStep.WIDTH,
             WidgetWizardStep.DENSITY,
-            WidgetWizardStep.STYLE,
+            WidgetWizardStep.APPEARANCE,
             WidgetWizardStep.CONTENT,
             WidgetWizardStep.FILTERS,
             WidgetWizardStep.DISPLAY_CONDITIONS,
@@ -2478,7 +2497,7 @@ class WidgetWizardService {
             [WidgetWizardStep.TYPE]: !!this.$selectedWidget()?.type,
             [WidgetWizardStep.WIDTH]: !!this.$widgetWidth(),
             [WidgetWizardStep.DENSITY]: this.$widgetDensity() !== null,
-            [WidgetWizardStep.STYLE]: !!this.$widgetStyle(),
+            [WidgetWizardStep.APPEARANCE]: !!this.$widgetColor(),
             [WidgetWizardStep.CONTENT]: !!this.$widgetContent() &&
                 this.$widgetContentValid() &&
                 (!!this.$widgetTitle() || this.$disableTitleInput()),
@@ -2495,6 +2514,13 @@ class WidgetWizardService {
                         : [WidgetType.COLLECTION, WidgetType.FIELDS, WidgetType.TABLE].includes(selectedType);
                 },
             },
+            [WidgetWizardStep.APPEARANCE]: {
+                dependingStep: WidgetWizardStep.TYPE,
+                condition: () => {
+                    const selectedType = this.$selectedWidget()?.type;
+                    return !!selectedType && [WidgetType.FIELDS, WidgetType.COLLECTION, WidgetType.TABLE].includes(selectedType);
+                },
+            },
             [WidgetWizardStep.FILTERS]: {
                 dependingStep: WidgetWizardStep.TYPE,
                 condition: () => this.$selectedWidget()?.type === WidgetType.INTERACTIVE_TABLE,
@@ -2521,7 +2547,8 @@ class WidgetWizardService {
             icon: this.$widgetIcon() ?? '',
             type: this.$selectedWidget()?.type ?? WidgetType.FIELDS,
             width: this.$widgetWidth() || this._defaultWidth || 4,
-            highContrast: (this.$widgetStyle() ?? WidgetStyle.DEFAULT) === WidgetStyle.HIGH_CONTRAST,
+            highContrast: this.$widgetHighContrast(),
+            color: this.$widgetColor() ?? WidgetColor.WHITE,
             isCompact: this.$widgetDensity() === WidgetDensity.COMPACT,
             properties: this.$widgetContent() ?? {},
             actions: this.$widgetActions() ?? [],
@@ -2539,7 +2566,8 @@ class WidgetWizardService {
             this.$currentStep.set(WidgetWizardStep.TYPE);
             this.$selectedWidget.set(null);
             this.$widgetWidth.set(this._defaultWidth || null);
-            this.$widgetStyle.set(null);
+            this.$widgetHighContrast.set(false);
+            this.$widgetColor.set(null);
             this.$widgetContent.set(null);
             this.$widgetTitle.set(null);
             this.$widgetIcon.set(null);
@@ -2558,7 +2586,7 @@ class WidgetWizardService {
             WidgetWizardStep.TYPE,
             WidgetWizardStep.WIDTH,
             WidgetWizardStep.DENSITY,
-            WidgetWizardStep.STYLE,
+            WidgetWizardStep.APPEARANCE,
             WidgetWizardStep.CONTENT,
             WidgetWizardStep.FILTERS,
             WidgetWizardStep.DISPLAY_CONDITIONS,
@@ -2744,7 +2772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$1.TranslateService }, { type: WidgetWizardService }, { type: i2.ActivatedRoute }] });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2758,21 +2786,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class WidgetWizardStyleStepComponent {
+class WidgetWizardAppearanceStepComponent {
     constructor(widgetWizardService) {
         this.widgetWizardService = widgetWizardService;
-        this.WidgetStyle = WidgetStyle;
-        this.$widgetStyle = this.widgetWizardService.$widgetStyle;
+        this.$widgetColor = this.widgetWizardService.$widgetColor;
+        this.colorTranslationKeyMap = {
+            [WidgetColor.HIGHCONTRAST]: 'highContrast',
+        };
+        this.colorTiles = WIDGET_COLOR_ITEMS.map(color => ({
+            color,
+            labelKey: `widgetTabManagement.appearance.backgroundColor.colors.${this.colorTranslationKeyMap[color] ?? color.toLowerCase()}`,
+            illustration: WIDGET_COLOR_ILLUSTRATION_MAP[color],
+        }));
     }
-    onSelectedEvent(event) {
-        this.widgetWizardService.$widgetStyle.set(event.value);
+    onColorSelected(event) {
+        if (!event?.value)
+            return;
+        this.widgetWizardService.$widgetColor.set(event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetWizardStyleStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: WidgetWizardStyleStepComponent, 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]=\"WidgetStyle.DEFAULT\"\n    [selected]=\"$widgetStyle() === WidgetStyle.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.style.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.style.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/style/default.svg\"\n      [alt]=\"'widgetTabManagement.style.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetStyle.HIGH_CONTRAST\"\n    [selected]=\"$widgetStyle() === WidgetStyle.HIGH_CONTRAST\"\n  >\n    <h3>{{ 'widgetTabManagement.style.highContrast.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.style.highContrast.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/style/high-contrast.svg\"\n      [alt]=\"'widgetTabManagement.style.highContrast.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetWizardAppearanceStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetWizardAppearanceStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onColorSelected($event)\"\n  class=\"valtimo-widget-wizard-step__content widget-appearance__color-grid\"\n>\n  @for (colorTile of colorTiles; track colorTile.color) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile widget-appearance__color-tile\"\n      [value]=\"colorTile.color\"\n      [selected]=\"colorTile.color === $widgetColor()\"\n    >\n      <h3 class=\"valtimo-widget-wizard-step__tile-title\">\n        {{ colorTile.labelKey | translate }}\n      </h3>\n\n      <img [src]=\"colorTile.illustration\" [alt]=\"colorTile.labelKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n", styles: [":host{display:block}.widget-appearance__color-grid fieldset{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.widget-appearance__color-tile .cds--tile-content{align-items:center;text-align:center}.widget-appearance__color-tile img{width:100%;max-width:200px;align-self:center}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "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.18", ngImport: i0, type: WidgetWizardStyleStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetWizardAppearanceStepComponent, 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]=\"WidgetStyle.DEFAULT\"\n    [selected]=\"$widgetStyle() === WidgetStyle.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.style.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.style.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/style/default.svg\"\n      [alt]=\"'widgetTabManagement.style.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetStyle.HIGH_CONTRAST\"\n    [selected]=\"$widgetStyle() === WidgetStyle.HIGH_CONTRAST\"\n  >\n    <h3>{{ 'widgetTabManagement.style.highContrast.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.style.highContrast.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/style/high-contrast.svg\"\n      [alt]=\"'widgetTabManagement.style.highContrast.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onColorSelected($event)\"\n  class=\"valtimo-widget-wizard-step__content widget-appearance__color-grid\"\n>\n  @for (colorTile of colorTiles; track colorTile.color) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile widget-appearance__color-tile\"\n      [value]=\"colorTile.color\"\n      [selected]=\"colorTile.color === $widgetColor()\"\n    >\n      <h3 class=\"valtimo-widget-wizard-step__tile-title\">\n        {{ colorTile.labelKey | translate }}\n      </h3>\n\n      <img [src]=\"colorTile.illustration\" [alt]=\"colorTile.labelKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n", styles: [":host{display:block}.widget-appearance__color-grid fieldset{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.widget-appearance__color-tile .cds--tile-content{align-items:center;text-align:center}.widget-appearance__color-tile img{width:100%;max-width:200px;align-self:center}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: WidgetWizardService }] });
 
 /*
@@ -3021,7 +3058,7 @@ class WidgetWizardFiltersStepComponent {
         return filteredItems;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetWizardFiltersStepComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: i3.IconService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetWizardFiltersStepComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n-->\n<form [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n  <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n    @for (filterRow of filters.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"filterTitle\"\n        [expanded]=\"expandedFilterIndex === $index\"\n        [context]=\"{\n          title: filterRow.get('title')?.value,\n          count: $count,\n          index: $index\n        }\"\n        (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n        class=\"valtimo-widget-wizard-filters__item\"\n      >\n        <form\n          [formGroup]=\"filterRow\"\n          class=\"valtimo-widget-wizard-filters__container\"\n          (click)=\"$event.stopImmediatePropagation()\"\n        >\n          <div class=\"valtimo-widget-wizard-filters__row\">\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.title' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"title\"\n                [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.key' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"key\"\n                [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n              formControlName=\"dataType\"\n            >\n              <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n              formControlName=\"fieldType\"\n            >\n              <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n    {{ 'widgetTabManagement.filters.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n  <div class=\"valtimo-widget-wizard-filters__title\">\n    <span>\n      {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n    </span>\n\n    <section class=\"valtimo-widget-wizard-filters__actions\">\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === 0\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === count - 1\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"danger\"\n        [iconOnly]=\"true\"\n        type=\"button\"\n        class=\"valtimo-widget-wizard-filters__delete-button\"\n        (click)=\"removeFilter($event, index)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </section>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:1fr 1fr 180px 180px;align-items:flex-end;gap:16px}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters .cds--text-input{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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: 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: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetWizardFiltersStepComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n-->\n<form [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n  <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n    @for (filterRow of filters.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"filterTitle\"\n        [expanded]=\"expandedFilterIndex === $index\"\n        [context]=\"{\n          title: filterRow.get('title')?.value,\n          count: $count,\n          index: $index,\n        }\"\n        (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n        class=\"valtimo-widget-wizard-filters__item\"\n      >\n        <form\n          [formGroup]=\"filterRow\"\n          class=\"valtimo-widget-wizard-filters__container\"\n          (click)=\"$event.stopImmediatePropagation()\"\n        >\n          <div class=\"valtimo-widget-wizard-filters__row\">\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.title' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"title\"\n                [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.key' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"key\"\n                [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n              formControlName=\"dataType\"\n            >\n              <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n              formControlName=\"fieldType\"\n            >\n              <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n    {{ 'widgetTabManagement.filters.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n  <div class=\"valtimo-widget-wizard-filters__title\">\n    <span>\n      {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n    </span>\n\n    <section class=\"valtimo-widget-wizard-filters__actions\">\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === 0\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === count - 1\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"danger\"\n        [iconOnly]=\"true\"\n        type=\"button\"\n        class=\"valtimo-widget-wizard-filters__delete-button\"\n        (click)=\"removeFilter($event, index)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </section>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:1fr 1fr 180px 180px;align-items:flex-end;gap:16px}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters .cds--text-input{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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: 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: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetWizardFiltersStepComponent, decorators: [{
             type: Component,
@@ -3036,14 +3073,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         IconModule,
                         InputLabelModule,
                         DropdownModule,
-                    ], 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 [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n  <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n    @for (filterRow of filters.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"filterTitle\"\n        [expanded]=\"expandedFilterIndex === $index\"\n        [context]=\"{\n          title: filterRow.get('title')?.value,\n          count: $count,\n          index: $index\n        }\"\n        (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n        class=\"valtimo-widget-wizard-filters__item\"\n      >\n        <form\n          [formGroup]=\"filterRow\"\n          class=\"valtimo-widget-wizard-filters__container\"\n          (click)=\"$event.stopImmediatePropagation()\"\n        >\n          <div class=\"valtimo-widget-wizard-filters__row\">\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.title' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"title\"\n                [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.key' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"key\"\n                [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n              formControlName=\"dataType\"\n            >\n              <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n              formControlName=\"fieldType\"\n            >\n              <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n    {{ 'widgetTabManagement.filters.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n  <div class=\"valtimo-widget-wizard-filters__title\">\n    <span>\n      {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n    </span>\n\n    <section class=\"valtimo-widget-wizard-filters__actions\">\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === 0\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === count - 1\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"danger\"\n        [iconOnly]=\"true\"\n        type=\"button\"\n        class=\"valtimo-widget-wizard-filters__delete-button\"\n        (click)=\"removeFilter($event, index)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </section>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:1fr 1fr 180px 180px;align-items:flex-end;gap:16px}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters .cds--text-input{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 [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n  <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n    @for (filterRow of filters.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"filterTitle\"\n        [expanded]=\"expandedFilterIndex === $index\"\n        [context]=\"{\n          title: filterRow.get('title')?.value,\n          count: $count,\n          index: $index,\n        }\"\n        (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n        class=\"valtimo-widget-wizard-filters__item\"\n      >\n        <form\n          [formGroup]=\"filterRow\"\n          class=\"valtimo-widget-wizard-filters__container\"\n          (click)=\"$event.stopImmediatePropagation()\"\n        >\n          <div class=\"valtimo-widget-wizard-filters__row\">\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.title' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"title\"\n                [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.key' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"key\"\n                [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n              formControlName=\"dataType\"\n            >\n              <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n              formControlName=\"fieldType\"\n            >\n              <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n    {{ 'widgetTabManagement.filters.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n  <div class=\"valtimo-widget-wizard-filters__title\">\n    <span>\n      {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n    </span>\n\n    <section class=\"valtimo-widget-wizard-filters__actions\">\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === 0\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === count - 1\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"danger\"\n        [iconOnly]=\"true\"\n        type=\"button\"\n        class=\"valtimo-widget-wizard-filters__delete-button\"\n        (click)=\"removeFilter($event, index)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </section>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:1fr 1fr 180px 180px;align-items:flex-end;gap:16px}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters .cds--text-input{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$3.FormBuilder }, { type: WidgetWizardService }, { type: i3.IconService }, { type: i2$1.TranslateService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3059,7 +3096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  */
 const WIDGET_STEPS = [
     WidgetWizardContentStepComponent,
-    WidgetWizardStyleStepComponent,
+    WidgetWizardAppearanceStepComponent,
     WidgetWizardDensityStepComponent,
     WidgetWizardTypeStepComponent,
     WidgetWizardWidthStepComponent,
@@ -3068,7 +3105,7 @@ const WIDGET_STEPS = [
 ];
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3111,15 +3148,15 @@ class WidgetManagementWizardComponent {
         this.secondaryLabels$ = combineLatest([
             toObservable(this.widgetWizardService.$selectedWidget),
             toObservable(this.widgetWizardService.$widgetWidth),
-            toObservable(this.widgetWizardService.$widgetStyle),
             toObservable(this.widgetWizardService.$widgetDensity),
-        ]).pipe(map(([selectedWidget, selectedWidth, selectedStyle, selectedDensity]) => {
+            toObservable(this.widgetWizardService.$widgetColor),
+        ]).pipe(map(([selectedWidget, selectedWidth, selectedDensity, selectedColor]) => {
             const type = selectedWidget?.type ?? '';
             return {
                 [WidgetWizardStep.TYPE]: type ? `widgetTabManagement.type.${type}.title` : '',
                 [WidgetWizardStep.WIDTH]: WIDGET_WIDTH_LABELS[selectedWidth ?? ''] ?? '',
-                [WidgetWizardStep.STYLE]: WIDGET_STYLE_LABELS[selectedStyle ?? ''] ?? '',
                 [WidgetWizardStep.DENSITY]: WIDGET_DENSITY_LABELS[selectedDensity ?? ''] ?? '',
+                [WidgetWizardStep.APPEARANCE]: selectedColor ? WIDGET_COLOR_LABELS[selectedColor] : '',
             };
         }));
         this.steps$ = combineLatest([
@@ -3247,7 +3284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3325,6 +3362,15 @@ class WidgetManagementEditorComponent {
                     },
                 ]
                 : []),
+            ...(this.widgetWizardService.$widgetWizardSteps().includes(WidgetWizardStep.APPEARANCE)
+                ? [
+                    {
+                        key: 'colorLabel',
+                        label: 'widgetTabManagement.columns.color',
+                        viewType: ViewType.TEXT,
+                    },
+                ]
+                : []),
             ...(!singleWidget
                 ? [
                     {
@@ -3368,6 +3414,7 @@ class WidgetManagementEditorComponent {
             ...item,
             widthTranslation: this.translateService.instant(this.getWidthTranslationKey(item.width)),
             densityTranslation: this.translateService.instant(`widgetTabManagement.density.${item.isCompact ? 'compact' : 'default'}.title`),
+            colorLabel: this.getWidgetColorLabel(item),
             tags: [
                 {
                     content: this.translateService.instant(`widgetTabManagement.type.${item.type}.title`),
@@ -3384,6 +3431,11 @@ class WidgetManagementEditorComponent {
         this.$isDividerModalOpen = signal(false);
         this.$dividerModalMode = signal('add');
         this.$dragAndDropDisabled = signal(false);
+        this._colorSupportedWidgetTypes = [
+            WidgetType.FIELDS,
+            WidgetType.COLLECTION,
+            WidgetType.TABLE,
+        ];
         this.iconService.registerAll([DragVertical16]);
     }
     ngOnDestroy() {
@@ -3398,7 +3450,8 @@ class WidgetManagementEditorComponent {
         }
         this.widgetWizardService.$widgetTitle.set(widget.title);
         this.widgetWizardService.$widgetIcon.set(widget.icon ?? null);
-        this.widgetWizardService.$widgetStyle.set(widget.highContrast ? WidgetStyle.HIGH_CONTRAST : WidgetStyle.DEFAULT);
+        this.widgetWizardService.$widgetHighContrast.set(!!widget.highContrast);
+        this.widgetWizardService.$widgetColor.set(widget.color ?? WidgetColor.WHITE);
         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);
@@ -3409,6 +3462,13 @@ class WidgetManagementEditorComponent {
         this.widgetWizardService.$widgetActions.set(widget.actions);
         this.$isWizardOpen.set(true);
     }
+    getWidgetColorLabel(widget) {
+        const color = this.widgetSupportsColor(widget.type) && widget.color ? widget.color : WidgetColor.WHITE;
+        return this.translateService.instant(WIDGET_COLOR_LABELS[color] ?? 'widgetTabManagement.appearance.backgroundColor.colors.white');
+    }
+    widgetSupportsColor(type) {
+        return this._colorSupportedWidgetTypes.includes(type);
+    }
     duplicateWidget(tabWidget) {
         const tabWidgetClone = cloneDeep(tabWidget);
         tabWidgetClone.key = '';
@@ -3740,7 +3800,7 @@ class WidgetMapComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetMapComponent, isStandalone: true, selector: "valtimo-widget-map", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { noVisibleMapEvent: "noVisibleMapEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetMapRef", first: true, predicate: ["widgetMap"], 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    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleMap: noVisibleMap$ | async,\n  } as obs\"\n>\n  <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-map__header\">\n    <h4 class=\"widget-map__title\">{{ obs?.widgetConfiguration?.title }}</h4>\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    class=\"widget-map__render\"\n    #widgetMap\n    [hidden]=\"obs?.isEmptyWidgetData || obs.widgetData === null\"\n  ></div>\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 if (obs.widgetData === null) {\n    <div class=\"widget-map__skeleton\">\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n  }\n</ng-container>\n", styles: [".widget-map{padding:24px;display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden;min-height:0;flex:1}.widget-map__header{display:flex;align-items:center;justify-content:space-between}.widget-map__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-map__render{display:flex;min-height:0;flex:1}.widget-map__render .ol-viewport{display:flex;min-height:296px;flex:1}.widget-map__skeleton{width:100%}.widget-map__skeleton cds-skeleton-placeholder{height:296px;width:100%}.widget-map__skeleton cds-skeleton-placeholder .cds--skeleton__placeholder{height:296px;width:100%}\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: 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: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetMapComponent, isStandalone: true, selector: "valtimo-widget-map", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { noVisibleMapEvent: "noVisibleMapEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetMapRef", first: true, predicate: ["widgetMap"], 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    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleMap: noVisibleMap$ | async,\n  } as obs\"\n>\n  <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-map__header\">\n    <h4 class=\"widget-map__title\">{{ obs?.widgetConfiguration?.title }}</h4>\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    class=\"widget-map__render\"\n    #widgetMap\n    [hidden]=\"obs?.isEmptyWidgetData || obs.widgetData === null\"\n  ></div>\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 if (obs.widgetData === null) {\n    <div class=\"widget-map__skeleton\">\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n  }\n</ng-container>\n", styles: [".widget-map{padding:24px;display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden;min-height:0;flex:1}.widget-map__header{display:flex;align-items:center;justify-content:space-between}.widget-map__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.widget-map__render{display:flex;min-height:0;flex:1}.widget-map__render .ol-viewport{display:flex;min-height:296px;flex:1}.widget-map__skeleton{width:100%}.widget-map__skeleton cds-skeleton-placeholder{height:296px;width:100%}.widget-map__skeleton cds-skeleton-placeholder .cds--skeleton__placeholder{height:296px;width:100%}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 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: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetMapComponent, decorators: [{
             type: Component,
@@ -3753,7 +3813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         ButtonModule,
                         WidgetActionButtonComponent,
                         SkeletonModule,
-                    ], 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    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleMap: noVisibleMap$ | async,\n  } as obs\"\n>\n  <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-map__header\">\n    <h4 class=\"widget-map__title\">{{ obs?.widgetConfiguration?.title }}</h4>\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    class=\"widget-map__render\"\n    #widgetMap\n    [hidden]=\"obs?.isEmptyWidgetData || obs.widgetData === null\"\n  ></div>\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 if (obs.widgetData === null) {\n    <div class=\"widget-map__skeleton\">\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n  }\n</ng-container>\n", styles: [".widget-map{padding:24px;display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden;min-height:0;flex:1}.widget-map__header{display:flex;align-items:center;justify-content:space-between}.widget-map__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-map__render{display:flex;min-height:0;flex:1}.widget-map__render .ol-viewport{display:flex;min-height:296px;flex:1}.widget-map__skeleton{width:100%}.widget-map__skeleton cds-skeleton-placeholder{height:296px;width:100%}.widget-map__skeleton cds-skeleton-placeholder .cds--skeleton__placeholder{height:296px;width:100%}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleMap: noVisibleMap$ | async,\n  } as obs\"\n>\n  <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-map__header\">\n    <h4 class=\"widget-map__title\">{{ obs?.widgetConfiguration?.title }}</h4>\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    class=\"widget-map__render\"\n    #widgetMap\n    [hidden]=\"obs?.isEmptyWidgetData || obs.widgetData === null\"\n  ></div>\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 if (obs.widgetData === null) {\n    <div class=\"widget-map__skeleton\">\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n  }\n</ng-container>\n", styles: [".widget-map{padding:24px;display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden;min-height:0;flex:1}.widget-map__header{display:flex;align-items:center;justify-content:space-between}.widget-map__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.widget-map__render{display:flex;min-height:0;flex:1}.widget-map__render .ol-viewport{display:flex;min-height:296px;flex:1}.widget-map__skeleton{width:100%}.widget-map__skeleton cds-skeleton-placeholder{height:296px;width:100%}.widget-map__skeleton cds-skeleton-placeholder .cds--skeleton__placeholder{height:296px;width:100%}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -3845,7 +3905,196 @@ const DEFAULT_WIDGET_COMPONENT_MAP = {
 const WIDGET_MANAGEMENT_SERVICE = new InjectionToken('WIDGET_MANAGEMENT_SERVICE');
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 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.
+ */
+const WIDGET_COLOR_ITEMS = [
+    WidgetColor.WHITE,
+    WidgetColor.HIGHCONTRAST,
+    WidgetColor.BLUE,
+    WidgetColor.PERIWINKLE,
+    WidgetColor.PURPLE,
+    WidgetColor.TURQOISE,
+    WidgetColor.GREEN,
+    WidgetColor.BROWN,
+    WidgetColor.RED,
+    WidgetColor.ORANGE,
+    WidgetColor.YELLOW,
+];
+const DEFAULT_WIDGET_COLOR_THEME = {
+    light: { text: null, accent: null, background: null, layer: null },
+    dark: { text: null, accent: null, background: null, layer: null },
+};
+const WIDGET_COLOR_THEME_MAP = {
+    [WidgetColor.WHITE]: DEFAULT_WIDGET_COLOR_THEME,
+    [WidgetColor.HIGHCONTRAST]: {
+        light: {
+            text: '#F4F4F4',
+            accent: '#393939',
+            background: '#161616',
+            layer: '#262626',
+        },
+        dark: {
+            text: '#161616',
+            accent: '#C6C6C6',
+            background: '#FFFFFF',
+            layer: '#F4F4F4',
+        },
+    },
+    [WidgetColor.BLUE]: {
+        light: {
+            text: '#314A5EFF',
+            accent: '#468CBEFF',
+            background: '#E2EDF5FF',
+            layer: '#F6FBFFFF',
+        },
+        dark: {
+            text: '#E2EDF5FF',
+            accent: '#468CBEFF',
+            background: '#314A5EFF',
+            layer: '#1A2D3CFF',
+        },
+    },
+    [WidgetColor.PERIWINKLE]: {
+        light: {
+            text: '#1A146AFF',
+            accent: '#4A42BEFF',
+            background: '#D5D3F0FF',
+            layer: '#EBEAFDFF',
+        },
+        dark: {
+            text: '#D5D3F0FF',
+            accent: '#4A42BEFF',
+            background: '#1A146AFF',
+            layer: '#0B0742FF',
+        },
+    },
+    [WidgetColor.PURPLE]: {
+        light: {
+            text: '#603361FF',
+            accent: '#B965BCFF',
+            background: '#F4E6F4FF',
+            layer: '#FBF5FBFF',
+        },
+        dark: {
+            text: '#F4E6F4FF',
+            accent: '#B965BCFF',
+            background: '#603361FF',
+            layer: '#3F203FFF',
+        },
+    },
+    [WidgetColor.TURQOISE]: {
+        light: {
+            text: '#297063FF',
+            accent: '#359C85FF',
+            background: '#ECF8F6FF',
+            layer: '#F8FFFEFF',
+        },
+        dark: {
+            text: '#ECF8F6FF',
+            accent: '#359C85FF',
+            background: '#297063FF',
+            layer: '#184A40FF',
+        },
+    },
+    [WidgetColor.GREEN]: {
+        light: {
+            text: '#245B25FF',
+            accent: '#3F9C40FF',
+            background: '#E8F3E8FF',
+            layer: '#F8FFF8FF',
+        },
+        dark: {
+            text: '#E8F3E8FF',
+            accent: '#3F9C40FF',
+            background: '#245B25FF',
+            layer: '#153C15FF',
+        },
+    },
+    [WidgetColor.BROWN]: {
+        light: {
+            text: '#6E5326FF',
+            accent: '#A07837FF',
+            background: '#ECE4D7FF',
+            layer: '#F6F2EBFF',
+        },
+        dark: {
+            text: '#ECE4D7FF',
+            accent: '#A07837FF',
+            background: '#6E5326FF',
+            layer: '#493617FF',
+        },
+    },
+    [WidgetColor.RED]: {
+        light: {
+            text: '#7C2C2DFF',
+            accent: '#D34F51FF',
+            background: '#F6DCDCFF',
+            layer: '#FFEBEBFF',
+        },
+        dark: {
+            text: '#F6DCDCFF',
+            accent: '#D34F51FF',
+            background: '#7C2C2DFF',
+            layer: '#561D1EFF',
+        },
+    },
+    [WidgetColor.ORANGE]: {
+        light: {
+            text: '#673D13FF',
+            accent: '#CC6300FF',
+            background: '#FFE5CCFF',
+            layer: '#FFF1E4FF',
+        },
+        dark: {
+            text: '#FFE5CCFF',
+            accent: '#CC6300FF',
+            background: '#673D13FF',
+            layer: '#41270CFF',
+        },
+    },
+    [WidgetColor.YELLOW]: {
+        light: {
+            text: '#6F5C29FF',
+            accent: '#FAD165FF',
+            background: '#FEF6E0FF',
+            layer: '#FFFBF1FF',
+        },
+        dark: {
+            text: '#FEF6E0FF',
+            accent: '#FAD165FF',
+            background: '#6F5C29FF',
+            layer: '#483B17FF',
+        },
+    },
+};
+const WIDGET_COLOR_ILLUSTRATION_MAP = {
+    [WidgetColor.YELLOW]: 'valtimo-layout/img/widget-management/color/yellow.svg',
+    [WidgetColor.ORANGE]: 'valtimo-layout/img/widget-management/color/orange.svg',
+    [WidgetColor.RED]: 'valtimo-layout/img/widget-management/color/red.svg',
+    [WidgetColor.BROWN]: 'valtimo-layout/img/widget-management/color/brown.svg',
+    [WidgetColor.GREEN]: 'valtimo-layout/img/widget-management/color/green.svg',
+    [WidgetColor.TURQOISE]: 'valtimo-layout/img/widget-management/color/turqoise.svg',
+    [WidgetColor.PURPLE]: 'valtimo-layout/img/widget-management/color/purple.svg',
+    [WidgetColor.PERIWINKLE]: 'valtimo-layout/img/widget-management/color/periwinkle.svg',
+    [WidgetColor.BLUE]: 'valtimo-layout/img/widget-management/color/blue.svg',
+    [WidgetColor.WHITE]: 'valtimo-layout/img/widget-management/color/default.svg',
+    [WidgetColor.HIGHCONTRAST]: 'valtimo-layout/img/widget-management/color/highContrast.svg',
+};
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5037,7 +5286,7 @@ var WidgetWizardStep;
     WidgetWizardStep["TYPE"] = "type";
     WidgetWizardStep["WIDTH"] = "width";
     WidgetWizardStep["DENSITY"] = "density";
-    WidgetWizardStep["STYLE"] = "style";
+    WidgetWizardStep["APPEARANCE"] = "appearance";
     WidgetWizardStep["CONTENT"] = "content";
     WidgetWizardStep["FILTERS"] = "filters";
     WidgetWizardStep["DISPLAY_CONDITIONS"] = "displayConditions";
@@ -5048,11 +5297,6 @@ var WidgetWizardCloseEventType;
     WidgetWizardCloseEventType["CREATE"] = "create";
     WidgetWizardCloseEventType["EDIT"] = "edit";
 })(WidgetWizardCloseEventType || (WidgetWizardCloseEventType = {}));
-var WidgetStyle;
-(function (WidgetStyle) {
-    WidgetStyle["DEFAULT"] = "default";
-    WidgetStyle["HIGH_CONTRAST"] = "high-contrast";
-})(WidgetStyle || (WidgetStyle = {}));
 var WidgetDensity;
 (function (WidgetDensity) {
     WidgetDensity["DEFAULT"] = "default";
@@ -5062,7 +5306,7 @@ const WIZARD_STEP_COMPONENTS = {
     [WidgetWizardStep.TYPE]: WidgetWizardTypeStepComponent,
     [WidgetWizardStep.WIDTH]: WidgetWizardWidthStepComponent,
     [WidgetWizardStep.DENSITY]: WidgetWizardDensityStepComponent,
-    [WidgetWizardStep.STYLE]: WidgetWizardStyleStepComponent,
+    [WidgetWizardStep.APPEARANCE]: WidgetWizardAppearanceStepComponent,
     [WidgetWizardStep.CONTENT]: WidgetWizardContentStepComponent,
     [WidgetWizardStep.FILTERS]: WidgetWizardFiltersStepComponent,
     [WidgetWizardStep.DISPLAY_CONDITIONS]: WidgetWizardDisplayConditionsStepComponent,
@@ -5124,9 +5368,18 @@ const WIDGET_WIDTH_LABELS = {
     3: 'widgetTabManagement.width.large.title',
     4: 'widgetTabManagement.width.xtraLarge.title',
 };
-const WIDGET_STYLE_LABELS = {
-    [WidgetStyle.DEFAULT]: 'widgetTabManagement.style.default.title',
-    [WidgetStyle.HIGH_CONTRAST]: 'widgetTabManagement.style.highContrast.title',
+const WIDGET_COLOR_LABELS = {
+    [WidgetColor.YELLOW]: 'widgetTabManagement.appearance.backgroundColor.colors.yellow',
+    [WidgetColor.ORANGE]: 'widgetTabManagement.appearance.backgroundColor.colors.orange',
+    [WidgetColor.RED]: 'widgetTabManagement.appearance.backgroundColor.colors.red',
+    [WidgetColor.BROWN]: 'widgetTabManagement.appearance.backgroundColor.colors.brown',
+    [WidgetColor.GREEN]: 'widgetTabManagement.appearance.backgroundColor.colors.green',
+    [WidgetColor.TURQOISE]: 'widgetTabManagement.appearance.backgroundColor.colors.turqoise',
+    [WidgetColor.PURPLE]: 'widgetTabManagement.appearance.backgroundColor.colors.purple',
+    [WidgetColor.PERIWINKLE]: 'widgetTabManagement.appearance.backgroundColor.colors.periwinkle',
+    [WidgetColor.BLUE]: 'widgetTabManagement.appearance.backgroundColor.colors.blue',
+    [WidgetColor.WHITE]: 'widgetTabManagement.appearance.backgroundColor.colors.white',
+    [WidgetColor.HIGHCONTRAST]: 'widgetTabManagement.appearance.backgroundColor.colors.white',
 };
 const WIDGET_DENSITY_LABELS = {
     [WidgetDensity.DEFAULT]: 'widgetTabManagement.density.default.title',
@@ -5492,5 +5745,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_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, WidgetInteractiveTableSearchComponent, 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_COLOR_ILLUSTRATION_MAP, WIDGET_COLOR_ITEMS, WIDGET_COLOR_LABELS, WIDGET_COLOR_THEME_MAP, WIDGET_DENSITY_LABELS, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetColor, WidgetContainerComponent, WidgetCustomComponent, WidgetDensity, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetInteractiveTableSearchComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
 //# sourceMappingURL=valtimo-layout.mjs.map