@valtimo/layout 13.5.0 → 13.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/assets/img/marker.svg +3 -0
  2. package/assets/img/widget-management/types/map.svg +63 -0
  3. package/fesm2022/valtimo-layout.mjs +639 -120
  4. package/fesm2022/valtimo-layout.mjs.map +1 -1
  5. package/lib/components/index.d.ts +2 -0
  6. package/lib/components/index.d.ts.map +1 -1
  7. package/lib/components/widget-action-button/widget-action-button.component.d.ts +14 -0
  8. package/lib/components/widget-action-button/widget-action-button.component.d.ts.map +1 -0
  9. package/lib/components/widget-collection/widget-collection.component.d.ts +1 -1
  10. package/lib/components/widget-collection/widget-collection.component.d.ts.map +1 -1
  11. package/lib/components/widget-custom/widget-custom.component.d.ts +4 -2
  12. package/lib/components/widget-custom/widget-custom.component.d.ts.map +1 -1
  13. package/lib/components/widget-field/widget-field.component.d.ts.map +1 -1
  14. package/lib/components/widget-formio/widget-formio.component.d.ts +5 -3
  15. package/lib/components/widget-formio/widget-formio.component.d.ts.map +1 -1
  16. package/lib/components/widget-interactive-table/widget-interactive-table.component.d.ts.map +1 -1
  17. package/lib/components/widget-management/management-action-button/widget-management-action-button.component.d.ts +30 -0
  18. package/lib/components/widget-management/management-action-button/widget-management-action-button.component.d.ts.map +1 -0
  19. package/lib/components/widget-management/management-content/collection/widget-management-collection.component.d.ts +1 -0
  20. package/lib/components/widget-management/management-content/collection/widget-management-collection.component.d.ts.map +1 -1
  21. package/lib/components/widget-management/management-content/custom/widget-management-custom.component.d.ts +3 -0
  22. package/lib/components/widget-management/management-content/custom/widget-management-custom.component.d.ts.map +1 -1
  23. package/lib/components/widget-management/management-content/fields/widget-management-fields.component.d.ts +1 -0
  24. package/lib/components/widget-management/management-content/fields/widget-management-fields.component.d.ts.map +1 -1
  25. package/lib/components/widget-management/management-content/formio/widget-management-widget-formio.component.d.ts +3 -0
  26. package/lib/components/widget-management/management-content/formio/widget-management-widget-formio.component.d.ts.map +1 -1
  27. package/lib/components/widget-management/management-content/index.d.ts +1 -0
  28. package/lib/components/widget-management/management-content/index.d.ts.map +1 -1
  29. package/lib/components/widget-management/management-content/interactive-table/widget-management-interactive-table.component.d.ts.map +1 -1
  30. package/lib/components/widget-management/management-content/map/widget-management-map.component.d.ts +33 -0
  31. package/lib/components/widget-management/management-content/map/widget-management-map.component.d.ts.map +1 -0
  32. package/lib/components/widget-management/management-content/table/widget-management-table.component.d.ts.map +1 -1
  33. package/lib/components/widget-management/management-divider-modal/widget-management-divider-modal.component.d.ts +0 -1
  34. package/lib/components/widget-management/management-divider-modal/widget-management-divider-modal.component.d.ts.map +1 -1
  35. package/lib/components/widget-management/management-editor/widget-management-editor.component.d.ts.map +1 -1
  36. package/lib/components/widget-management/management-process-selector/widget-management-process-selector.component.d.ts.map +1 -1
  37. package/lib/components/widget-management/management-wizard/steps/widget-wizard-content-step/widget-wizard-content-step.component.d.ts +2 -3
  38. package/lib/components/widget-management/management-wizard/steps/widget-wizard-content-step/widget-wizard-content-step.component.d.ts.map +1 -1
  39. package/lib/components/widget-management/management-wizard/widget-management-wizard.component.d.ts.map +1 -1
  40. package/lib/components/widget-map/index.d.ts +2 -0
  41. package/lib/components/widget-map/index.d.ts.map +1 -0
  42. package/lib/components/widget-map/widget-map.component.d.ts +27 -0
  43. package/lib/components/widget-map/widget-map.component.d.ts.map +1 -0
  44. package/lib/components/widget-table/widget-table.component.d.ts +1 -0
  45. package/lib/components/widget-table/widget-table.component.d.ts.map +1 -1
  46. package/lib/constants/widget.constants.d.ts.map +1 -1
  47. package/lib/models/widget-content.model.d.ts +6 -3
  48. package/lib/models/widget-content.model.d.ts.map +1 -1
  49. package/lib/models/widget-editor.model.d.ts.map +1 -1
  50. package/lib/models/widget-wizard.model.d.ts.map +1 -1
  51. package/lib/models/widget.model.d.ts +16 -4
  52. package/lib/models/widget.model.d.ts.map +1 -1
  53. package/lib/services/widget-wizard.service.d.ts +2 -1
  54. package/lib/services/widget-wizard.service.d.ts.map +1 -1
  55. package/package.json +3 -2
@@ -1,30 +1,38 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, InjectionToken, Component, ViewChild, ViewContainerRef, EventEmitter, signal, Output, Input, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, computed, effect, TemplateRef, NgModule } from '@angular/core';
3
- import * as i2$4 from '@angular/forms';
2
+ import { Injectable, InjectionToken, Component, ViewChild, ViewContainerRef, Input, EventEmitter, signal, Output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, computed, effect, TemplateRef, NgModule } from '@angular/core';
3
+ import * as i1$3 from '@angular/forms';
4
4
  import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
5
5
  import * as i4 from '@angular/common';
6
6
  import { CommonModule, DOCUMENT } from '@angular/common';
7
- import * as i2$2 from '@ngx-translate/core';
7
+ import * as i2$1 from '@ngx-translate/core';
8
8
  import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
9
9
  import * as i1 from '@valtimo/components';
10
- import { ViewType, CarbonListModule, EllipsisPipe, FormIoModule, CARBON_THEME, CurrentCarbonTheme, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, ConfirmationModalModule, JsonEditorComponent, InputLabelModule, ValuePathSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
10
+ import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, FormIoModule, CARBON_THEME, CurrentCarbonTheme, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, ConfirmationModalModule, JsonEditorComponent, InputLabelModule, ValuePathSelectorComponent, MdiIconSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
11
11
  import * as i3 from 'carbon-components-angular';
12
- import { InputModule, ButtonModule, PaginationModel, PaginationModule, TilesModule, DialogModule, MenuButtonModule, ContextMenuModule, IconModule, LoadingModule, ModalModule, TooltipModule, LayerModule, ComboBoxModule, DropdownModule, StructuredListModule, ToggleModule, ProgressIndicatorModule, TabsModule, AccordionModule, CheckboxModule, Tab, SelectModule, PlaceholderModule } from 'carbon-components-angular';
12
+ import { ButtonModule, InputModule, LayerModule, PaginationModel, PaginationModule, TilesModule, DialogModule, MenuButtonModule, ContextMenuModule, IconModule, LoadingModule, ModalModule, TooltipModule, ComboBoxModule, DropdownModule, StructuredListModule, ToggleModule, ProgressIndicatorModule, TabsModule, AccordionModule, CheckboxModule, Tab, SelectModule, PlaceholderModule } from 'carbon-components-angular';
13
13
  import { Subscription, BehaviorSubject, combineLatest, map, tap, switchMap, take, filter as filter$1, Subject, debounceTime, of, startWith, merge, delay } from 'rxjs';
14
14
  import { Link16, Edit16, DragVertical16, TrashCan16 } from '@carbon/icons';
15
15
  import * as i2 from '@angular/router';
16
16
  import { NavigationEnd, RouterModule } from '@angular/router';
17
17
  import { filter } from 'rxjs/operators';
18
- import * as i2$1 from '@valtimo/shared';
18
+ import * as i1$1 from '@valtimo/shared';
19
19
  import { getCaseManagementRouteParams, Operator, GlobalNotificationComponent, ROLE_ADMIN } from '@valtimo/shared';
20
20
  import { isEqual, cloneDeep } from 'lodash';
21
21
  import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
22
- import * as i1$1 from '@valtimo/form';
23
- import * as i2$3 from '@valtimo/document';
22
+ import * as i1$2 from '@valtimo/form';
23
+ import * as i2$2 from '@valtimo/document';
24
24
  import * as i3$1 from '@valtimo/access-control';
25
25
  import Muuri from 'muuri';
26
26
  import { v4 } from 'uuid';
27
27
  import * as i7 from 'carbon-components-angular/dropdown';
28
+ import TileLayer from 'ol/layer/Tile';
29
+ import { OSM } from 'ol/source';
30
+ import { GeoJSON } from 'ol/format';
31
+ import { Map, View } from 'ol';
32
+ import VectorLayer from 'ol/layer/Vector';
33
+ import VectorSource from 'ol/source/Vector';
34
+ import { FullScreen, Zoom, defaults } from 'ol/control';
35
+ import { Style, Stroke, Fill, Icon } from 'ol/style';
28
36
  import { AuthGuardService } from '@valtimo/security';
29
37
 
30
38
  /*
@@ -115,6 +123,7 @@ var WidgetType;
115
123
  WidgetType["COLLECTION"] = "collection";
116
124
  WidgetType["FORMIO"] = "formio";
117
125
  WidgetType["DIVIDER"] = "divider";
126
+ WidgetType["MAP"] = "map";
118
127
  })(WidgetType || (WidgetType = {}));
119
128
 
120
129
  /*
@@ -143,7 +152,8 @@ const WidgetTypeTags = {
143
152
  [WidgetType.FIELDS]: 'blue',
144
153
  [WidgetType.FORMIO]: 'green',
145
154
  [WidgetType.TABLE]: 'purple',
146
- [WidgetType.INTERACTIVE_TABLE]: 'magenta',
155
+ [WidgetType.INTERACTIVE_TABLE]: 'red',
156
+ [WidgetType.MAP]: 'cyan',
147
157
  };
148
158
 
149
159
  /*
@@ -280,7 +290,7 @@ class LayoutComponent {
280
290
  }));
281
291
  }
282
292
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutComponent, deps: [{ token: i3.PlaceholderService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
283
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LayoutComponent, isStandalone: false, selector: "valtimo-layout", viewQueries: [{ propertyName: "_carbonPlaceHolder", first: true, predicate: ["carbonPlaceHolder"], 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 #carbonPlaceHolder class=\"carbon-placeholder\"></div>\n\n<valtimo-global-notification></valtimo-global-notification>\n<valtimo-layout-public *ngIf=\"layoutType === 'public'\"></valtimo-layout-public>\n<valtimo-layout-internal *ngIf=\"layoutType === 'internal'\"></valtimo-layout-internal>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.GlobalNotificationComponent, selector: "valtimo-global-notification" }, { kind: "component", type: LayoutPublicComponent, selector: "valtimo-layout-public" }, { kind: "component", type: LayoutInternalComponent, selector: "valtimo-layout-internal" }] }); }
293
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LayoutComponent, isStandalone: false, selector: "valtimo-layout", viewQueries: [{ propertyName: "_carbonPlaceHolder", first: true, predicate: ["carbonPlaceHolder"], 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 #carbonPlaceHolder class=\"carbon-placeholder\"></div>\n\n<valtimo-global-notification></valtimo-global-notification>\n<valtimo-layout-public *ngIf=\"layoutType === 'public'\"></valtimo-layout-public>\n<valtimo-layout-internal *ngIf=\"layoutType === 'internal'\"></valtimo-layout-internal>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.GlobalNotificationComponent, selector: "valtimo-global-notification" }, { kind: "component", type: LayoutPublicComponent, selector: "valtimo-layout-public" }, { kind: "component", type: LayoutInternalComponent, selector: "valtimo-layout-internal" }] }); }
284
294
  }
285
295
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutComponent, decorators: [{
286
296
  type: Component,
@@ -338,6 +348,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
338
348
  * limitations under the License.
339
349
  */
340
350
 
351
+ /*
352
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
353
+ *
354
+ * Licensed under EUPL, Version 1.2 (the "License");
355
+ * you may not use this file except in compliance with the License.
356
+ * You may obtain a copy of the License at
357
+ *
358
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
359
+ *
360
+ * Unless required by applicable law or agreed to in writing, software
361
+ * distributed under the License is distributed on an "AS IS" basis,
362
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
363
+ * See the License for the specific language governing permissions and
364
+ * limitations under the License.
365
+ */
366
+ class WidgetActionButtonComponent {
367
+ constructor(globalNotificationService) {
368
+ this.globalNotificationService = globalNotificationService;
369
+ }
370
+ onNavigateButtonClick(buttonAction) {
371
+ const navigateTo = this.resolveProperty(buttonAction?.navigateTo, this.resolvedData);
372
+ if (navigateTo?.startsWith(window.location.origin) || navigateTo?.startsWith('/')) {
373
+ window.open(navigateTo, '_self');
374
+ }
375
+ else if (navigateTo?.startsWith('http')) {
376
+ window.open(navigateTo, '_blank');
377
+ }
378
+ else {
379
+ this.globalNotificationService.showToast({
380
+ title: 'An unexpected error occurred',
381
+ caption: `Unable to navigate to ${navigateTo}`,
382
+ type: 'error',
383
+ });
384
+ }
385
+ }
386
+ resolveProperty(property, data) {
387
+ const resolved = data?.resolved || data;
388
+ return property ? (resolved ? String(resolved[property]) : property) : null;
389
+ }
390
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetActionButtonComponent, deps: [{ token: i1$1.GlobalNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
391
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetActionButtonComponent, isStandalone: true, selector: "valtimo-widget-action-button", inputs: { widgetConfiguration: "widgetConfiguration", resolvedData: "resolvedData" }, 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@if (!!widgetConfiguration.actions[0] && !!widgetConfiguration.actions[0].navigateTo) {\n <button class=\"action-button\" cdsButton=\"ghost\" (click)=\"onNavigateButtonClick(widgetConfiguration.actions[0])\">\n {{ widgetConfiguration.actions[0].name }}\n </button>\n}\n", styles: [":host:empty{display:none}.action-button{--cds-layout-size-height-local: 0;--cds-layout-density-padding-inline-local: 0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }] }); }
392
+ }
393
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetActionButtonComponent, decorators: [{
394
+ type: Component,
395
+ args: [{ selector: 'valtimo-widget-action-button', standalone: true, imports: [CommonModule, ButtonModule], 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@if (!!widgetConfiguration.actions[0] && !!widgetConfiguration.actions[0].navigateTo) {\n <button class=\"action-button\" cdsButton=\"ghost\" (click)=\"onNavigateButtonClick(widgetConfiguration.actions[0])\">\n {{ widgetConfiguration.actions[0].name }}\n </button>\n}\n", styles: [":host:empty{display:none}.action-button{--cds-layout-size-height-local: 0;--cds-layout-density-padding-inline-local: 0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
396
+ }], ctorParameters: () => [{ type: i1$1.GlobalNotificationService }], propDecorators: { widgetConfiguration: [{
397
+ type: Input
398
+ }], resolvedData: [{
399
+ type: Input
400
+ }] } });
401
+
341
402
  /*
342
403
  * Copyright 2015-2025 Ritense BV, the Netherlands.
343
404
  *
@@ -442,7 +503,7 @@ class WidgetFieldComponent {
442
503
  });
443
504
  }
444
505
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldComponent, deps: [{ token: i1.ViewContentService }], target: i0.ɵɵFactoryTarget.Component }); }
445
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", compact: "compact" }, outputs: { noVisibleFieldsEvent: "noVisibleFieldsEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n widgetPropertyValue: widgetPropertyValue$ | async,\n widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-field__header\">\n <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n <ng-content></ng-content>\n </section>\n\n @if (obs?.isEmptyWidgetData) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n <div\n #widgetField\n [ngClass]=\"{\n 'widget-field__render-vertically': renderVertically() === 1,\n 'widget-field__render-two-columns': renderVertically() === 2,\n 'widget-field__render-three-columns': renderVertically() === 3,\n 'widget-field__container': renderVertically() === 4,\n }\"\n >\n @if (obs.noVisibleFields) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.emptyFields' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n @for (column of obs?.widgetPropertyValue; track column.key) {\n <div class=\"widget-field__column\" [ngClass]=\"{'widget-field__column--compact': compact}\">\n @for (property of column; track property) {\n <div\n *ngIf=\"\n (property?.value !== null &&\n property?.value !== '-' &&\n property?.hideWhenEmpty) ||\n !property?.hideWhenEmpty\n \"\n class=\"widget-field__field\"\n [ngClass]=\"{'widget-field__field--compact': compact}\"\n >\n <label\n class=\"widget-field__field-label\"\n [ngClass]=\"{'widget-field__field-label--compact': compact}\"\n [attr.title]=\"property?.title\"\n >\n {{ property?.title }}</label\n >\n\n <div\n [attr.title]=\"property?.value\"\n class=\"widget-field__field-value\"\n [ngClass]=\"{'widget-field__field-value--compact': compact}\"\n >\n @if (property?.isRawValue) {\n <div [innerHTML]=\"property?.value\"></div>\n } @else {\n {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field--compact,.widget-field__column--compact{gap:0;border-left:1px solid var(--cds-border-subtle-01);padding-left:16px}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field--compact{flex-direction:row;justify-content:space-between}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-label--compact{margin:auto 0!important;display:flex;height:min-content}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field__field-value--compact{padding:0;border:none}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
506
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", compact: "compact" }, outputs: { noVisibleFieldsEvent: "noVisibleFieldsEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n widgetPropertyValue: widgetPropertyValue$ | async,\n widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-field__header\">\n <div class=\"widget-field__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs?.isEmptyWidgetData) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n <div\n #widgetField\n [ngClass]=\"{\n 'widget-field__render-vertically': renderVertically() === 1,\n 'widget-field__render-two-columns': renderVertically() === 2,\n 'widget-field__render-three-columns': renderVertically() === 3,\n 'widget-field__container': renderVertically() === 4,\n }\"\n >\n @if (obs.noVisibleFields) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.emptyFields' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n @for (column of obs?.widgetPropertyValue; track column.key) {\n <div class=\"widget-field__column\" [ngClass]=\"{'widget-field__column--compact': compact}\">\n @for (property of column; track property) {\n <div\n *ngIf=\"\n (property?.value !== null &&\n property?.value !== '-' &&\n property?.hideWhenEmpty) ||\n !property?.hideWhenEmpty\n \"\n class=\"widget-field__field\"\n [ngClass]=\"{'widget-field__field--compact': compact}\"\n >\n <label\n class=\"widget-field__field-label\"\n [ngClass]=\"{'widget-field__field-label--compact': compact}\"\n [attr.title]=\"property?.title\"\n >\n {{ property?.title }}</label\n >\n\n <div\n [attr.title]=\"property?.value\"\n class=\"widget-field__field-value\"\n [ngClass]=\"{'widget-field__field-value--compact': compact}\"\n >\n @if (property?.isRawValue) {\n <div [innerHTML]=\"property?.value\"></div>\n } @else {\n {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field--compact,.widget-field__column--compact{gap:0;border-left:1px solid var(--cds-border-subtle-01);padding-left:16px}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__title-container{display:flex;align-items:center;gap:8px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field--compact{flex-direction:row;justify-content:space-between}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-label--compact{margin:auto 0!important;display:flex;height:min-content}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field__field-value--compact{padding:0;border:none}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: EllipsisPipe, name: "valtimoEllipsis" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
446
507
  }
447
508
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldComponent, decorators: [{
448
509
  type: Component,
@@ -453,7 +514,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
453
514
  CarbonListModule,
454
515
  EllipsisPipe,
455
516
  ButtonModule,
456
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n widgetPropertyValue: widgetPropertyValue$ | async,\n widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-field__header\">\n <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n <ng-content></ng-content>\n </section>\n\n @if (obs?.isEmptyWidgetData) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n <div\n #widgetField\n [ngClass]=\"{\n 'widget-field__render-vertically': renderVertically() === 1,\n 'widget-field__render-two-columns': renderVertically() === 2,\n 'widget-field__render-three-columns': renderVertically() === 3,\n 'widget-field__container': renderVertically() === 4,\n }\"\n >\n @if (obs.noVisibleFields) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.emptyFields' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n @for (column of obs?.widgetPropertyValue; track column.key) {\n <div class=\"widget-field__column\" [ngClass]=\"{'widget-field__column--compact': compact}\">\n @for (property of column; track property) {\n <div\n *ngIf=\"\n (property?.value !== null &&\n property?.value !== '-' &&\n property?.hideWhenEmpty) ||\n !property?.hideWhenEmpty\n \"\n class=\"widget-field__field\"\n [ngClass]=\"{'widget-field__field--compact': compact}\"\n >\n <label\n class=\"widget-field__field-label\"\n [ngClass]=\"{'widget-field__field-label--compact': compact}\"\n [attr.title]=\"property?.title\"\n >\n {{ property?.title }}</label\n >\n\n <div\n [attr.title]=\"property?.value\"\n class=\"widget-field__field-value\"\n [ngClass]=\"{'widget-field__field-value--compact': compact}\"\n >\n @if (property?.isRawValue) {\n <div [innerHTML]=\"property?.value\"></div>\n } @else {\n {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field--compact,.widget-field__column--compact{gap:0;border-left:1px solid var(--cds-border-subtle-01);padding-left:16px}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field--compact{flex-direction:row;justify-content:space-between}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-label--compact{margin:auto 0!important;display:flex;height:min-content}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field__field-value--compact{padding:0;border:none}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
517
+ WidgetActionButtonComponent,
518
+ MdiIconViewerComponent,
519
+ LayerModule,
520
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n widgetPropertyValue: widgetPropertyValue$ | async,\n widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-field__header\">\n <div class=\"widget-field__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs?.isEmptyWidgetData) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n <div\n #widgetField\n [ngClass]=\"{\n 'widget-field__render-vertically': renderVertically() === 1,\n 'widget-field__render-two-columns': renderVertically() === 2,\n 'widget-field__render-three-columns': renderVertically() === 3,\n 'widget-field__container': renderVertically() === 4,\n }\"\n >\n @if (obs.noVisibleFields) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.emptyFields' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n @for (column of obs?.widgetPropertyValue; track column.key) {\n <div class=\"widget-field__column\" [ngClass]=\"{'widget-field__column--compact': compact}\">\n @for (property of column; track property) {\n <div\n *ngIf=\"\n (property?.value !== null &&\n property?.value !== '-' &&\n property?.hideWhenEmpty) ||\n !property?.hideWhenEmpty\n \"\n class=\"widget-field__field\"\n [ngClass]=\"{'widget-field__field--compact': compact}\"\n >\n <label\n class=\"widget-field__field-label\"\n [ngClass]=\"{'widget-field__field-label--compact': compact}\"\n [attr.title]=\"property?.title\"\n >\n {{ property?.title }}</label\n >\n\n <div\n [attr.title]=\"property?.value\"\n class=\"widget-field__field-value\"\n [ngClass]=\"{'widget-field__field-value--compact': compact}\"\n >\n @if (property?.isRawValue) {\n <div [innerHTML]=\"property?.value\"></div>\n } @else {\n {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field--compact,.widget-field__column--compact{gap:0;border-left:1px solid var(--cds-border-subtle-01);padding-left:16px}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__title-container{display:flex;align-items:center;gap:8px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field--compact{flex-direction:row;justify-content:space-between}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-label--compact{margin:auto 0!important;display:flex;height:min-content}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field__field-value--compact{padding:0;border:none}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
457
521
  }], ctorParameters: () => [{ type: i1.ViewContentService }], propDecorators: { class: [{
458
522
  type: HostBinding,
459
523
  args: ['class']
@@ -650,13 +714,13 @@ class TranslationManagementComponent {
650
714
  return emptyArbitraryValue;
651
715
  });
652
716
  }
653
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementComponent, deps: [{ token: i2$2.TranslateService }, { token: i2$1.LocalizationService }, { token: i1.PageHeaderService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
654
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TranslationManagementComponent, isStandalone: false, selector: "valtimo-translation-management", 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 localizationTranslationValues: localizationTranslationValues$ | async,\n loading: loading$ | async,\n disabled: disabled$ | async,\n multiInputTitles: multiInputTiles$ | async,\n amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n showConfirmationModal: showConfirmationModal$,\n allChangedValuesValid: allChangedValuesValid$ | async,\n valuesChanged: valuesChanged$ | async,\n compactMode: compactMode$ | async,\n } as obs\"\n>\n <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n <valtimo-carbon-multi-input\n [disabled]=\"obs.disabled\"\n [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n [fullWidth]=\"true\"\n [minimumAmountOfRows]=\"0\"\n type=\"arbitraryAmount\"\n [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n [defaultValues]=\"obs.localizationTranslationValues\"\n (allValuesValidEvent)=\"validChange($event)\"\n (valueChange)=\"valueChange($event)\"\n addRowTranslationKey=\"translationManagement.add\"\n ></valtimo-carbon-multi-input>\n </ng-container>\n\n <ng-template #loading>\n <div class=\"loading-container\"><cds-loading></cds-loading></div>\n </ng-template>\n\n <valtimo-confirmation-modal\n [showModalSubject$]=\"obs.showConfirmationModal\"\n (confirmEvent)=\"saveAndRefresh()\"\n (optionalEvent)=\"saveAndStay()\"\n (cancelEvent)=\"cancel()\"\n [showOptionalButton]=\"true\"\n cancelButtonType=\"ghost\"\n optionalButtonType=\"secondary\"\n confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n titleTranslationKey=\"translationManagement.modalTitle\"\n contentTranslationKey=\"translationManagement.modalContent\"\n [spacerAfterCancelButton]=\"true\"\n ></valtimo-confirmation-modal>\n\n <ng-container renderInPageHeader>\n <ng-template>\n <button\n cdsButton=\"primary\"\n [size]=\"obs.compactMode ? 'sm' : 'md'\"\n (click)=\"showModal()\"\n [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n >\n {{ 'interface.save' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n </button>\n </ng-template>\n </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] }); }
717
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementComponent, deps: [{ token: i2$1.TranslateService }, { token: i1$1.LocalizationService }, { token: i1.PageHeaderService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
718
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TranslationManagementComponent, isStandalone: false, selector: "valtimo-translation-management", 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 localizationTranslationValues: localizationTranslationValues$ | async,\n loading: loading$ | async,\n disabled: disabled$ | async,\n multiInputTitles: multiInputTiles$ | async,\n amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n showConfirmationModal: showConfirmationModal$,\n allChangedValuesValid: allChangedValuesValid$ | async,\n valuesChanged: valuesChanged$ | async,\n compactMode: compactMode$ | async,\n } as obs\"\n>\n <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n <valtimo-carbon-multi-input\n [disabled]=\"obs.disabled\"\n [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n [fullWidth]=\"true\"\n [minimumAmountOfRows]=\"0\"\n type=\"arbitraryAmount\"\n [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n [defaultValues]=\"obs.localizationTranslationValues\"\n (allValuesValidEvent)=\"validChange($event)\"\n (valueChange)=\"valueChange($event)\"\n addRowTranslationKey=\"translationManagement.add\"\n ></valtimo-carbon-multi-input>\n </ng-container>\n\n <ng-template #loading>\n <div class=\"loading-container\"><cds-loading></cds-loading></div>\n </ng-template>\n\n <valtimo-confirmation-modal\n [showModalSubject$]=\"obs.showConfirmationModal\"\n (confirmEvent)=\"saveAndRefresh()\"\n (optionalEvent)=\"saveAndStay()\"\n (cancelEvent)=\"cancel()\"\n [showOptionalButton]=\"true\"\n cancelButtonType=\"ghost\"\n optionalButtonType=\"secondary\"\n confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n titleTranslationKey=\"translationManagement.modalTitle\"\n contentTranslationKey=\"translationManagement.modalContent\"\n [spacerAfterCancelButton]=\"true\"\n ></valtimo-confirmation-modal>\n\n <ng-container renderInPageHeader>\n <ng-template>\n <button\n cdsButton=\"primary\"\n [size]=\"obs.compactMode ? 'sm' : 'md'\"\n (click)=\"showModal()\"\n [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n >\n {{ 'interface.save' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n </button>\n </ng-template>\n </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
655
719
  }
656
720
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementComponent, decorators: [{
657
721
  type: Component,
658
722
  args: [{ selector: 'valtimo-translation-management', standalone: false, 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 localizationTranslationValues: localizationTranslationValues$ | async,\n loading: loading$ | async,\n disabled: disabled$ | async,\n multiInputTitles: multiInputTiles$ | async,\n amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n showConfirmationModal: showConfirmationModal$,\n allChangedValuesValid: allChangedValuesValid$ | async,\n valuesChanged: valuesChanged$ | async,\n compactMode: compactMode$ | async,\n } as obs\"\n>\n <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n <valtimo-carbon-multi-input\n [disabled]=\"obs.disabled\"\n [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n [fullWidth]=\"true\"\n [minimumAmountOfRows]=\"0\"\n type=\"arbitraryAmount\"\n [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n [defaultValues]=\"obs.localizationTranslationValues\"\n (allValuesValidEvent)=\"validChange($event)\"\n (valueChange)=\"valueChange($event)\"\n addRowTranslationKey=\"translationManagement.add\"\n ></valtimo-carbon-multi-input>\n </ng-container>\n\n <ng-template #loading>\n <div class=\"loading-container\"><cds-loading></cds-loading></div>\n </ng-template>\n\n <valtimo-confirmation-modal\n [showModalSubject$]=\"obs.showConfirmationModal\"\n (confirmEvent)=\"saveAndRefresh()\"\n (optionalEvent)=\"saveAndStay()\"\n (cancelEvent)=\"cancel()\"\n [showOptionalButton]=\"true\"\n cancelButtonType=\"ghost\"\n optionalButtonType=\"secondary\"\n confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n titleTranslationKey=\"translationManagement.modalTitle\"\n contentTranslationKey=\"translationManagement.modalContent\"\n [spacerAfterCancelButton]=\"true\"\n ></valtimo-confirmation-modal>\n\n <ng-container renderInPageHeader>\n <ng-template>\n <button\n cdsButton=\"primary\"\n [size]=\"obs.compactMode ? 'sm' : 'md'\"\n (click)=\"showModal()\"\n [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n >\n {{ 'interface.save' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n </button>\n </ng-template>\n </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\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"] }]
659
- }], ctorParameters: () => [{ type: i2$2.TranslateService }, { type: i2$1.LocalizationService }, { type: i1.PageHeaderService }, { type: Document, decorators: [{
723
+ }], ctorParameters: () => [{ type: i2$1.TranslateService }, { type: i1$1.LocalizationService }, { type: i1.PageHeaderService }, { type: Document, decorators: [{
660
724
  type: Inject,
661
725
  args: [DOCUMENT]
662
726
  }] }] });
@@ -809,6 +873,11 @@ class WidgetFormioComponent {
809
873
  return;
810
874
  this._widgetConfigurationSubject$.next(value);
811
875
  }
876
+ set widgetData(value) {
877
+ if (!value)
878
+ return;
879
+ this.widgetData$.next(value);
880
+ }
812
881
  set widgetUuid(value) {
813
882
  this._widgetUuid = value;
814
883
  this._hasSignalledExternalDataReady = false;
@@ -838,6 +907,7 @@ class WidgetFormioComponent {
838
907
  this.widgetLayoutService = widgetLayoutService;
839
908
  this.destroyRef = destroyRef;
840
909
  this._refreshTrigger$ = new BehaviorSubject(undefined);
910
+ this.widgetData$ = new BehaviorSubject(null);
841
911
  this._refreshEmitter = null;
842
912
  this._refreshSubscription = null;
843
913
  this._widgetUuid = null;
@@ -860,16 +930,25 @@ class WidgetFormioComponent {
860
930
  }
861
931
  }), map(([formDef]) => formDef));
862
932
  }
863
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFormioComponent, deps: [{ token: i1$1.FormService }, { token: WidgetLayoutService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
864
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", 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 } as obs\"\n>\n <section class=\"formio-widget__header\">\n <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n\n <ng-content></ng-content>\n </section>\n\n <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}.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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
933
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFormioComponent, deps: [{ token: i1$2.FormService }, { token: WidgetLayoutService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
934
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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 }); }
865
935
  }
866
936
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFormioComponent, decorators: [{
867
937
  type: Component,
868
- args: [{ selector: 'valtimo-widget-formio', standalone: true, imports: [CommonModule, TranslateModule, FormIoModule, ButtonModule], 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 } as obs\"\n>\n <section class=\"formio-widget__header\">\n <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration?.title || '-' }}</h4>\n\n <ng-content></ng-content>\n </section>\n\n <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}.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"] }]
869
- }], ctorParameters: () => [{ type: i1$1.FormService }, { type: WidgetLayoutService }, { type: i0.DestroyRef }], propDecorators: { documentId: [{
938
+ args: [{ selector: 'valtimo-widget-formio', standalone: true, imports: [
939
+ CommonModule,
940
+ TranslateModule,
941
+ FormIoModule,
942
+ ButtonModule,
943
+ WidgetActionButtonComponent,
944
+ MdiIconViewerComponent,
945
+ ], 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"] }]
946
+ }], ctorParameters: () => [{ type: i1$2.FormService }, { type: WidgetLayoutService }, { type: i0.DestroyRef }], propDecorators: { documentId: [{
870
947
  type: Input
871
948
  }], widgetConfiguration: [{
872
949
  type: Input
950
+ }], widgetData: [{
951
+ type: Input
873
952
  }], widgetUuid: [{
874
953
  type: Input
875
954
  }], refreshForm: [{
@@ -960,12 +1039,12 @@ class WidgetCollectionComponent {
960
1039
  this._paginationInitialized = false;
961
1040
  this.paginationEvent = new EventEmitter();
962
1041
  this.noVisibleFields$ = new BehaviorSubject(true);
963
- this.widgetTitle = signal('-');
1042
+ this.$widgetTitle = signal('-');
964
1043
  this.widgetConfiguration$ = new BehaviorSubject(null);
965
1044
  this.paginationModel = signal(new PaginationModel());
966
1045
  this.amountOfColumns = signal(0);
967
1046
  this.collectionWidgetCards$ = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(filter$1(([widgetConfig, widgetData]) => !!widgetConfig && !!widgetData), tap(([widgetConfig]) => {
968
- this.widgetTitle.set(widgetConfig.title);
1047
+ this.$widgetTitle.set(widgetConfig.title);
969
1048
  }), map(([widgetConfig, widgetData]) => widgetData.content.map((cardData, index) => ({
970
1049
  hidden: cardData.hidden,
971
1050
  key: index,
@@ -1050,7 +1129,7 @@ class WidgetCollectionComponent {
1050
1129
  });
1051
1130
  }
1052
1131
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCollectionComponent, deps: [{ token: i1.ViewContentService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
1053
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n collectionWidgetCards: collectionWidgetCards$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section class=\"valtimo-widget-collection__header\">\n <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n <ng-content></ng-content>\n </section>\n\n <div\n #widgetCollection\n [ngClass]=\"{\n 'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n 'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n 'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n 'valtimo-widget-collection__container': amountOfColumns() === 4,\n }\"\n >\n @for (card of obs?.collectionWidgetCards; track card.key) {\n <div\n *ngIf=\"!obs.noVisibleFields\"\n class=\"valtimo-widget-collection__card\"\n [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n >\n <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n @for (field of card.fields; track field.key) {\n <div\n *ngIf=\"\n (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n !field?.hideWhenEmpty\n \"\n [ngClass]=\"{\n 'valtimo-widget-collection__full-width-input': field?.width === 'full',\n 'valtimo-widget-collection__half-width-input': field?.width === 'half',\n }\"\n >\n <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n {{ field?.title }}\n\n <input\n [value]=\"field?.value\"\n [readonly]=\"true\"\n class=\"valtimo-widget-collection__card-input\"\n cdsText\n />\n </cds-label>\n </div>\n }\n </div>\n }\n </div>\n\n @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"\n (obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\n \"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n\n <cds-pagination-nav\n *ngIf=\"paginationModel() && (showPagination$ | async)\"\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1132
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n collectionWidgetCards: collectionWidgetCards$ | async,\n noVisibleFields: noVisibleFields$ | async,\n widgetData: widgetData$ | async,\n } as obs\"\n>\n <section class=\"valtimo-widget-collection__header\">\n <div class=\"valtimo-widget-collection__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n <div\n #widgetCollection\n [ngClass]=\"{\n 'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n 'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n 'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n 'valtimo-widget-collection__container': amountOfColumns() === 4,\n }\"\n >\n @for (card of obs?.collectionWidgetCards; track card.key) {\n <div\n *ngIf=\"!obs.noVisibleFields\"\n class=\"valtimo-widget-collection__card\"\n [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n >\n <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n @for (field of card.fields; track field.key) {\n <div\n *ngIf=\"\n (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n !field?.hideWhenEmpty\n \"\n [ngClass]=\"{\n 'valtimo-widget-collection__full-width-input': field?.width === 'full',\n 'valtimo-widget-collection__half-width-input': field?.width === 'half',\n }\"\n >\n <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n {{ field?.title }}\n\n <input\n [value]=\"field?.value\"\n [readonly]=\"true\"\n class=\"valtimo-widget-collection__card-input\"\n cdsText\n />\n </cds-label>\n </div>\n }\n </div>\n }\n </div>\n\n @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n\n <cds-pagination-nav\n *ngIf=\"paginationModel() && (showPagination$ | async)\"\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1054
1133
  }
1055
1134
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCollectionComponent, decorators: [{
1056
1135
  type: Component,
@@ -1062,7 +1141,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1062
1141
  CarbonListModule,
1063
1142
  TranslateModule,
1064
1143
  ButtonModule,
1065
- ], 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 } as obs\"\n>\n <section class=\"valtimo-widget-collection__header\">\n <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n <ng-content></ng-content>\n </section>\n\n <div\n #widgetCollection\n [ngClass]=\"{\n 'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n 'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n 'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n 'valtimo-widget-collection__container': amountOfColumns() === 4,\n }\"\n >\n @for (card of obs?.collectionWidgetCards; track card.key) {\n <div\n *ngIf=\"!obs.noVisibleFields\"\n class=\"valtimo-widget-collection__card\"\n [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n >\n <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n @for (field of card.fields; track field.key) {\n <div\n *ngIf=\"\n (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n !field?.hideWhenEmpty\n \"\n [ngClass]=\"{\n 'valtimo-widget-collection__full-width-input': field?.width === 'full',\n 'valtimo-widget-collection__half-width-input': field?.width === 'half',\n }\"\n >\n <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n {{ field?.title }}\n\n <input\n [value]=\"field?.value\"\n [readonly]=\"true\"\n class=\"valtimo-widget-collection__card-input\"\n cdsText\n />\n </cds-label>\n </div>\n }\n </div>\n }\n </div>\n\n @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"\n (obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\n \"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n\n <cds-pagination-nav\n *ngIf=\"paginationModel() && (showPagination$ | async)\"\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
1144
+ WidgetActionButtonComponent,
1145
+ MdiIconViewerComponent,
1146
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n collectionWidgetCards: collectionWidgetCards$ | async,\n noVisibleFields: noVisibleFields$ | async,\n widgetData: widgetData$ | async,\n } as obs\"\n>\n <section class=\"valtimo-widget-collection__header\">\n <div class=\"valtimo-widget-collection__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n <div\n #widgetCollection\n [ngClass]=\"{\n 'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n 'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n 'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n 'valtimo-widget-collection__container': amountOfColumns() === 4,\n }\"\n >\n @for (card of obs?.collectionWidgetCards; track card.key) {\n <div\n *ngIf=\"!obs.noVisibleFields\"\n class=\"valtimo-widget-collection__card\"\n [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n >\n <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n @for (field of card.fields; track field.key) {\n <div\n *ngIf=\"\n (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n !field?.hideWhenEmpty\n \"\n [ngClass]=\"{\n 'valtimo-widget-collection__full-width-input': field?.width === 'full',\n 'valtimo-widget-collection__half-width-input': field?.width === 'half',\n }\"\n >\n <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n {{ field?.title }}\n\n <input\n [value]=\"field?.value\"\n [readonly]=\"true\"\n class=\"valtimo-widget-collection__card-input\"\n cdsText\n />\n </cds-label>\n </div>\n }\n </div>\n }\n </div>\n\n @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n\n <cds-pagination-nav\n *ngIf=\"paginationModel() && (showPagination$ | async)\"\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
1066
1147
  }], ctorParameters: () => [{ type: i1.ViewContentService }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
1067
1148
  type: HostBinding,
1068
1149
  args: ['class']
@@ -1151,6 +1232,7 @@ class WidgetTableComponent {
1151
1232
  widgetData = rows.map((_, index) => value.content[index] || { ...value[0], hidden: true });
1152
1233
  }
1153
1234
  this.widgetData$.next(widgetData);
1235
+ this.resolvedData$.next(value?.resolved);
1154
1236
  if (!this._paginationInitialized) {
1155
1237
  this.showPagination.set(value.totalElements > value.size);
1156
1238
  this.paginationModel.set(value.totalPages < 0
@@ -1176,6 +1258,7 @@ class WidgetTableComponent {
1176
1258
  this.cdr = cdr;
1177
1259
  this.showPagination = signal(false);
1178
1260
  this.widgetData$ = new BehaviorSubject(null);
1261
+ this.resolvedData$ = new BehaviorSubject(null);
1179
1262
  this._paginationInitialized = false;
1180
1263
  this.paginationEvent = new EventEmitter();
1181
1264
  this.fields$ = new BehaviorSubject([]);
@@ -1188,7 +1271,7 @@ class WidgetTableComponent {
1188
1271
  this.paginationEvent.emit({ ...paginationModel, currentPage: page });
1189
1272
  }
1190
1273
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
1191
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetTableComponent, isStandalone: true, selector: "valtimo-widget-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-tile\n *ngIf=\"{\n fields: fields$ | async,\n widgetData: widgetData$ | async,\n } as obs\"\n class=\"valtimo-widget-table\"\n>\n <section class=\"valtimo-widget-table__header\">\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n\n <ng-content></ng-content>\n </section>\n\n @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n <section class=\"valtimo-widget-table__content\">\n <valtimo-carbon-list\n [header]=\"false\"\n [hideToolbar]=\"true\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData\"\n >\n </valtimo-carbon-list>\n\n <cds-pagination-nav\n *ngIf=\"paginationModel() && showPagination()\"\n class=\"valtimo-widget-table__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n </section>\n } @else {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.Tile, selector: "cds-tile, ibm-tile", inputs: ["theme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1274
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetTableComponent, isStandalone: true, selector: "valtimo-widget-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-tile\n *ngIf=\"{\n fields: fields$ | async,\n widgetData: widgetData$ | async,\n resolvedData: resolvedData$ | async,\n } as obs\"\n class=\"valtimo-widget-table\"\n>\n <section class=\"valtimo-widget-table__header\">\n <div class=\"valtimo-widget-table__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"widgetConfiguration?.icon\"\n [mdiIcon]=\"widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"widgetConfiguration\"\n [resolvedData]=\"obs.resolvedData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n <section class=\"valtimo-widget-table__content\">\n <valtimo-carbon-list\n [header]=\"false\"\n [hideToolbar]=\"true\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData\"\n >\n </valtimo-carbon-list>\n\n <cds-pagination-nav\n *ngIf=\"paginationModel() && showPagination()\"\n class=\"valtimo-widget-table__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n </section>\n } @else {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.Tile, selector: "cds-tile, ibm-tile", inputs: ["theme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1192
1275
  }
1193
1276
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetTableComponent, decorators: [{
1194
1277
  type: Component,
@@ -1199,7 +1282,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1199
1282
  TilesModule,
1200
1283
  TranslateModule,
1201
1284
  ButtonModule,
1202
- ], 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 } as obs\"\n class=\"valtimo-widget-table\"\n>\n <section class=\"valtimo-widget-table__header\">\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n\n <ng-content></ng-content>\n </section>\n\n @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n <section class=\"valtimo-widget-table__content\">\n <valtimo-carbon-list\n [header]=\"false\"\n [hideToolbar]=\"true\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData\"\n >\n </valtimo-carbon-list>\n\n <cds-pagination-nav\n *ngIf=\"paginationModel() && showPagination()\"\n class=\"valtimo-widget-table__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n </section>\n } @else {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
1285
+ WidgetActionButtonComponent,
1286
+ MdiIconViewerComponent,
1287
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-tile\n *ngIf=\"{\n fields: fields$ | async,\n widgetData: widgetData$ | async,\n resolvedData: resolvedData$ | async,\n } as obs\"\n class=\"valtimo-widget-table\"\n>\n <section class=\"valtimo-widget-table__header\">\n <div class=\"valtimo-widget-table__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"widgetConfiguration?.icon\"\n [mdiIcon]=\"widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"widgetConfiguration\"\n [resolvedData]=\"obs.resolvedData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n <section class=\"valtimo-widget-table__content\">\n <valtimo-carbon-list\n [header]=\"false\"\n [hideToolbar]=\"true\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData\"\n >\n </valtimo-carbon-list>\n\n <cds-pagination-nav\n *ngIf=\"paginationModel() && showPagination()\"\n class=\"valtimo-widget-table__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n </section>\n } @else {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
1203
1288
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { widgetConfiguration: [{
1204
1289
  type: Input,
1205
1290
  args: [{ required: true }]
@@ -1345,8 +1430,8 @@ class WidgetInteractiveTableComponent {
1345
1430
  rowClick(event) {
1346
1431
  this.rowClickEvent.emit(event);
1347
1432
  }
1348
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetInteractiveTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$3.DocumentService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
1349
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetInteractiveTableComponent, isStandalone: true, selector: "valtimo-widget-interactive-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent", rowClickEvent: "rowClickEvent", actionEvent: "actionEvent", caseStartEvent: "caseStartEvent" }, 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 } as obs\"\n>\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n\n <valtimo-carbon-list\n [header]=\"false\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData\"\n [pagination]=\"$paginationModel()\"\n [paginatorConfig]=\"$paginatorConfig()\"\n (paginationClicked)=\"onPaginationClicked($event)\"\n (rowClicked)=\"rowClick($event)\"\n >\n <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\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 [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n </valtimo-carbon-list>\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__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;padding:12px 0 0 16px}.cds--menu-item__label{overflow:unset!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", "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$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: 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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1433
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetInteractiveTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.DocumentService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
1434
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetInteractiveTableComponent, isStandalone: true, selector: "valtimo-widget-interactive-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent", rowClickEvent: "rowClickEvent", actionEvent: "actionEvent", caseStartEvent: "caseStartEvent" }, 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 } 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 [pagination]=\"$paginationModel()\"\n [paginatorConfig]=\"$paginatorConfig()\"\n (paginationClicked)=\"onPaginationClicked($event)\"\n (rowClicked)=\"rowClick($event)\"\n >\n <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\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 [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n </valtimo-carbon-list>\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}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1350
1435
  }
1351
1436
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetInteractiveTableComponent, decorators: [{
1352
1437
  type: Component,
@@ -1361,8 +1446,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1361
1446
  MenuButtonModule,
1362
1447
  ContextMenuModule,
1363
1448
  IconModule,
1364
- ], 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 } as obs\"\n>\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n\n <valtimo-carbon-list\n [header]=\"false\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData\"\n [pagination]=\"$paginationModel()\"\n [paginatorConfig]=\"$paginatorConfig()\"\n (paginationClicked)=\"onPaginationClicked($event)\"\n (rowClicked)=\"rowClick($event)\"\n >\n <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\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 [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n </valtimo-carbon-list>\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__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;padding:12px 0 0 16px}.cds--menu-item__label{overflow:unset!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"] }]
1365
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$3.DocumentService }, { type: i3.IconService }], propDecorators: { class: [{
1449
+ MdiIconViewerComponent,
1450
+ ], 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 } 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 [pagination]=\"$paginationModel()\"\n [paginatorConfig]=\"$paginatorConfig()\"\n (paginationClicked)=\"onPaginationClicked($event)\"\n (rowClicked)=\"rowClick($event)\"\n >\n <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\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 [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n </valtimo-carbon-list>\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}\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"] }]
1451
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$2.DocumentService }, { type: i3.IconService }], propDecorators: { class: [{
1366
1452
  type: HostBinding,
1367
1453
  args: ['class']
1368
1454
  }], widgetConfiguration: [{
@@ -1418,6 +1504,11 @@ class WidgetCustomComponent {
1418
1504
  return;
1419
1505
  this._widgetConfigSubject$.next(value);
1420
1506
  }
1507
+ set widgetData(value) {
1508
+ if (!value)
1509
+ return;
1510
+ this.widgetData$.next(value);
1511
+ }
1421
1512
  set widgetUuid(value) {
1422
1513
  this.widgetLayoutService.setWidgetDataLoaded(value);
1423
1514
  }
@@ -1432,6 +1523,7 @@ class WidgetCustomComponent {
1432
1523
  this.permissionService = permissionService;
1433
1524
  this._customWidgetConfig$ = new BehaviorSubject({});
1434
1525
  this._widgetConfigSubject$ = new BehaviorSubject(null);
1526
+ this.widgetData$ = new BehaviorSubject(null);
1435
1527
  this.noCustomComponentAvailable = signal(false);
1436
1528
  this._subscriptions = new Subscription();
1437
1529
  if (customWidgetConfig)
@@ -1456,22 +1548,32 @@ class WidgetCustomComponent {
1456
1548
  this.cdr.detectChanges();
1457
1549
  }));
1458
1550
  }
1459
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCustomComponent, deps: [{ token: CUSTOM_WIDGET_TOKEN, optional: true }, { token: i0.ChangeDetectorRef }, { token: WidgetLayoutService }, { token: i2$3.DocumentService }, { token: i3$1.PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
1460
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetCustomComponent, isStandalone: true, selector: "valtimo-widget-custom", inputs: { widgetConfiguration: "widgetConfiguration", 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 *ngIf=\"{widgetConfig: widgetConfig$ | async} as obs\" class=\"custom-widget\">\n <section class=\"custom-widget__header\">\n <h4 class=\"custom-widget__title\">{{ obs.widgetConfig?.title || '-' }}</h4>\n\n <ng-content></ng-content>\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{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$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1551
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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 }); }
1552
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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=\"{widgetConfiguration: widgetConfig$ | async, widgetData: widgetData$ | async} 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 }); }
1461
1553
  }
1462
1554
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCustomComponent, decorators: [{
1463
1555
  type: Component,
1464
- args: [{ selector: 'valtimo-widget-custom', standalone: true, imports: [CommonModule, CarbonListModule, TranslateModule, ButtonModule], 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 *ngIf=\"{widgetConfig: widgetConfig$ | async} as obs\" class=\"custom-widget\">\n <section class=\"custom-widget__header\">\n <h4 class=\"custom-widget__title\">{{ obs.widgetConfig?.title || '-' }}</h4>\n\n <ng-content></ng-content>\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{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"] }]
1556
+ args: [{ selector: 'valtimo-widget-custom', standalone: true, imports: [
1557
+ CommonModule,
1558
+ CarbonListModule,
1559
+ TranslateModule,
1560
+ ButtonModule,
1561
+ WidgetActionButtonComponent,
1562
+ MdiIconViewerComponent,
1563
+ LayerModule,
1564
+ ], 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=\"{widgetConfiguration: widgetConfig$ | async, widgetData: widgetData$ | async} 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"] }]
1465
1565
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1466
1566
  type: Optional
1467
1567
  }, {
1468
1568
  type: Inject,
1469
1569
  args: [CUSTOM_WIDGET_TOKEN]
1470
- }] }, { type: i0.ChangeDetectorRef }, { type: WidgetLayoutService }, { type: i2$3.DocumentService }, { type: i3$1.PermissionService }], propDecorators: { _customWidgetContainerRef: [{
1570
+ }] }, { type: i0.ChangeDetectorRef }, { type: WidgetLayoutService }, { type: i2$2.DocumentService }, { type: i3$1.PermissionService }], propDecorators: { _customWidgetContainerRef: [{
1471
1571
  type: ViewChild,
1472
1572
  args: ['customWidgetContainer', { read: ViewContainerRef }]
1473
1573
  }], widgetConfiguration: [{
1474
1574
  type: Input
1575
+ }], widgetData: [{
1576
+ type: Input
1475
1577
  }], widgetUuid: [{
1476
1578
  type: Input
1477
1579
  }] } });
@@ -1768,9 +1870,6 @@ class WidgetManagementDividerModalComponent {
1768
1870
  }
1769
1871
  set open(value) {
1770
1872
  this._open = value;
1771
- if (value) {
1772
- this.showAutoKey = true;
1773
- }
1774
1873
  }
1775
1874
  get open() {
1776
1875
  return this._open;
@@ -1801,7 +1900,6 @@ class WidgetManagementDividerModalComponent {
1801
1900
  constructor(fb, iconService) {
1802
1901
  this.fb = fb;
1803
1902
  this.iconService = iconService;
1804
- this.showAutoKey = true;
1805
1903
  this._open = false;
1806
1904
  this.usedKeys = [];
1807
1905
  this.dividerForm = this.fb.group({
@@ -1830,7 +1928,6 @@ class WidgetManagementDividerModalComponent {
1830
1928
  if (!dividerCreated) {
1831
1929
  this.closeEvent.emit(null);
1832
1930
  runAfterCarbonModalClosed(() => {
1833
- this.showAutoKey = false;
1834
1931
  this.resetForm();
1835
1932
  });
1836
1933
  return;
@@ -1845,7 +1942,6 @@ class WidgetManagementDividerModalComponent {
1845
1942
  widget: this.divider,
1846
1943
  });
1847
1944
  runAfterCarbonModalClosed(() => {
1848
- this.showAutoKey = false;
1849
1945
  this.resetForm();
1850
1946
  });
1851
1947
  }
@@ -1855,8 +1951,8 @@ class WidgetManagementDividerModalComponent {
1855
1951
  return;
1856
1952
  }
1857
1953
  }
1858
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementDividerModalComponent, deps: [{ token: i2$4.FormBuilder }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
1859
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementDividerModalComponent, isStandalone: true, selector: "valtimo-widget-management-divider-modal", inputs: { modalMode: "modalMode", open: "open", widgets: "widgets", usedKeys: "usedKeys", prefillData: "prefillData" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-modal valtimoCdsModal showFooter=\"true\" [open]=\"open\" (close)=\"onCloseModal()\">\n <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseModal()\">\n <h3 cdsModalHeaderHeading>\n {{ ('widgetTabManagement.list.dividerModal.' + modalMode + 'DividerTitle') | translate }}\n </h3>\n </cds-modal-header>\n\n <form [formGroup]=\"dividerForm\" cdsModalContent>\n <cds-label>\n {{ 'widgetTabManagement.list.dividerModal.dividerTitleLabel' | translate }}\n\n <input\n class=\"title-input\"\n formControlName=\"title\"\n cdsText\n placeholder=\"{{ 'widgetTabManagement.list.dividerModal.dividerTitlePlaceholder' | translate }}\"\n [cdsLayer]=\"1\"\n [attr.modal-primary-focus]=\"true\"\n (keyup)=\"onFocusOut()\"\n />\n </cds-label>\n\n <valtimo-auto-key-input\n *ngIf=\"showAutoKey\"\n [mode]=\"modalMode\"\n [usedKeys]=\"usedKeys\"\n [sourceText]=\"title.value\"\n formControlName=\"key\"\n labelTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyLabel\"\n placeholderTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyPlaceholder\"\n >\n </valtimo-auto-key-input>\n\n </form>\n\n <cds-modal-footer>\n <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n {{ 'caseManagement.allVersionsModal.closeButton' | translate }}\n </button>\n\n <button [disabled]=\"!dividerForm.valid\" cdsButton=\"primary\" (click)=\"onCloseModal(true)\">\n {{ buttonLabel | translate }}\n </button>\n </cds-modal-footer>\n</cds-modal>\n", styles: [".divider-key-wrapper{display:flex;flex:1 1 auto;inline-size:100%}.title-input{margin-bottom:32px}\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { 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: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "mode", "usedKeys", "sourceText"] }] }); }
1954
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementDividerModalComponent, deps: [{ token: i1$3.FormBuilder }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
1955
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementDividerModalComponent, isStandalone: true, selector: "valtimo-widget-management-divider-modal", inputs: { modalMode: "modalMode", open: "open", widgets: "widgets", usedKeys: "usedKeys", prefillData: "prefillData" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-modal valtimoCdsModal showFooter=\"true\" [open]=\"open\" (close)=\"onCloseModal()\">\n <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseModal()\">\n <h3 cdsModalHeaderHeading>\n {{ 'widgetTabManagement.list.dividerModal.' + modalMode + 'DividerTitle' | translate }}\n </h3>\n </cds-modal-header>\n\n <form [formGroup]=\"dividerForm\" cdsModalContent>\n <cds-label>\n {{ 'widgetTabManagement.list.dividerModal.dividerTitleLabel' | translate }}\n\n <input\n class=\"title-input\"\n formControlName=\"title\"\n cdsText\n placeholder=\"{{\n 'widgetTabManagement.list.dividerModal.dividerTitlePlaceholder' | translate\n }}\"\n [cdsLayer]=\"1\"\n [attr.modal-primary-focus]=\"true\"\n (keyup)=\"onFocusOut()\"\n />\n </cds-label>\n\n <valtimo-auto-key-input\n [mode]=\"modalMode\"\n [usedKeys]=\"usedKeys\"\n [sourceText]=\"title.value\"\n formControlName=\"key\"\n labelTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyLabel\"\n placeholderTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyPlaceholder\"\n >\n </valtimo-auto-key-input>\n </form>\n\n <cds-modal-footer>\n <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n {{ 'caseManagement.allVersionsModal.closeButton' | translate }}\n </button>\n\n <button [disabled]=\"!dividerForm.valid\" cdsButton=\"primary\" (click)=\"onCloseModal(true)\">\n {{ buttonLabel | translate }}\n </button>\n </cds-modal-footer>\n</cds-modal>\n", styles: [".divider-key-wrapper{display:flex;flex:1 1 auto;inline-size:100%}.title-input{margin-bottom:32px}\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: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { 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: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "mode", "usedKeys", "sourceText"] }] }); }
1860
1956
  }
1861
1957
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementDividerModalComponent, decorators: [{
1862
1958
  type: Component,
@@ -1871,8 +1967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1871
1967
  ReactiveFormsModule,
1872
1968
  LayerModule,
1873
1969
  AutoKeyInputComponent,
1874
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-modal valtimoCdsModal showFooter=\"true\" [open]=\"open\" (close)=\"onCloseModal()\">\n <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseModal()\">\n <h3 cdsModalHeaderHeading>\n {{ ('widgetTabManagement.list.dividerModal.' + modalMode + 'DividerTitle') | translate }}\n </h3>\n </cds-modal-header>\n\n <form [formGroup]=\"dividerForm\" cdsModalContent>\n <cds-label>\n {{ 'widgetTabManagement.list.dividerModal.dividerTitleLabel' | translate }}\n\n <input\n class=\"title-input\"\n formControlName=\"title\"\n cdsText\n placeholder=\"{{ 'widgetTabManagement.list.dividerModal.dividerTitlePlaceholder' | translate }}\"\n [cdsLayer]=\"1\"\n [attr.modal-primary-focus]=\"true\"\n (keyup)=\"onFocusOut()\"\n />\n </cds-label>\n\n <valtimo-auto-key-input\n *ngIf=\"showAutoKey\"\n [mode]=\"modalMode\"\n [usedKeys]=\"usedKeys\"\n [sourceText]=\"title.value\"\n formControlName=\"key\"\n labelTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyLabel\"\n placeholderTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyPlaceholder\"\n >\n </valtimo-auto-key-input>\n\n </form>\n\n <cds-modal-footer>\n <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n {{ 'caseManagement.allVersionsModal.closeButton' | translate }}\n </button>\n\n <button [disabled]=\"!dividerForm.valid\" cdsButton=\"primary\" (click)=\"onCloseModal(true)\">\n {{ buttonLabel | translate }}\n </button>\n </cds-modal-footer>\n</cds-modal>\n", styles: [".divider-key-wrapper{display:flex;flex:1 1 auto;inline-size:100%}.title-input{margin-bottom:32px}\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"] }]
1875
- }], ctorParameters: () => [{ type: i2$4.FormBuilder }, { type: i3.IconService }], propDecorators: { modalMode: [{
1970
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-modal valtimoCdsModal showFooter=\"true\" [open]=\"open\" (close)=\"onCloseModal()\">\n <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseModal()\">\n <h3 cdsModalHeaderHeading>\n {{ 'widgetTabManagement.list.dividerModal.' + modalMode + 'DividerTitle' | translate }}\n </h3>\n </cds-modal-header>\n\n <form [formGroup]=\"dividerForm\" cdsModalContent>\n <cds-label>\n {{ 'widgetTabManagement.list.dividerModal.dividerTitleLabel' | translate }}\n\n <input\n class=\"title-input\"\n formControlName=\"title\"\n cdsText\n placeholder=\"{{\n 'widgetTabManagement.list.dividerModal.dividerTitlePlaceholder' | translate\n }}\"\n [cdsLayer]=\"1\"\n [attr.modal-primary-focus]=\"true\"\n (keyup)=\"onFocusOut()\"\n />\n </cds-label>\n\n <valtimo-auto-key-input\n [mode]=\"modalMode\"\n [usedKeys]=\"usedKeys\"\n [sourceText]=\"title.value\"\n formControlName=\"key\"\n labelTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyLabel\"\n placeholderTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyPlaceholder\"\n >\n </valtimo-auto-key-input>\n </form>\n\n <cds-modal-footer>\n <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n {{ 'caseManagement.allVersionsModal.closeButton' | translate }}\n </button>\n\n <button [disabled]=\"!dividerForm.valid\" cdsButton=\"primary\" (click)=\"onCloseModal(true)\">\n {{ buttonLabel | translate }}\n </button>\n </cds-modal-footer>\n</cds-modal>\n", styles: [".divider-key-wrapper{display:flex;flex:1 1 auto;inline-size:100%}.title-input{margin-bottom:32px}\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"] }]
1971
+ }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i3.IconService }], propDecorators: { modalMode: [{
1876
1972
  type: Input
1877
1973
  }], open: [{
1878
1974
  type: Input
@@ -1942,27 +2038,16 @@ class WidgetManagementProcessSelectorComponent {
1942
2038
  .pipe(debounceTime(100))
1943
2039
  .subscribe((changes) => {
1944
2040
  const { name, processDefinition } = changes;
1945
- this.widgetWizardService.$widgetActions.update((actions) => {
1946
- const existingAction = actions?.find((action) => action.processDefinitionKey === processDefinition?.key);
1947
- const newAction = {
2041
+ if (!processDefinition?.key) {
2042
+ this.widgetWizardService.$widgetActions.set([]);
2043
+ return;
2044
+ }
2045
+ this.widgetWizardService.$widgetActions.set([
2046
+ {
1948
2047
  name: !name ? processDefinition?.content : name,
1949
2048
  processDefinitionKey: processDefinition?.key,
1950
- };
1951
- if (!actions)
1952
- return !Array.isArray(processDefinition)
1953
- ? [
1954
- {
1955
- name: !name ? processDefinition?.content : name,
1956
- processDefinitionKey: processDefinition?.key,
1957
- },
1958
- ]
1959
- : [];
1960
- return !existingAction
1961
- ? [...actions, newAction]
1962
- : actions.map(action => action.processDefinitionKey === newAction.processDefinitionKey
1963
- ? newAction
1964
- : action);
1965
- });
2049
+ },
2050
+ ]);
1966
2051
  }));
1967
2052
  }
1968
2053
  onProcessSelected(selection) {
@@ -1974,8 +2059,8 @@ class WidgetManagementProcessSelectorComponent {
1974
2059
  else
1975
2060
  nameFormControl.enable();
1976
2061
  }
1977
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementProcessSelectorComponent, deps: [{ token: i1.CdsThemeService }, { token: i2$3.DocumentService }, { token: i2$4.FormBuilder }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
1978
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementProcessSelectorComponent, isStandalone: true, selector: "valtimo-widget-management-process-selector", ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n [attr.data-carbon-theme]=\"theme$ | async\"\n [formGroup]=\"formGroup\"\n class=\"valtimo-widget-management-process-selector\"\n>\n <cds-combo-box\n [label]=\"'widgetTabManagement.processes.buttonTextLabel' | translate\"\n [items]=\"(processDefinitionItems$ | async) || []\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.processes.selectorPlaceholder' | translate\"\n formControlName=\"processDefinition\"\n (selected)=\"onProcessSelected($event)\"\n >\n <cds-dropdown-list></cds-dropdown-list>\n </cds-combo-box>\n\n <cds-text-label>\n {{ 'widgetTabManagement.processes.buttonTextLabel' | translate }}\n\n <input\n cdsText\n type=\"text\"\n formControlName=\"name\"\n [placeholder]=\"'widgetTabManagement.processes.buttonTextPlaceholder' | translate\"\n />\n </cds-text-label>\n</form>\n", styles: [":host{padding:12px 0 16px 16px;background:var(--cds-layer)}.valtimo-widget-management-process-selector{display:flex;gap:16px}.valtimo-widget-management-process-selector>*{max-width:288px;width:100%}.valtimo-widget-management-process-selector .cds--text-input,.valtimo-widget-management-process-selector .cds--list-box{background:var(--cds-layer-01)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { 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: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2062
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementProcessSelectorComponent, deps: [{ token: i1.CdsThemeService }, { token: i2$2.DocumentService }, { token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
2063
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementProcessSelectorComponent, isStandalone: true, selector: "valtimo-widget-management-process-selector", ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n [attr.data-carbon-theme]=\"theme$ | async\"\n [formGroup]=\"formGroup\"\n class=\"valtimo-widget-management-process-selector\"\n>\n <cds-combo-box\n class=\"test\"\n [label]=\"'widgetTabManagement.processes.buttonTextLabel' | translate\"\n [items]=\"(processDefinitionItems$ | async) || []\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.processes.selectorPlaceholder' | translate\"\n formControlName=\"processDefinition\"\n (selected)=\"onProcessSelected($event)\"\n >\n <cds-dropdown-list></cds-dropdown-list>\n </cds-combo-box>\n\n <cds-text-label>\n {{ 'widgetTabManagement.processes.buttonTextLabel' | translate }}\n\n <input\n cdsText\n type=\"text\"\n formControlName=\"name\"\n [placeholder]=\"'widgetTabManagement.processes.buttonTextPlaceholder' | translate\"\n />\n </cds-text-label>\n</form>\n", styles: [".valtimo-widget-management-process-selector{display:grid;grid-template-columns:1fr 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-process-selector ::ng-deep .cds--text-input,.valtimo-widget-management-process-selector ::ng-deep .cds--list-box{background:var(--cds-layer-01)!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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1979
2064
  }
1980
2065
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementProcessSelectorComponent, decorators: [{
1981
2066
  type: Component,
@@ -1986,12 +2071,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1986
2071
  ReactiveFormsModule,
1987
2072
  ComboBoxModule,
1988
2073
  LayerModule,
1989
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n [attr.data-carbon-theme]=\"theme$ | async\"\n [formGroup]=\"formGroup\"\n class=\"valtimo-widget-management-process-selector\"\n>\n <cds-combo-box\n [label]=\"'widgetTabManagement.processes.buttonTextLabel' | translate\"\n [items]=\"(processDefinitionItems$ | async) || []\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.processes.selectorPlaceholder' | translate\"\n formControlName=\"processDefinition\"\n (selected)=\"onProcessSelected($event)\"\n >\n <cds-dropdown-list></cds-dropdown-list>\n </cds-combo-box>\n\n <cds-text-label>\n {{ 'widgetTabManagement.processes.buttonTextLabel' | translate }}\n\n <input\n cdsText\n type=\"text\"\n formControlName=\"name\"\n [placeholder]=\"'widgetTabManagement.processes.buttonTextPlaceholder' | translate\"\n />\n </cds-text-label>\n</form>\n", styles: [":host{padding:12px 0 16px 16px;background:var(--cds-layer)}.valtimo-widget-management-process-selector{display:flex;gap:16px}.valtimo-widget-management-process-selector>*{max-width:288px;width:100%}.valtimo-widget-management-process-selector .cds--text-input,.valtimo-widget-management-process-selector .cds--list-box{background:var(--cds-layer-01)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
1990
- }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i2$3.DocumentService }, { type: i2$4.FormBuilder }, { type: WidgetWizardService }, { type: undefined, decorators: [{
2074
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n [attr.data-carbon-theme]=\"theme$ | async\"\n [formGroup]=\"formGroup\"\n class=\"valtimo-widget-management-process-selector\"\n>\n <cds-combo-box\n class=\"test\"\n [label]=\"'widgetTabManagement.processes.buttonTextLabel' | translate\"\n [items]=\"(processDefinitionItems$ | async) || []\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.processes.selectorPlaceholder' | translate\"\n formControlName=\"processDefinition\"\n (selected)=\"onProcessSelected($event)\"\n >\n <cds-dropdown-list></cds-dropdown-list>\n </cds-combo-box>\n\n <cds-text-label>\n {{ 'widgetTabManagement.processes.buttonTextLabel' | translate }}\n\n <input\n cdsText\n type=\"text\"\n formControlName=\"name\"\n [placeholder]=\"'widgetTabManagement.processes.buttonTextPlaceholder' | translate\"\n />\n </cds-text-label>\n</form>\n", styles: [".valtimo-widget-management-process-selector{display:grid;grid-template-columns:1fr 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-process-selector ::ng-deep .cds--text-input,.valtimo-widget-management-process-selector ::ng-deep .cds--list-box{background:var(--cds-layer-01)!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"] }]
2075
+ }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i2$2.DocumentService }, { type: i1$3.FormBuilder }, { type: WidgetWizardService }, { type: undefined, decorators: [{
1991
2076
  type: Inject,
1992
2077
  args: [WIDGET_MANAGEMENT_SERVICE]
1993
2078
  }] }] });
1994
2079
 
2080
+ /*
2081
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
2082
+ *
2083
+ * Licensed under EUPL, Version 1.2 (the "License");
2084
+ * you may not use this file except in compliance with the License.
2085
+ * You may obtain a copy of the License at
2086
+ *
2087
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
2088
+ *
2089
+ * Unless required by applicable law or agreed to in writing, software
2090
+ * distributed under the License is distributed on an "AS IS" basis,
2091
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2092
+ * See the License for the specific language governing permissions and
2093
+ * limitations under the License.
2094
+ */
2095
+ class WidgetManagementActionButtonComponent {
2096
+ constructor(fb, widgetWizardService) {
2097
+ this.fb = fb;
2098
+ this.widgetWizardService = widgetWizardService;
2099
+ this.class = 'valtimo-widget-management-action-button';
2100
+ this.$widgetContext = this.widgetWizardService.$widgetContext;
2101
+ this.buttonType$ = new BehaviorSubject(this.widgetWizardService.$widgetContext() === 'case' ? 'process' : 'link');
2102
+ this.dropdownItems$ = toObservable(this.widgetWizardService.$widgetActions).pipe(take(1), map((actions) => {
2103
+ return [
2104
+ {
2105
+ content: 'Process',
2106
+ id: 'process',
2107
+ selected: !!actions?.[0]?.processDefinitionKey || !actions?.[0]?.navigateTo,
2108
+ },
2109
+ {
2110
+ content: 'Link',
2111
+ id: 'link',
2112
+ selected: !!actions?.[0]?.navigateTo,
2113
+ },
2114
+ ];
2115
+ }), tap(dropdownItems => {
2116
+ const buttonType = dropdownItems.find(item => item.selected)?.id;
2117
+ if (!buttonType)
2118
+ return;
2119
+ this.buttonType$.next(buttonType);
2120
+ }));
2121
+ this.formGroup = this.fb.group({
2122
+ navigateTo: this.fb.control(this.widgetWizardService.$widgetActions()?.[0]?.navigateTo ?? ''),
2123
+ name: this.fb.control(this.widgetWizardService.$widgetActions()?.[0]?.name ?? ''),
2124
+ }, { validators: [this.formContentValidator()] });
2125
+ this._subscriptions = new Subscription();
2126
+ }
2127
+ ngOnInit() {
2128
+ this.openValueChangeSubscription();
2129
+ }
2130
+ ngOnDestroy() {
2131
+ this._subscriptions.unsubscribe();
2132
+ }
2133
+ onTypeSelected(event) {
2134
+ this.buttonType$.next(event.item.id);
2135
+ this.widgetWizardService.$widgetActions.set([]);
2136
+ this.formGroup.reset({
2137
+ name: '',
2138
+ navigateTo: '',
2139
+ }, { emitEvent: false });
2140
+ }
2141
+ formContentValidator() {
2142
+ return (group) => {
2143
+ const navigateTo = group.get('navigateTo')?.value?.trim();
2144
+ const name = group.get('name')?.value?.trim();
2145
+ if ((!navigateTo && !name) || (!!navigateTo && !!name)) {
2146
+ group.get('name')?.setErrors(null);
2147
+ group.get('navigateTo')?.setErrors(null);
2148
+ return null;
2149
+ }
2150
+ const error = { formContentInvalid: true };
2151
+ group.get('name')?.setErrors(error);
2152
+ group.get('navigateTo')?.setErrors(error);
2153
+ return error;
2154
+ };
2155
+ }
2156
+ openValueChangeSubscription() {
2157
+ this._subscriptions.add(this.formGroup.valueChanges.pipe(debounceTime(100)).subscribe(() => {
2158
+ this.widgetWizardService.$widgetContentValid.set(this.formGroup.valid);
2159
+ if (!this.formGroup.valid)
2160
+ return;
2161
+ const action = this.formGroup.getRawValue();
2162
+ if (!action.navigateTo || !action.name) {
2163
+ this.widgetWizardService.$widgetActions.set([]);
2164
+ return;
2165
+ }
2166
+ this.widgetWizardService.$widgetActions.set([
2167
+ {
2168
+ name: action.name,
2169
+ navigateTo: action.navigateTo,
2170
+ },
2171
+ ]);
2172
+ }));
2173
+ }
2174
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementActionButtonComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
2175
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementActionButtonComponent, isStandalone: true, selector: "valtimo-widget-management-action-button", 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@if ($widgetContext() === 'case') {\n <cds-dropdown\n class=\"valtimo-widget-management-action-button__type\"\n [label]=\"'widgetTabManagement.actionButtonLabel' | translate\"\n [dropUp]=\"false\"\n (selected)=\"onTypeSelected($event)\"\n >\n <cds-dropdown-list [items]=\"dropdownItems$ | async\"></cds-dropdown-list>\n </cds-dropdown>\n}\n\n@if ((buttonType$ | async) === 'process') {\n <valtimo-widget-management-process-selector></valtimo-widget-management-process-selector>\n} @else {\n <form class=\"valtimo-widget-management-action-button__form\" [formGroup]=\"formGroup\">\n <cds-text-label>\n {{ 'widgetTabManagement.externalLink.linkLabel' | translate }}\n\n <input\n cdsText\n formControlName=\"navigateTo\"\n [placeholder]=\"'widgetTabManagement.externalLink.linkPlaceholder' | translate\"\n />\n </cds-text-label>\n\n <cds-text-label>\n {{ 'widgetTabManagement.externalLink.buttonTextLabel' | translate }}\n\n <input\n cdsText\n formControlName=\"name\"\n [placeholder]=\"'widgetTabManagement.processes.buttonTextPlaceholder' | translate\"\n />\n </cds-text-label>\n </form>\n}\n", styles: [".valtimo-widget-management-action-button{padding:12px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-action-button valtimo-widget-management-process-selector{padding-right:16px;width:100%}.valtimo-widget-management-action-button__type .cds--list-box,.valtimo-widget-management-action-button__form .cds--text-input{background:var(--cds-layer-02)}.valtimo-widget-management-action-button__type{width:300px}.valtimo-widget-management-action-button__form{padding-right:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:flex-end;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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetManagementProcessSelectorComponent, selector: "valtimo-widget-management-process-selector" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2176
+ }
2177
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementActionButtonComponent, decorators: [{
2178
+ type: Component,
2179
+ args: [{ selector: 'valtimo-widget-management-action-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
2180
+ CommonModule,
2181
+ WidgetManagementProcessSelectorComponent,
2182
+ DropdownModule,
2183
+ InputModule,
2184
+ ReactiveFormsModule,
2185
+ TranslateModule,
2186
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n@if ($widgetContext() === 'case') {\n <cds-dropdown\n class=\"valtimo-widget-management-action-button__type\"\n [label]=\"'widgetTabManagement.actionButtonLabel' | translate\"\n [dropUp]=\"false\"\n (selected)=\"onTypeSelected($event)\"\n >\n <cds-dropdown-list [items]=\"dropdownItems$ | async\"></cds-dropdown-list>\n </cds-dropdown>\n}\n\n@if ((buttonType$ | async) === 'process') {\n <valtimo-widget-management-process-selector></valtimo-widget-management-process-selector>\n} @else {\n <form class=\"valtimo-widget-management-action-button__form\" [formGroup]=\"formGroup\">\n <cds-text-label>\n {{ 'widgetTabManagement.externalLink.linkLabel' | translate }}\n\n <input\n cdsText\n formControlName=\"navigateTo\"\n [placeholder]=\"'widgetTabManagement.externalLink.linkPlaceholder' | translate\"\n />\n </cds-text-label>\n\n <cds-text-label>\n {{ 'widgetTabManagement.externalLink.buttonTextLabel' | translate }}\n\n <input\n cdsText\n formControlName=\"name\"\n [placeholder]=\"'widgetTabManagement.processes.buttonTextPlaceholder' | translate\"\n />\n </cds-text-label>\n </form>\n}\n", styles: [".valtimo-widget-management-action-button{padding:12px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-action-button valtimo-widget-management-process-selector{padding-right:16px;width:100%}.valtimo-widget-management-action-button__type .cds--list-box,.valtimo-widget-management-action-button__form .cds--text-input{background:var(--cds-layer-02)}.valtimo-widget-management-action-button__type{width:300px}.valtimo-widget-management-action-button__form{padding-right:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:flex-end;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"] }]
2187
+ }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
2188
+ type: HostBinding,
2189
+ args: ['class']
2190
+ }] } });
2191
+
1995
2192
  /*
1996
2193
  * Copyright 2015-2025 Ritense BV, the Netherlands.
1997
2194
  *
@@ -2016,13 +2213,14 @@ class WidgetWizardService {
2016
2213
  this.$widgetContent = signal(null);
2017
2214
  this.$widgetDisplayConditions = signal(null);
2018
2215
  this.$widgetTitle = signal(null);
2216
+ this.$widgetIcon = signal(null);
2019
2217
  this.$widgetKey = signal(null);
2020
2218
  this.$widgetActions = signal(undefined);
2021
2219
  this.$widgetContext = signal(null);
2022
2220
  this.$widgetContentValid = signal(false);
2023
2221
  this.$widgetConditionsValid = signal(false);
2024
2222
  this.$disableTitleInput = signal(false);
2025
- this.$disableProcessSelector = signal(false);
2223
+ this.$disableActionButton = signal(false);
2026
2224
  this.$widgetWizardSteps = signal([
2027
2225
  WidgetWizardStep.TYPE,
2028
2226
  WidgetWizardStep.WIDTH,
@@ -2050,6 +2248,7 @@ class WidgetWizardService {
2050
2248
  this.$widgetsConfig = computed(() => ({
2051
2249
  key: this.$widgetKey() ?? '',
2052
2250
  title: this.$widgetTitle() ?? '',
2251
+ icon: this.$widgetIcon() ?? '',
2053
2252
  type: this.$selectedWidget()?.type ?? WidgetType.FIELDS,
2054
2253
  width: this.$widgetWidth() || this._defaultWidth || 4,
2055
2254
  highContrast: (this.$widgetStyle() ?? WidgetStyle.DEFAULT) === WidgetStyle.HIGH_CONTRAST,
@@ -2071,10 +2270,12 @@ class WidgetWizardService {
2071
2270
  this.$widgetStyle.set(null);
2072
2271
  this.$widgetContent.set(null);
2073
2272
  this.$widgetTitle.set(null);
2273
+ this.$widgetIcon.set(null);
2074
2274
  this.$widgetKey.set(null);
2075
2275
  this.$widgetActions.set(undefined);
2076
2276
  this.$widgetDisplayConditions.set(null);
2077
2277
  this.$editMode.set(false);
2278
+ this.$disableActionButton.set(false);
2078
2279
  }, CARBON_CONSTANTS.modalAnimationMs);
2079
2280
  }
2080
2281
  resetWizardSteps() {
@@ -2125,28 +2326,27 @@ class WidgetWizardContentStepComponent {
2125
2326
  this.vcr = vcr;
2126
2327
  this.widgetWizardService = widgetWizardService;
2127
2328
  this.$selectedWidget = this.widgetWizardService.$selectedWidget;
2128
- this.$disableProcessSelector = this.widgetWizardService.$disableProcessSelector;
2129
- this.$widgetContext = this.widgetWizardService.$widgetContext;
2329
+ this.$disableActionButton = this.widgetWizardService.$disableActionButton;
2130
2330
  effect(() => {
2131
2331
  if (this.widgetWizardService.$editMode())
2132
2332
  this.widgetWizardService.$widgetContentValid.set(true);
2133
2333
  });
2134
2334
  }
2135
2335
  ngAfterViewInit() {
2136
- if (!this.processSelector)
2336
+ if (!this.actionButton)
2137
2337
  return;
2138
- const processSelectorNodes = this.vcr.createEmbeddedView(this.processSelector).rootNodes;
2338
+ const processSelectorNodes = this.vcr.createEmbeddedView(this.actionButton).rootNodes;
2139
2339
  this.projectedNodes = [processSelectorNodes];
2140
2340
  }
2141
2341
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardContentStepComponent, deps: [{ token: i0.ViewContainerRef }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
2142
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetWizardContentStepComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "processSelector", first: true, predicate: ["processSelector"], descendants: true, read: TemplateRef }, { propertyName: "projectedNodes", first: true, predicate: ["contentRenderer"], 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@if ($widgetContext() === 'case' && !$disableProcessSelector()) {\n <ng-template #processSelector>\n <valtimo-widget-management-process-selector></valtimo-widget-management-process-selector>\n </ng-template>\n}\n\n@if ($selectedWidget(); as selectedWidget) {\n <ng-container *ngComponentOutlet=\"selectedWidget.component; content: projectedNodes\">\n </ng-container>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: WidgetManagementProcessSelectorComponent, selector: "valtimo-widget-management-process-selector" }], encapsulation: i0.ViewEncapsulation.None }); }
2342
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetWizardContentStepComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "actionButton", first: true, predicate: ["actionButton"], descendants: true, read: TemplateRef }, { propertyName: "projectedNodes", first: true, predicate: ["contentRenderer"], 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@if (!$disableActionButton()) {\n <ng-template #actionButton>\n <valtimo-widget-management-action-button></valtimo-widget-management-action-button>\n </ng-template>\n}\n\n@if ($selectedWidget(); as selectedWidget) {\n <ng-container *ngComponentOutlet=\"selectedWidget.component; content: projectedNodes\">\n </ng-container>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: WidgetManagementActionButtonComponent, selector: "valtimo-widget-management-action-button" }], encapsulation: i0.ViewEncapsulation.None }); }
2143
2343
  }
2144
2344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardContentStepComponent, decorators: [{
2145
2345
  type: Component,
2146
- args: [{ encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, WidgetManagementProcessSelectorComponent], 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@if ($widgetContext() === 'case' && !$disableProcessSelector()) {\n <ng-template #processSelector>\n <valtimo-widget-management-process-selector></valtimo-widget-management-process-selector>\n </ng-template>\n}\n\n@if ($selectedWidget(); as selectedWidget) {\n <ng-container *ngComponentOutlet=\"selectedWidget.component; content: projectedNodes\">\n </ng-container>\n}\n" }]
2147
- }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: WidgetWizardService }], propDecorators: { processSelector: [{
2346
+ args: [{ encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, WidgetManagementActionButtonComponent], 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@if (!$disableActionButton()) {\n <ng-template #actionButton>\n <valtimo-widget-management-action-button></valtimo-widget-management-action-button>\n </ng-template>\n}\n\n@if ($selectedWidget(); as selectedWidget) {\n <ng-container *ngComponentOutlet=\"selectedWidget.component; content: projectedNodes\">\n </ng-container>\n}\n" }]
2347
+ }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: WidgetWizardService }], propDecorators: { actionButton: [{
2148
2348
  type: ViewChild,
2149
- args: ['processSelector', { read: TemplateRef }]
2349
+ args: ['actionButton', { read: TemplateRef }]
2150
2350
  }], projectedNodes: [{
2151
2351
  type: ViewChild,
2152
2352
  args: ['contentRenderer', { read: ViewContainerRef }]
@@ -2223,7 +2423,7 @@ class WidgetWizardDisplayConditionsStepComponent {
2223
2423
  }
2224
2424
  this.widgetWizardService.$widgetDisplayConditions.set(this.conditions.value);
2225
2425
  }
2226
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardDisplayConditionsStepComponent, deps: [{ token: i2$4.FormBuilder }, { token: i2$2.TranslateService }, { token: WidgetWizardService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
2426
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardDisplayConditionsStepComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2$1.TranslateService }, { token: WidgetWizardService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
2227
2427
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetWizardDisplayConditionsStepComponent, 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-label class=\"conditions-label\">\n {{ 'widgetTabManagement.displayConditions.conditions' | translate }}\n</cds-label>\n\n<valtimo-carbon-multi-input\n [type]=\"$multiInputType()\"\n class=\"valtimo-widget-wizard-condition-step__multi-input\"\n [addRowText]=\"'widgetTabManagement.displayConditions.addCondition' | translate\"\n addButtonType=\"tertiary\"\n [defaultValues]=\"defaultConditionValues$ | async\"\n [dropdownColumnTitle]=\"'widgetTabManagement.displayConditions.operator' | translate\"\n [dropdownItems]=\"operatorItems$ | async\"\n [fullWidth]=\"true\"\n [initialAmountOfRows]=\"0\"\n [keyColumnTitle]=\"'widgetTabManagement.displayConditions.path' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'widgetTabManagement.displayConditions.value' | translate\"\n valuePathSelectorNotation=\"dots\"\n (allValuesValidEvent)=\"onAllConditionsValid($event)\"\n (valueChange)=\"conditionsValueChange($event)\"\n [valuePathSelectorPrefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n [valuePathSelectorShowCaseDefinitionSelector]=\"false\"\n [valuePathSelectorCaseDefinitionKey]=\"(params$ | async)?.caseDefinitionKey\"\n [keyColumnFlex]=\"2\"\n [dropdownColumnFlex]=\"1\"\n [valueColumnFlex]=\"1\"\n></valtimo-carbon-multi-input>\n", styles: [":host{display:flex;flex-direction:column;gap:16px}:host ::ng-deep .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { 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: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: StructuredListModule }, { kind: "ngmodule", type: ToggleModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2228
2428
  }
2229
2429
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardDisplayConditionsStepComponent, decorators: [{
@@ -2239,7 +2439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
2239
2439
  ToggleModule,
2240
2440
  TranslatePipe,
2241
2441
  ], 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-label class=\"conditions-label\">\n {{ 'widgetTabManagement.displayConditions.conditions' | translate }}\n</cds-label>\n\n<valtimo-carbon-multi-input\n [type]=\"$multiInputType()\"\n class=\"valtimo-widget-wizard-condition-step__multi-input\"\n [addRowText]=\"'widgetTabManagement.displayConditions.addCondition' | translate\"\n addButtonType=\"tertiary\"\n [defaultValues]=\"defaultConditionValues$ | async\"\n [dropdownColumnTitle]=\"'widgetTabManagement.displayConditions.operator' | translate\"\n [dropdownItems]=\"operatorItems$ | async\"\n [fullWidth]=\"true\"\n [initialAmountOfRows]=\"0\"\n [keyColumnTitle]=\"'widgetTabManagement.displayConditions.path' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'widgetTabManagement.displayConditions.value' | translate\"\n valuePathSelectorNotation=\"dots\"\n (allValuesValidEvent)=\"onAllConditionsValid($event)\"\n (valueChange)=\"conditionsValueChange($event)\"\n [valuePathSelectorPrefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n [valuePathSelectorShowCaseDefinitionSelector]=\"false\"\n [valuePathSelectorCaseDefinitionKey]=\"(params$ | async)?.caseDefinitionKey\"\n [keyColumnFlex]=\"2\"\n [dropdownColumnFlex]=\"1\"\n [valueColumnFlex]=\"1\"\n></valtimo-carbon-multi-input>\n", styles: [":host{display:flex;flex-direction:column;gap:16px}:host ::ng-deep .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
2242
- }], ctorParameters: () => [{ type: i2$4.FormBuilder }, { type: i2$2.TranslateService }, { type: WidgetWizardService }, { type: i2.ActivatedRoute }] });
2442
+ }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$1.TranslateService }, { type: WidgetWizardService }, { type: i2.ActivatedRoute }] });
2243
2443
 
2244
2444
  /*
2245
2445
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -2266,7 +2466,7 @@ class WidgetWizardStyleStepComponent {
2266
2466
  this.widgetWizardService.$widgetStyle.set(event.value);
2267
2467
  }
2268
2468
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardStyleStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
2269
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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$2.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 }); }
2469
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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 }); }
2270
2470
  }
2271
2471
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardStyleStepComponent, decorators: [{
2272
2472
  type: Component,
@@ -2307,7 +2507,7 @@ class WidgetWizardTypeStepComponent {
2307
2507
  this.widgetWizardService.$selectedWidget.set(event.value);
2308
2508
  }
2309
2509
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardTypeStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
2310
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetWizardTypeStepComponent, 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 @for (widgetType of $availableWidgetTypes(); track widgetType.titleKey) {\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"widgetType\"\n [selected]=\"widgetType.type === $selectedWidget()?.type\"\n >\n <h3 class=\"valtimo-widget-wizard-step__tile-title\">{{ widgetType.titleKey | translate }}</h3>\n\n <span>{{ widgetType.descriptionKey | translate }}</span>\n\n <img [src]=\"widgetType.illustrationUrl\" [alt]=\"widgetType.titleKey | translate\" />\n </cds-selection-tile>\n }\n</cds-tile-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.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, encapsulation: i0.ViewEncapsulation.None }); }
2510
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetWizardTypeStepComponent, 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 @for (widgetType of $availableWidgetTypes(); track widgetType.titleKey) {\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"widgetType\"\n [selected]=\"widgetType.type === $selectedWidget()?.type\"\n >\n <h3 class=\"valtimo-widget-wizard-step__tile-title\">{{ widgetType.titleKey | translate }}</h3>\n\n <span>{{ widgetType.descriptionKey | translate }}</span>\n\n <img [src]=\"widgetType.illustrationUrl\" [alt]=\"widgetType.titleKey | translate\" />\n </cds-selection-tile>\n }\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, encapsulation: i0.ViewEncapsulation.None }); }
2311
2511
  }
2312
2512
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardTypeStepComponent, decorators: [{
2313
2513
  type: Component,
@@ -2341,7 +2541,7 @@ class WidgetWizardWidthStepComponent {
2341
2541
  this.widgetWizardService.$widgetWidth.set(event.value);
2342
2542
  }
2343
2543
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardWidthStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
2344
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetWizardWidthStepComponent, 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]=\"1\"\n [selected]=\"$widgetWidth() === 1\"\n [disabled]=\"$fieldsColumnsLength() > 1\"\n >\n <h3>{{ 'widgetTabManagement.width.small.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.small.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/quarter.svg\"\n [alt]=\"'widgetTabManagement.width.small.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"2\"\n [selected]=\"$widgetWidth() === 2\"\n [disabled]=\"$fieldsColumnsLength() > 2\"\n >\n <h3>{{ 'widgetTabManagement.width.medium.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.medium.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/half.svg\"\n [alt]=\"'widgetTabManagement.width.medium.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"3\"\n [selected]=\"$widgetWidth() === 3\"\n [disabled]=\"$fieldsColumnsLength() > 3\"\n >\n <h3>{{ 'widgetTabManagement.width.large.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.large.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/three-quarters.svg\"\n [alt]=\"'widgetTabManagement.width.large.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"4\"\n [selected]=\"$widgetWidth() === 4\"\n >\n <h3>{{ 'widgetTabManagement.width.xtraLarge.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.xtraLarge.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/full-width.svg\"\n [alt]=\"'widgetTabManagement.width.xtraLarge.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$2.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 }); }
2544
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetWizardWidthStepComponent, 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]=\"1\"\n [selected]=\"$widgetWidth() === 1\"\n [disabled]=\"$fieldsColumnsLength() > 1\"\n >\n <h3>{{ 'widgetTabManagement.width.small.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.small.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/quarter.svg\"\n [alt]=\"'widgetTabManagement.width.small.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"2\"\n [selected]=\"$widgetWidth() === 2\"\n [disabled]=\"$fieldsColumnsLength() > 2\"\n >\n <h3>{{ 'widgetTabManagement.width.medium.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.medium.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/half.svg\"\n [alt]=\"'widgetTabManagement.width.medium.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"3\"\n [selected]=\"$widgetWidth() === 3\"\n [disabled]=\"$fieldsColumnsLength() > 3\"\n >\n <h3>{{ 'widgetTabManagement.width.large.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.large.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/three-quarters.svg\"\n [alt]=\"'widgetTabManagement.width.large.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"4\"\n [selected]=\"$widgetWidth() === 4\"\n >\n <h3>{{ 'widgetTabManagement.width.xtraLarge.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.xtraLarge.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/full-width.svg\"\n [alt]=\"'widgetTabManagement.width.xtraLarge.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 }); }
2345
2545
  }
2346
2546
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardWidthStepComponent, decorators: [{
2347
2547
  type: Component,
@@ -2488,8 +2688,8 @@ class WidgetManagementWizardComponent {
2488
2688
  componentRef.location.nativeElement.classList.add('valtimo-widget-wizard-step');
2489
2689
  this.cdr.detectChanges();
2490
2690
  }
2491
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWizardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.KeyGeneratorService }, { token: i2$2.TranslateService }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
2492
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementWizardComponent, isStandalone: true, selector: "valtimo-widget-management-wizard", inputs: { open: "open", disableDuplicate: "disableDuplicate", editMode: "editMode" }, outputs: { closeEvent: "closeEvent" }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["wizardStepRenderer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-modal\n [open]=\"open\"\n showFooter=\"true\"\n size=\"lg\"\n valtimoCdsModal\n class=\"valtimo-widget-management-wizard\"\n (close)=\"onClose()\"\n>\n <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n <h3 cdsModalHeaderHeading>\n {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n </h3>\n </cds-modal-header>\n\n <section cdsModalContent class=\"valtimo-widget-management-wizard__content\">\n <cds-progress-indicator\n [current]=\"$currentStepIndex()\"\n [spacing]=\"'equal'\"\n [steps]=\"steps$ | async\"\n (stepSelected)=\"onStepSelected($event)\"\n >\n </cds-progress-indicator>\n\n <p>{{ stepLabel$ | async }}</p>\n\n <ng-template #wizardStepRenderer></ng-template>\n </section>\n\n <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n {{ 'interface.cancel' | translate }}\n </button>\n\n @if ($currentStepIndex() !== 0) {\n <button\n class=\"valtimo-widget-management-wizard__back\"\n cdsButton=\"secondary\"\n [disabled]=\"$backButtonDisabled()\"\n (click)=\"onBackButtonClick()\"\n >\n {{ 'interface.back' | translate }}\n </button>\n }\n\n <button\n class=\"valtimo-widget-management-wizard__next\"\n cdsButton=\"primary\"\n [disabled]=\"$nextButtonDisabled()\"\n (click)=\"onNextButtonClick()\"\n >\n {{\n 'interface.' + ($currentStepIndex() === $numberOfSteps() - 1 ? 'save' : 'next') | translate\n }}\n </button>\n </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "component", type: i3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2691
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWizardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.KeyGeneratorService }, { token: i2$1.TranslateService }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
2692
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementWizardComponent, isStandalone: true, selector: "valtimo-widget-management-wizard", inputs: { open: "open", disableDuplicate: "disableDuplicate", editMode: "editMode" }, outputs: { closeEvent: "closeEvent" }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["wizardStepRenderer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-modal\n [open]=\"open\"\n showFooter=\"true\"\n size=\"lg\"\n valtimoCdsModal\n class=\"valtimo-widget-management-wizard\"\n (close)=\"onClose()\"\n>\n <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n <h3 cdsModalHeaderHeading>\n {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n </h3>\n </cds-modal-header>\n\n <section cdsModalContent class=\"valtimo-widget-management-wizard__content\">\n <cds-progress-indicator\n [current]=\"$currentStepIndex()\"\n [spacing]=\"'equal'\"\n [steps]=\"steps$ | async\"\n (stepSelected)=\"onStepSelected($event)\"\n >\n </cds-progress-indicator>\n\n <p>{{ stepLabel$ | async }}</p>\n\n <ng-template #wizardStepRenderer></ng-template>\n </section>\n\n <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n {{ 'interface.cancel' | translate }}\n </button>\n\n @if ($currentStepIndex() !== 0) {\n <button\n class=\"valtimo-widget-management-wizard__back\"\n cdsButton=\"secondary\"\n [disabled]=\"$backButtonDisabled()\"\n (click)=\"onBackButtonClick()\"\n >\n {{ 'interface.back' | translate }}\n </button>\n }\n\n <button\n class=\"valtimo-widget-management-wizard__next\"\n cdsButton=\"primary\"\n [disabled]=\"$nextButtonDisabled()\"\n (click)=\"onNextButtonClick()\"\n >\n {{\n 'interface.' + ($currentStepIndex() === $numberOfSteps() - 1 ? 'save' : 'next') | translate\n }}\n </button>\n </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "component", type: i3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2493
2693
  }
2494
2694
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWizardComponent, decorators: [{
2495
2695
  type: Component,
@@ -2501,7 +2701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
2501
2701
  ButtonModule,
2502
2702
  ...WIDGET_STEPS,
2503
2703
  ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-modal\n [open]=\"open\"\n showFooter=\"true\"\n size=\"lg\"\n valtimoCdsModal\n class=\"valtimo-widget-management-wizard\"\n (close)=\"onClose()\"\n>\n <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n <h3 cdsModalHeaderHeading>\n {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n </h3>\n </cds-modal-header>\n\n <section cdsModalContent class=\"valtimo-widget-management-wizard__content\">\n <cds-progress-indicator\n [current]=\"$currentStepIndex()\"\n [spacing]=\"'equal'\"\n [steps]=\"steps$ | async\"\n (stepSelected)=\"onStepSelected($event)\"\n >\n </cds-progress-indicator>\n\n <p>{{ stepLabel$ | async }}</p>\n\n <ng-template #wizardStepRenderer></ng-template>\n </section>\n\n <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n {{ 'interface.cancel' | translate }}\n </button>\n\n @if ($currentStepIndex() !== 0) {\n <button\n class=\"valtimo-widget-management-wizard__back\"\n cdsButton=\"secondary\"\n [disabled]=\"$backButtonDisabled()\"\n (click)=\"onBackButtonClick()\"\n >\n {{ 'interface.back' | translate }}\n </button>\n }\n\n <button\n class=\"valtimo-widget-management-wizard__next\"\n cdsButton=\"primary\"\n [disabled]=\"$nextButtonDisabled()\"\n (click)=\"onNextButtonClick()\"\n >\n {{\n 'interface.' + ($currentStepIndex() === $numberOfSteps() - 1 ? 'save' : 'next') | translate\n }}\n </button>\n </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
2504
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.KeyGeneratorService }, { type: i2$2.TranslateService }, { type: WidgetWizardService }], propDecorators: { _vcr: [{
2704
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.KeyGeneratorService }, { type: i2$1.TranslateService }, { type: WidgetWizardService }], propDecorators: { _vcr: [{
2505
2705
  type: ViewChild,
2506
2706
  args: ['wizardStepRenderer', { read: ViewContainerRef }]
2507
2707
  }], open: [{
@@ -2655,6 +2855,7 @@ class WidgetManagementEditorComponent {
2655
2855
  return;
2656
2856
  }
2657
2857
  this.widgetWizardService.$widgetTitle.set(widget.title);
2858
+ this.widgetWizardService.$widgetIcon.set(widget.icon);
2658
2859
  this.widgetWizardService.$widgetStyle.set(widget.highContrast ? WidgetStyle.HIGH_CONTRAST : WidgetStyle.DEFAULT);
2659
2860
  this.widgetWizardService.$widgetWidth.set(widget.width || this.widgetWizardService.defaultWidth);
2660
2861
  this.widgetWizardService.$selectedWidget.set(AVAILABLE_WIDGETS.find(available => available.type === widget.type) ?? null);
@@ -2738,8 +2939,8 @@ class WidgetManagementEditorComponent {
2738
2939
  return '-';
2739
2940
  }
2740
2941
  }
2741
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementEditorComponent, deps: [{ token: i3.IconService }, { token: i2$2.TranslateService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
2742
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementEditorComponent, isStandalone: true, selector: "valtimo-widget-management-editor", inputs: { enableWidgetDivider: "enableWidgetDivider", params: "params", availableWidgetTypes: "availableWidgetTypes", disableDuplicate: "disableDuplicate", singleWidget: "singleWidget", defaultWidth: "defaultWidth" }, 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<valtimo-carbon-list\n [actionItems]=\"actionItems$ | async\"\n [fields]=\"fields$ | async\"\n [header]=\"false\"\n [items]=\"widgets$ | async\"\n [dragAndDrop]=\"!(singleWidget$ | async)\"\n [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n [loading]=\"loading$ | async\"\n (itemsReordered)=\"onItemsReordered($event)\"\n (rowClicked)=\"editWidget($event)\"\n>\n <ng-container carbonToolbarContent>\n <button *ngIf=\"enableWidgetDivider\" cdsButton=\"ghost\" (click)=\"openAddDividerModal()\">\n {{ 'widgetTabManagement.list.addDivider' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"drag--vertical\" size=\"16\"></svg>\n </button>\n\n <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n </ng-container>\n\n <valtimo-no-results\n [action]=\"addWidgetButton\"\n [description]=\"\n ((singleWidget$ | async)\n ? 'widgetTabManagement.list.noResultsSingle.description'\n : 'widgetTabManagement.list.noResults.description'\n ) | translate\n \"\n [title]=\"\n ((singleWidget$ | async)\n ? 'widgetTabManagement.list.noResultsSingle.title'\n : 'widgetTabManagement.list.noResults.title'\n ) | translate\n \"\n ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n <button\n cdsButton=\"primary\"\n (click)=\"openAddModal()\"\n [disabled]=\"(singleWidget$ | async) && ((widgets$ | async) || []).length === 1\"\n >\n {{ 'widgetTabManagement.list.add' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<valtimo-widget-management-divider-modal\n [open]=\"$isDividerModalOpen()\"\n [modalMode]=\"$dividerModalMode()\"\n [prefillData]=\"dividerDefinition$ | async\"\n [usedKeys]=\"usedKeys$ | async\"\n (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-divider-modal>\n\n<valtimo-widget-management-wizard\n [editMode]=\"$isEditMode()\"\n [open]=\"$isWizardOpen()\"\n [disableDuplicate]=\"disableDuplicate$ | async\"\n (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-wizard>\n\n<valtimo-confirmation-modal\n confirmButtonTextTranslationKey=\"interface.delete\"\n confirmButtonType=\"danger\"\n contentTranslationKey=\"Are you sure you want to delete this widget?\"\n [outputOnConfirm]=\"$deleteWidget()\"\n [showModalSubject$]=\"deleteModalOpen$\"\n titleTranslationKey=\"interface.delete\"\n (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: 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: TabsModule }, { kind: "component", type: WidgetManagementWizardComponent, selector: "valtimo-widget-management-wizard", inputs: ["open", "disableDuplicate", "editMode"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: WidgetManagementDividerModalComponent, selector: "valtimo-widget-management-divider-modal", inputs: ["modalMode", "open", "widgets", "usedKeys", "prefillData"], outputs: ["closeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2942
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementEditorComponent, deps: [{ token: i3.IconService }, { token: i2$1.TranslateService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
2943
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementEditorComponent, isStandalone: true, selector: "valtimo-widget-management-editor", inputs: { enableWidgetDivider: "enableWidgetDivider", params: "params", availableWidgetTypes: "availableWidgetTypes", disableDuplicate: "disableDuplicate", singleWidget: "singleWidget", defaultWidth: "defaultWidth" }, 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<valtimo-carbon-list\n [actionItems]=\"actionItems$ | async\"\n [fields]=\"fields$ | async\"\n [header]=\"false\"\n [items]=\"widgets$ | async\"\n [dragAndDrop]=\"!(singleWidget$ | async)\"\n [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n [loading]=\"loading$ | async\"\n (itemsReordered)=\"onItemsReordered($event)\"\n (rowClicked)=\"editWidget($event)\"\n>\n <ng-container carbonToolbarContent>\n <button *ngIf=\"enableWidgetDivider\" cdsButton=\"ghost\" (click)=\"openAddDividerModal()\">\n {{ 'widgetTabManagement.list.addDivider' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"drag--vertical\" size=\"16\"></svg>\n </button>\n\n <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n </ng-container>\n\n <valtimo-no-results\n [action]=\"addWidgetButton\"\n [description]=\"\n ((singleWidget$ | async)\n ? 'widgetTabManagement.list.noResultsSingle.description'\n : 'widgetTabManagement.list.noResults.description'\n ) | translate\n \"\n [title]=\"\n ((singleWidget$ | async)\n ? 'widgetTabManagement.list.noResultsSingle.title'\n : 'widgetTabManagement.list.noResults.title'\n ) | translate\n \"\n ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n <button\n cdsButton=\"primary\"\n (click)=\"openAddModal()\"\n [disabled]=\"(singleWidget$ | async) && ((widgets$ | async) || []).length === 1\"\n >\n {{ 'widgetTabManagement.list.add' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<valtimo-widget-management-divider-modal\n [open]=\"$isDividerModalOpen()\"\n [modalMode]=\"$dividerModalMode()\"\n [prefillData]=\"dividerDefinition$ | async\"\n [usedKeys]=\"usedKeys$ | async\"\n (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-divider-modal>\n\n<valtimo-widget-management-wizard\n [editMode]=\"$isEditMode()\"\n [open]=\"$isWizardOpen()\"\n [disableDuplicate]=\"disableDuplicate$ | async\"\n (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-wizard>\n\n<valtimo-confirmation-modal\n confirmButtonTextTranslationKey=\"interface.delete\"\n confirmButtonType=\"danger\"\n contentTranslationKey=\"Are you sure you want to delete this widget?\"\n [outputOnConfirm]=\"$deleteWidget()\"\n [showModalSubject$]=\"deleteModalOpen$\"\n titleTranslationKey=\"interface.delete\"\n (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: 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: TabsModule }, { kind: "component", type: WidgetManagementWizardComponent, selector: "valtimo-widget-management-wizard", inputs: ["open", "disableDuplicate", "editMode"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: WidgetManagementDividerModalComponent, selector: "valtimo-widget-management-divider-modal", inputs: ["modalMode", "open", "widgets", "usedKeys", "prefillData"], outputs: ["closeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2743
2944
  }
2744
2945
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementEditorComponent, decorators: [{
2745
2946
  type: Component,
@@ -2754,7 +2955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
2754
2955
  ConfirmationModalModule,
2755
2956
  WidgetManagementDividerModalComponent,
2756
2957
  ], 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<valtimo-carbon-list\n [actionItems]=\"actionItems$ | async\"\n [fields]=\"fields$ | async\"\n [header]=\"false\"\n [items]=\"widgets$ | async\"\n [dragAndDrop]=\"!(singleWidget$ | async)\"\n [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n [loading]=\"loading$ | async\"\n (itemsReordered)=\"onItemsReordered($event)\"\n (rowClicked)=\"editWidget($event)\"\n>\n <ng-container carbonToolbarContent>\n <button *ngIf=\"enableWidgetDivider\" cdsButton=\"ghost\" (click)=\"openAddDividerModal()\">\n {{ 'widgetTabManagement.list.addDivider' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"drag--vertical\" size=\"16\"></svg>\n </button>\n\n <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n </ng-container>\n\n <valtimo-no-results\n [action]=\"addWidgetButton\"\n [description]=\"\n ((singleWidget$ | async)\n ? 'widgetTabManagement.list.noResultsSingle.description'\n : 'widgetTabManagement.list.noResults.description'\n ) | translate\n \"\n [title]=\"\n ((singleWidget$ | async)\n ? 'widgetTabManagement.list.noResultsSingle.title'\n : 'widgetTabManagement.list.noResults.title'\n ) | translate\n \"\n ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n <button\n cdsButton=\"primary\"\n (click)=\"openAddModal()\"\n [disabled]=\"(singleWidget$ | async) && ((widgets$ | async) || []).length === 1\"\n >\n {{ 'widgetTabManagement.list.add' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<valtimo-widget-management-divider-modal\n [open]=\"$isDividerModalOpen()\"\n [modalMode]=\"$dividerModalMode()\"\n [prefillData]=\"dividerDefinition$ | async\"\n [usedKeys]=\"usedKeys$ | async\"\n (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-divider-modal>\n\n<valtimo-widget-management-wizard\n [editMode]=\"$isEditMode()\"\n [open]=\"$isWizardOpen()\"\n [disableDuplicate]=\"disableDuplicate$ | async\"\n (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-wizard>\n\n<valtimo-confirmation-modal\n confirmButtonTextTranslationKey=\"interface.delete\"\n confirmButtonType=\"danger\"\n contentTranslationKey=\"Are you sure you want to delete this widget?\"\n [outputOnConfirm]=\"$deleteWidget()\"\n [showModalSubject$]=\"deleteModalOpen$\"\n titleTranslationKey=\"interface.delete\"\n (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n" }]
2757
- }], ctorParameters: () => [{ type: i3.IconService }, { type: i2$2.TranslateService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
2958
+ }], ctorParameters: () => [{ type: i3.IconService }, { type: i2$1.TranslateService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
2758
2959
  type: Inject,
2759
2960
  args: [WIDGET_MANAGEMENT_SERVICE]
2760
2961
  }] }], propDecorators: { enableWidgetDivider: [{
@@ -2820,7 +3021,7 @@ class WidgetManagementComponent {
2820
3021
  this.$activeTab.set(tab);
2821
3022
  }
2822
3023
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementComponent, deps: [{ token: WIDGET_MANAGEMENT_SERVICE }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
2823
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementComponent, isStandalone: true, selector: "valtimo-widget-management", inputs: { params: "params", availableWidgetTypes: "availableWidgetTypes", disableDuplicate: "disableDuplicate", enableWidgetDivider: "enableWidgetDivider", singleWidget: "singleWidget", disableJsonEditor: "disableJsonEditor", defaultWidth: "defaultWidth", widgetWizardSteps: "widgetWizardSteps" }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n@if (!disableJsonEditor) {\n <cds-tabs type=\"contained\">\n <cds-tab\n [heading]=\"'interface.editor.visualEditor' | translate\"\n (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n >\n <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n </cds-tab>\n\n <cds-tab\n [heading]=\"'interface.editor.jsonEditor' | translate\"\n (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n >\n <valtimo-json-editor\n *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n [model]=\"jsonModel$ | async\"\n [fitPage]=\"true\"\n [fitPageExtraSpace]=\"136\"\n (saveEvent)=\"onSaveEvent($event)\"\n ></valtimo-json-editor>\n </cds-tab>\n </cds-tabs>\n} @else {\n <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n}\n\n<ng-template #widgetEditor>\n <valtimo-widget-management-editor\n *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n [availableWidgetTypes]=\"availableWidgetTypes\"\n [disableDuplicate]=\"disableDuplicate\"\n [enableWidgetDivider]=\"enableWidgetDivider\"\n [singleWidget]=\"singleWidget\"\n [defaultWidth]=\"defaultWidth\"\n ></valtimo-widget-management-editor>\n</ng-template>\n", styles: ["::ng-deep .cds--tab-content{padding:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetManagementEditorComponent, selector: "valtimo-widget-management-editor", inputs: ["enableWidgetDivider", "params", "availableWidgetTypes", "disableDuplicate", "singleWidget", "defaultWidth"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "fitPageExtraSpace", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3024
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementComponent, isStandalone: true, selector: "valtimo-widget-management", inputs: { params: "params", availableWidgetTypes: "availableWidgetTypes", disableDuplicate: "disableDuplicate", enableWidgetDivider: "enableWidgetDivider", singleWidget: "singleWidget", disableJsonEditor: "disableJsonEditor", defaultWidth: "defaultWidth", widgetWizardSteps: "widgetWizardSteps" }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n@if (!disableJsonEditor) {\n <cds-tabs type=\"contained\">\n <cds-tab\n [heading]=\"'interface.editor.visualEditor' | translate\"\n (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n >\n <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n </cds-tab>\n\n <cds-tab\n [heading]=\"'interface.editor.jsonEditor' | translate\"\n (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n >\n <valtimo-json-editor\n *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n [model]=\"jsonModel$ | async\"\n [fitPage]=\"true\"\n [fitPageSpaceAdjustment]=\"136\"\n (saveEvent)=\"onSaveEvent($event)\"\n ></valtimo-json-editor>\n </cds-tab>\n </cds-tabs>\n} @else {\n <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n}\n\n<ng-template #widgetEditor>\n <valtimo-widget-management-editor\n *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n [availableWidgetTypes]=\"availableWidgetTypes\"\n [disableDuplicate]=\"disableDuplicate\"\n [enableWidgetDivider]=\"enableWidgetDivider\"\n [singleWidget]=\"singleWidget\"\n [defaultWidth]=\"defaultWidth\"\n ></valtimo-widget-management-editor>\n</ng-template>\n", styles: ["::ng-deep .cds--tab-content{padding:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetManagementEditorComponent, selector: "valtimo-widget-management-editor", inputs: ["enableWidgetDivider", "params", "availableWidgetTypes", "disableDuplicate", "singleWidget", "defaultWidth"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "fitPageSpaceAdjustment", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2824
3025
  }
2825
3026
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementComponent, decorators: [{
2826
3027
  type: Component,
@@ -2830,7 +3031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
2830
3031
  TabsModule,
2831
3032
  TranslateModule,
2832
3033
  JsonEditorComponent,
2833
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n@if (!disableJsonEditor) {\n <cds-tabs type=\"contained\">\n <cds-tab\n [heading]=\"'interface.editor.visualEditor' | translate\"\n (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n >\n <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n </cds-tab>\n\n <cds-tab\n [heading]=\"'interface.editor.jsonEditor' | translate\"\n (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n >\n <valtimo-json-editor\n *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n [model]=\"jsonModel$ | async\"\n [fitPage]=\"true\"\n [fitPageExtraSpace]=\"136\"\n (saveEvent)=\"onSaveEvent($event)\"\n ></valtimo-json-editor>\n </cds-tab>\n </cds-tabs>\n} @else {\n <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n}\n\n<ng-template #widgetEditor>\n <valtimo-widget-management-editor\n *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n [availableWidgetTypes]=\"availableWidgetTypes\"\n [disableDuplicate]=\"disableDuplicate\"\n [enableWidgetDivider]=\"enableWidgetDivider\"\n [singleWidget]=\"singleWidget\"\n [defaultWidth]=\"defaultWidth\"\n ></valtimo-widget-management-editor>\n</ng-template>\n", styles: ["::ng-deep .cds--tab-content{padding:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
3034
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n@if (!disableJsonEditor) {\n <cds-tabs type=\"contained\">\n <cds-tab\n [heading]=\"'interface.editor.visualEditor' | translate\"\n (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n >\n <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n </cds-tab>\n\n <cds-tab\n [heading]=\"'interface.editor.jsonEditor' | translate\"\n (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n >\n <valtimo-json-editor\n *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n [model]=\"jsonModel$ | async\"\n [fitPage]=\"true\"\n [fitPageSpaceAdjustment]=\"136\"\n (saveEvent)=\"onSaveEvent($event)\"\n ></valtimo-json-editor>\n </cds-tab>\n </cds-tabs>\n} @else {\n <ng-container *ngTemplateOutlet=\"widgetEditor\"></ng-container>\n}\n\n<ng-template #widgetEditor>\n <valtimo-widget-management-editor\n *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n [availableWidgetTypes]=\"availableWidgetTypes\"\n [disableDuplicate]=\"disableDuplicate\"\n [enableWidgetDivider]=\"enableWidgetDivider\"\n [singleWidget]=\"singleWidget\"\n [defaultWidth]=\"defaultWidth\"\n ></valtimo-widget-management-editor>\n</ng-template>\n", styles: ["::ng-deep .cds--tab-content{padding:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
2834
3035
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2835
3036
  type: Inject,
2836
3037
  args: [WIDGET_MANAGEMENT_SERVICE]
@@ -2868,6 +3069,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
2868
3069
  * limitations under the License.
2869
3070
  */
2870
3071
 
3072
+ /*
3073
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
3074
+ *
3075
+ * Licensed under EUPL, Version 1.2 (the "License");
3076
+ * you may not use this file except in compliance with the License.
3077
+ * You may obtain a copy of the License at
3078
+ *
3079
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
3080
+ *
3081
+ * Unless required by applicable law or agreed to in writing, software
3082
+ * distributed under the License is distributed on an "AS IS" basis,
3083
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3084
+ * See the License for the specific language governing permissions and
3085
+ * limitations under the License.
3086
+ */
3087
+ class WidgetMapComponent {
3088
+ constructor() {
3089
+ this.class = 'widget-map';
3090
+ this.isEmptyWidgetData$ = new BehaviorSubject(false);
3091
+ this.noVisibleMap$ = new BehaviorSubject(true);
3092
+ this.noVisibleMapEvent = new EventEmitter();
3093
+ this.widgetConfiguration$ = new BehaviorSubject(null);
3094
+ this.widgetData$ = new BehaviorSubject(null);
3095
+ }
3096
+ set widgetConfiguration(value) {
3097
+ if (!value)
3098
+ return;
3099
+ this.widgetConfiguration$.next(value);
3100
+ }
3101
+ set widgetData(value) {
3102
+ if (!value)
3103
+ return;
3104
+ this.widgetData$.next(value);
3105
+ this.isEmptyWidgetData$.next(this.checkEmptyWidgetData(value));
3106
+ }
3107
+ ngAfterViewInit() {
3108
+ if (this._widgetMapRef)
3109
+ this.openWidthObserver();
3110
+ this.subscribeMapData();
3111
+ }
3112
+ ngOnDestroy() {
3113
+ this._observer?.disconnect();
3114
+ }
3115
+ openWidthObserver() {
3116
+ this._observer = new ResizeObserver(() => this.fitMap(this.vectorLayer?.getSource()));
3117
+ this._observer.observe(this._widgetMapRef.nativeElement);
3118
+ }
3119
+ checkEmptyWidgetData(widgetData) {
3120
+ return widgetData && Object.keys(widgetData).length === 0;
3121
+ }
3122
+ subscribeMapData() {
3123
+ const fullscreen = new FullScreen();
3124
+ const zoomControl = new Zoom({});
3125
+ this.map = new Map({
3126
+ target: this._widgetMapRef.nativeElement,
3127
+ layers: [
3128
+ new TileLayer({
3129
+ source: new OSM(),
3130
+ }),
3131
+ ],
3132
+ view: new View({
3133
+ center: [0, 0],
3134
+ zoom: 2,
3135
+ }),
3136
+ controls: defaults({ zoom: false }).extend([fullscreen]),
3137
+ });
3138
+ this.map.getInteractions().forEach(i => i.setActive(false));
3139
+ fullscreen.on('enterfullscreen', () => {
3140
+ this.map.getInteractions().forEach(i => i.setActive(true));
3141
+ this.map.addControl(zoomControl);
3142
+ });
3143
+ fullscreen.on('leavefullscreen', () => {
3144
+ this.map.getInteractions().forEach(i => i.setActive(false));
3145
+ this.map.removeControl(zoomControl);
3146
+ });
3147
+ const featureOptions = {
3148
+ featureProjection: 'EPSG:3857',
3149
+ dataProjection: 'EPSG:4326',
3150
+ };
3151
+ const vectorStyle = new Style({
3152
+ image: new Icon({
3153
+ src: 'valtimo-layout/img/marker.svg',
3154
+ anchor: [0.5, 0.9],
3155
+ scale: 1,
3156
+ }),
3157
+ fill: new Fill({
3158
+ color: 'rgba(255,255,255,0.4)',
3159
+ }),
3160
+ stroke: new Stroke({
3161
+ color: '#3399CC',
3162
+ width: 2,
3163
+ }),
3164
+ });
3165
+ this.widgetData$.subscribe(widgetData => {
3166
+ if (!widgetData?.geoJsonFeatureCollection) {
3167
+ return;
3168
+ }
3169
+ const featureCollection = {
3170
+ ...widgetData?.geoJsonFeatureCollection,
3171
+ type: 'FeatureCollection',
3172
+ };
3173
+ if (this.vectorLayer) {
3174
+ this.map.removeLayer(this.vectorLayer);
3175
+ }
3176
+ const vectorSource = new VectorSource({
3177
+ features: new GeoJSON().readFeatures(featureCollection, featureOptions),
3178
+ });
3179
+ this.vectorLayer = new VectorLayer({
3180
+ source: vectorSource,
3181
+ style: vectorStyle,
3182
+ });
3183
+ this.map.addLayer(this.vectorLayer);
3184
+ this.fitMap(vectorSource);
3185
+ });
3186
+ }
3187
+ fitMap(vectorSource) {
3188
+ const extent = vectorSource?.getExtent();
3189
+ if (extent) {
3190
+ this.map.getView().fit(extent, {
3191
+ padding: [20, 20, 20, 20],
3192
+ maxZoom: 18,
3193
+ });
3194
+ }
3195
+ }
3196
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3197
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 @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 class=\"widget-map__render\" #widgetMap></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}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3198
+ }
3199
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetMapComponent, decorators: [{
3200
+ type: Component,
3201
+ args: [{ selector: 'valtimo-widget-map', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
3202
+ CommonModule,
3203
+ InputModule,
3204
+ TranslateModule,
3205
+ CarbonListModule,
3206
+ EllipsisPipe,
3207
+ ButtonModule,
3208
+ WidgetActionButtonComponent,
3209
+ ], 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 @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 class=\"widget-map__render\" #widgetMap></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}\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"] }]
3210
+ }], propDecorators: { class: [{
3211
+ type: HostBinding,
3212
+ args: ['class']
3213
+ }], _widgetMapRef: [{
3214
+ type: ViewChild,
3215
+ args: ['widgetMap']
3216
+ }], widgetConfiguration: [{
3217
+ type: Input
3218
+ }], widgetData: [{
3219
+ type: Input
3220
+ }], noVisibleMapEvent: [{
3221
+ type: Output
3222
+ }] } });
3223
+
3224
+ /*
3225
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
3226
+ *
3227
+ * Licensed under EUPL, Version 1.2 (the "License");
3228
+ * you may not use this file except in compliance with the License.
3229
+ * You may obtain a copy of the License at
3230
+ *
3231
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
3232
+ *
3233
+ * Unless required by applicable law or agreed to in writing, software
3234
+ * distributed under the License is distributed on an "AS IS" basis,
3235
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3236
+ * See the License for the specific language governing permissions and
3237
+ * limitations under the License.
3238
+ */
3239
+
2871
3240
  /*
2872
3241
  * Copyright 2015-2025 Ritense BV, the Netherlands.
2873
3242
  *
@@ -2908,6 +3277,7 @@ const DEFAULT_WIDGET_COMPONENT_MAP = {
2908
3277
  [WidgetType.TABLE]: WidgetTableComponent,
2909
3278
  [WidgetType.INTERACTIVE_TABLE]: WidgetInteractiveTableComponent,
2910
3279
  [WidgetType.FIELDS]: WidgetFieldComponent,
3280
+ [WidgetType.MAP]: WidgetMapComponent,
2911
3281
  };
2912
3282
 
2913
3283
  /*
@@ -3116,8 +3486,8 @@ class WidgetManagementFieldsColumnComponent {
3116
3486
  this.columnUpdateEvent.emit({ data: mappedRows, valid: this.formGroup.valid });
3117
3487
  }));
3118
3488
  }
3119
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsColumnComponent, deps: [{ token: i1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i2$4.FormBuilder }, { token: i3.IconService }, { token: i2$2.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
3120
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n<form\n *ngIf=\"{\n inputTheme: inputTheme$ | async,\n params: params$ | async,\n widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n } as data\"\n class=\"valtimo-widget-management-field-column\"\n [formGroup]=\"formGroup\"\n>\n <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n @for (formRow of formRows.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-field-column__item\"\n >\n <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n <div\n class=\"valtimo-widget-management-field-column__content\"\n [class.valtimo-widget-management-field-column__content--collection]=\"\n !!fieldWidthDropdown\n \"\n >\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n \"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n type=\"text\"\n formControlName=\"title\"\n />\n </cds-text-label>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(formRow, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <ng-container\n *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n ></ng-container>\n\n <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n \"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"content\"\n [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\n [parentItem]=\"selectedCollection\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n formControlName=\"content\"\n />\n }\n </cds-text-label>\n </div>\n\n <div class=\"valtimo-widget-management-field-column__options\">\n @switch (formRow.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.displayPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n @for (rowValue of formRow.get('values')?.controls; track $index) {\n <form\n [formGroup]=\"rowValue\"\n class=\"valtimo-widget-management-field-column__enum-form\"\n >\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumValueTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"data.inputTheme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.enumDisplay' | translate\n \"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-widget-management-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.LINK) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"linkText\"\n />\n </cds-text-label>\n }\n }\n\n <cds-text-label\n *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"ellipsisCharacterLimit\"\n />\n </cds-text-label>\n\n <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n </cds-checkbox>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ addTranslateKey | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n <div class=\"valtimo-widget-management-field-column__title\">\n {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formRows, index)\"\n class=\"valtimo-widget-management-field-column__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3489
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsColumnComponent, deps: [{ token: i1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormBuilder }, { token: i3.IconService }, { token: i2$1.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
3490
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n<form\n *ngIf=\"{\n inputTheme: inputTheme$ | async,\n params: params$ | async,\n widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n } as data\"\n class=\"valtimo-widget-management-field-column\"\n [formGroup]=\"formGroup\"\n>\n <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n @for (formRow of formRows.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-field-column__item\"\n >\n <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n <div\n class=\"valtimo-widget-management-field-column__content\"\n [class.valtimo-widget-management-field-column__content--collection]=\"\n !!fieldWidthDropdown\n \"\n >\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n \"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n type=\"text\"\n formControlName=\"title\"\n />\n </cds-text-label>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(formRow, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <ng-container\n *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n ></ng-container>\n\n <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n \"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"content\"\n [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\n [parentItem]=\"selectedCollection\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n formControlName=\"content\"\n />\n }\n </cds-text-label>\n </div>\n\n <div class=\"valtimo-widget-management-field-column__options\">\n @switch (formRow.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.displayPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n @for (rowValue of formRow.get('values')?.controls; track $index) {\n <form\n [formGroup]=\"rowValue\"\n class=\"valtimo-widget-management-field-column__enum-form\"\n >\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumValueTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"data.inputTheme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.enumDisplay' | translate\n \"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-widget-management-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.LINK) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"linkText\"\n />\n </cds-text-label>\n }\n }\n\n <cds-text-label\n *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"ellipsisCharacterLimit\"\n />\n </cds-text-label>\n\n <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n </cds-checkbox>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ addTranslateKey | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n <div class=\"valtimo-widget-management-field-column__title\">\n {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formRows, index)\"\n class=\"valtimo-widget-management-field-column__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3121
3491
  }
3122
3492
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsColumnComponent, decorators: [{
3123
3493
  type: Component,
@@ -3133,9 +3503,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3133
3503
  InputLabelModule,
3134
3504
  ValuePathSelectorComponent,
3135
3505
  CheckboxModule,
3136
- LayerModule
3506
+ LayerModule,
3137
3507
  ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n<form\n *ngIf=\"{\n inputTheme: inputTheme$ | async,\n params: params$ | async,\n widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n } as data\"\n class=\"valtimo-widget-management-field-column\"\n [formGroup]=\"formGroup\"\n>\n <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n @for (formRow of formRows.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-field-column__item\"\n >\n <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n <div\n class=\"valtimo-widget-management-field-column__content\"\n [class.valtimo-widget-management-field-column__content--collection]=\"\n !!fieldWidthDropdown\n \"\n >\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n \"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n type=\"text\"\n formControlName=\"title\"\n />\n </cds-text-label>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(formRow, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <ng-container\n *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n ></ng-container>\n\n <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n \"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"content\"\n [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\n [parentItem]=\"selectedCollection\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n formControlName=\"content\"\n />\n }\n </cds-text-label>\n </div>\n\n <div class=\"valtimo-widget-management-field-column__options\">\n @switch (formRow.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.displayPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n @for (rowValue of formRow.get('values')?.controls; track $index) {\n <form\n [formGroup]=\"rowValue\"\n class=\"valtimo-widget-management-field-column__enum-form\"\n >\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumValueTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"data.inputTheme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.enumDisplay' | translate\n \"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-widget-management-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.LINK) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"linkText\"\n />\n </cds-text-label>\n }\n }\n\n <cds-text-label\n *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"ellipsisCharacterLimit\"\n />\n </cds-text-label>\n\n <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n </cds-checkbox>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ addTranslateKey | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n <div class=\"valtimo-widget-management-field-column__title\">\n {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formRows, index)\"\n class=\"valtimo-widget-management-field-column__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
3138
- }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i0.ChangeDetectorRef }, { type: i2$4.FormBuilder }, { type: i3.IconService }, { type: i2$2.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
3508
+ }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormBuilder }, { type: i3.IconService }, { type: i2$1.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
3139
3509
  type: Inject,
3140
3510
  args: [WIDGET_MANAGEMENT_SERVICE]
3141
3511
  }] }], propDecorators: { class: [{
@@ -3179,6 +3549,7 @@ class WidgetManagementFieldsComponent {
3179
3549
  this.$showTitleInput = signal(true);
3180
3550
  this.form = this.fb.group({
3181
3551
  widgetTitle: this.fb.control(this.widgetWizardService.$widgetTitle(), Validators.required),
3552
+ widgetIcon: this.fb.control(this.widgetWizardService.$widgetIcon()),
3182
3553
  });
3183
3554
  this.$columns = signal([null]);
3184
3555
  this.$widgetContext = this.widgetWizardService.$widgetContext;
@@ -3197,6 +3568,7 @@ class WidgetManagementFieldsComponent {
3197
3568
  this._contentValid.set(false);
3198
3569
  this._subscriptions.add(this.form.valueChanges.pipe(debounceTime(100)).subscribe(formValue => {
3199
3570
  this.widgetWizardService.$widgetTitle.set(formValue.widgetTitle ?? '');
3571
+ this.widgetWizardService.$widgetIcon.set(formValue.widgetIcon ?? '');
3200
3572
  this.widgetWizardService.$widgetContentValid.set(this.form.valid && this._contentValid());
3201
3573
  }));
3202
3574
  const widgetContent = this.widgetWizardService.$widgetContent()
@@ -3266,8 +3638,8 @@ class WidgetManagementFieldsComponent {
3266
3638
  ctrl.updateValueAndValidity({ emitEvent: false });
3267
3639
  this.widgetWizardService.$widgetContentValid.set(this.form.valid && this._contentValid());
3268
3640
  }
3269
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsComponent, deps: [{ token: i2$4.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
3270
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementFieldsComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_tab", first: true, predicate: Tab, 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<form\n *ngIf=\"$showTitleInput()\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-fields__title-form\"\n>\n <cds-text-label class=\"valtimo-widget-management-fields__input\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<cds-tabs type=\"contained\">\n @for (column of $columns(); track $index) {\n <cds-tab\n [active]=\"activeTab() === $index\"\n [heading]=\"columnHeading\"\n [context]=\"{index: $index, count: $count}\"\n (selected)=\"onTabSelected($index)\"\n >\n <valtimo-widget-management-fields-column\n *ngIf=\"activeTab() === $index\"\n [isFieldWidget]=\"true\"\n [columnData]=\"$selectedWidgetContent()?.[$index]\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n ></valtimo-widget-management-fields-column>\n </cds-tab>\n }\n\n <cds-tab\n *ngIf=\"$columns().length < $widgetWidth\"\n [heading]=\"addColumn\"\n [id]=\"'addColumn'\"\n class=\"valtimo-widget-management-fields__add\"\n ></cds-tab>\n</cds-tabs>\n\n<ng-template #addColumn>\n <button\n cdsButton=\"ghost\"\n [iconOnly]=\"true\"\n (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n >\n <svg cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n <div class=\"valtimo-widget-management-fields__heading\">\n {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n <button\n cdsButton=\"ghost\"\n [disabled]=\"data.count === 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onDeleteColumnClick(data.index)\"\n >\n <svg cdsIcon=\"close\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer)}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { 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: TabsModule }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3641
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
3642
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementFieldsComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_tab", first: true, predicate: Tab, 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<form\n *ngIf=\"$showTitleInput()\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-fields__title-form\"\n>\n <cds-text-label class=\"valtimo-widget-management-fields__input\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\n\n<cds-tabs type=\"contained\">\n @for (column of $columns(); track $index) {\n <cds-tab\n [active]=\"activeTab() === $index\"\n [heading]=\"columnHeading\"\n [context]=\"{index: $index, count: $count}\"\n (selected)=\"onTabSelected($index)\"\n >\n <valtimo-widget-management-fields-column\n *ngIf=\"activeTab() === $index\"\n [isFieldWidget]=\"true\"\n [columnData]=\"$selectedWidgetContent()?.[$index]\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n ></valtimo-widget-management-fields-column>\n </cds-tab>\n }\n\n <cds-tab\n *ngIf=\"$columns().length < $widgetWidth\"\n [heading]=\"addColumn\"\n [id]=\"'addColumn'\"\n class=\"valtimo-widget-management-fields__add\"\n ></cds-tab>\n</cds-tabs>\n\n<ng-template #addColumn>\n <button\n cdsButton=\"ghost\"\n [iconOnly]=\"true\"\n (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n >\n <svg cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n <div class=\"valtimo-widget-management-fields__heading\">\n {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n <button\n cdsButton=\"ghost\"\n [disabled]=\"data.count === 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onDeleteColumnClick(data.index)\"\n >\n <svg cdsIcon=\"close\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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: TabsModule }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3271
3643
  }
3272
3644
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsComponent, decorators: [{
3273
3645
  type: Component,
@@ -3281,8 +3653,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3281
3653
  ButtonModule,
3282
3654
  WidgetManagementFieldsColumnComponent,
3283
3655
  InputLabelModule,
3284
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n *ngIf=\"$showTitleInput()\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-fields__title-form\"\n>\n <cds-text-label class=\"valtimo-widget-management-fields__input\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<cds-tabs type=\"contained\">\n @for (column of $columns(); track $index) {\n <cds-tab\n [active]=\"activeTab() === $index\"\n [heading]=\"columnHeading\"\n [context]=\"{index: $index, count: $count}\"\n (selected)=\"onTabSelected($index)\"\n >\n <valtimo-widget-management-fields-column\n *ngIf=\"activeTab() === $index\"\n [isFieldWidget]=\"true\"\n [columnData]=\"$selectedWidgetContent()?.[$index]\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n ></valtimo-widget-management-fields-column>\n </cds-tab>\n }\n\n <cds-tab\n *ngIf=\"$columns().length < $widgetWidth\"\n [heading]=\"addColumn\"\n [id]=\"'addColumn'\"\n class=\"valtimo-widget-management-fields__add\"\n ></cds-tab>\n</cds-tabs>\n\n<ng-template #addColumn>\n <button\n cdsButton=\"ghost\"\n [iconOnly]=\"true\"\n (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n >\n <svg cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n <div class=\"valtimo-widget-management-fields__heading\">\n {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n <button\n cdsButton=\"ghost\"\n [disabled]=\"data.count === 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onDeleteColumnClick(data.index)\"\n >\n <svg cdsIcon=\"close\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer)}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
3285
- }], ctorParameters: () => [{ type: i2$4.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
3656
+ MdiIconSelectorComponent,
3657
+ LayerModule,
3658
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n *ngIf=\"$showTitleInput()\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-fields__title-form\"\n>\n <cds-text-label class=\"valtimo-widget-management-fields__input\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\n\n<cds-tabs type=\"contained\">\n @for (column of $columns(); track $index) {\n <cds-tab\n [active]=\"activeTab() === $index\"\n [heading]=\"columnHeading\"\n [context]=\"{index: $index, count: $count}\"\n (selected)=\"onTabSelected($index)\"\n >\n <valtimo-widget-management-fields-column\n *ngIf=\"activeTab() === $index\"\n [isFieldWidget]=\"true\"\n [columnData]=\"$selectedWidgetContent()?.[$index]\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n ></valtimo-widget-management-fields-column>\n </cds-tab>\n }\n\n <cds-tab\n *ngIf=\"$columns().length < $widgetWidth\"\n [heading]=\"addColumn\"\n [id]=\"'addColumn'\"\n class=\"valtimo-widget-management-fields__add\"\n ></cds-tab>\n</cds-tabs>\n\n<ng-template #addColumn>\n <button\n cdsButton=\"ghost\"\n [iconOnly]=\"true\"\n (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n >\n <svg cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n <div class=\"valtimo-widget-management-fields__heading\">\n {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n <button\n cdsButton=\"ghost\"\n [disabled]=\"data.count === 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onDeleteColumnClick(data.index)\"\n >\n <svg cdsIcon=\"close\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
3659
+ }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
3286
3660
  type: HostBinding,
3287
3661
  args: ['class']
3288
3662
  }], _tab: [{
@@ -3316,6 +3690,7 @@ class WidgetManagementTableComponent {
3316
3690
  this.showFirstColumnOption = true;
3317
3691
  this.form = this.fb.group({
3318
3692
  title: this.fb.control(this.widgetWizardService.$widgetTitle() ?? '', Validators.required),
3693
+ widgetIcon: this.fb.control(this.widgetWizardService.$widgetIcon()),
3319
3694
  collection: this.fb.control(this.widgetWizardService.$widgetContent()?.collection ?? '', Validators.required),
3320
3695
  defaultPageSize: this.fb.control(this.widgetWizardService.$widgetContent()?.defaultPageSize ?? 5, Validators.required),
3321
3696
  });
@@ -3337,6 +3712,7 @@ class WidgetManagementTableComponent {
3337
3712
  ngOnInit() {
3338
3713
  this._subscriptions.add(this.form.valueChanges.pipe(debounceTime(500)).subscribe(value => {
3339
3714
  this.widgetWizardService.$widgetTitle.set(value?.title ?? '');
3715
+ this.widgetWizardService.$widgetIcon.set(value?.widgetIcon ?? '');
3340
3716
  this.widgetWizardService.$widgetContent.update((content) => ({
3341
3717
  ...content,
3342
3718
  collection: value?.collection || '',
@@ -3363,8 +3739,8 @@ class WidgetManagementTableComponent {
3363
3739
  onCollectionSelected(item) {
3364
3740
  this.selectedCollection$.next(item);
3365
3741
  }
3366
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementTableComponent, deps: [{ token: i1.CdsThemeService }, { token: i2$4.FormBuilder }, { token: i2$2.TranslateService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
3367
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementTableComponent, isStandalone: true, selector: "valtimo-widget-management-table", inputs: { showFirstColumnOption: "showFirstColumnOption" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-table__form\"\n>\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"obs.theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n type=\"text\"\n />\n }\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n [columnData]=\"$content()?.columns\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n <span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.options' | translate }}\n </span>\n\n <cds-toggle\n [checked]=\"$checked()\"\n [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n (checkedChange)=\"onCheckedChange($event)\"\n ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-table .cds--text-input,.valtimo-widget-management-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: LayerModule }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3742
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementTableComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i2$1.TranslateService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
3743
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementTableComponent, isStandalone: true, selector: "valtimo-widget-management-table", inputs: { showFirstColumnOption: "showFirstColumnOption" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-table__form\"\n>\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"obs.theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n type=\"text\"\n />\n }\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n [columnData]=\"$content()?.columns\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n <span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.options' | translate }}\n </span>\n\n <cds-toggle\n [checked]=\"$checked()\"\n [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n (checkedChange)=\"onCheckedChange($event)\"\n ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-table .cds--text-input,.valtimo-widget-management-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3368
3744
  }
3369
3745
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementTableComponent, decorators: [{
3370
3746
  type: Component,
@@ -3379,8 +3755,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3379
3755
  InputLabelModule,
3380
3756
  LayerModule,
3381
3757
  ValuePathSelectorComponent,
3382
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-table__form\"\n>\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"obs.theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n type=\"text\"\n />\n }\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n [columnData]=\"$content()?.columns\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n <span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.options' | translate }}\n </span>\n\n <cds-toggle\n [checked]=\"$checked()\"\n [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n (checkedChange)=\"onCheckedChange($event)\"\n ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-table .cds--text-input,.valtimo-widget-management-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
3383
- }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i2$4.FormBuilder }, { type: i2$2.TranslateService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
3758
+ MdiIconSelectorComponent,
3759
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-table__form\"\n>\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"obs.theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n type=\"text\"\n />\n }\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n [columnData]=\"$content()?.columns\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n <span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.options' | translate }}\n </span>\n\n <cds-toggle\n [checked]=\"$checked()\"\n [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n (checkedChange)=\"onCheckedChange($event)\"\n ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-table .cds--text-input,.valtimo-widget-management-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
3760
+ }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i2$1.TranslateService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
3384
3761
  type: Inject,
3385
3762
  args: [WIDGET_MANAGEMENT_SERVICE]
3386
3763
  }] }], propDecorators: { class: [{
@@ -3416,6 +3793,7 @@ class WidgetManagementCollectionComponent {
3416
3793
  this.class = 'valtimo-widget-management-collection';
3417
3794
  this.widgetForm = this.fb.group({
3418
3795
  title: this.fb.control(this.widgetWizardService.$widgetTitle() ?? '', Validators.required),
3796
+ widgetIcon: this.fb.control(this.widgetWizardService.$widgetIcon()),
3419
3797
  defaultPageSize: this.fb.control(this.widgetWizardService.$widgetContent()?.defaultPageSize ?? 5, Validators.required),
3420
3798
  collection: this.fb.control(this.widgetWizardService.$widgetContent()?.collection ?? '', Validators.required),
3421
3799
  });
@@ -3549,6 +3927,7 @@ class WidgetManagementCollectionComponent {
3549
3927
  openWidgetFormSubscription() {
3550
3928
  this._subscriptions.add(this.widgetForm.valueChanges.pipe(debounceTime(500)).subscribe(value => {
3551
3929
  this.widgetWizardService.$widgetTitle.set(value?.title ?? '');
3930
+ this.widgetWizardService.$widgetIcon.set(value?.widgetIcon ?? '');
3552
3931
  this.widgetWizardService.$widgetContent.update((content) => ({
3553
3932
  ...content,
3554
3933
  collection: value?.collection || '',
@@ -3581,8 +3960,8 @@ class WidgetManagementCollectionComponent {
3581
3960
  this.widgetWizardService.$widgetContentValid.set(this.widgetForm.valid && this.cardForm.valid && this._$contentValid());
3582
3961
  }));
3583
3962
  }
3584
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCollectionComponent, deps: [{ token: i1.CdsThemeService }, { token: i2$4.FormBuilder }, { token: i2$2.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
3585
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementCollectionComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"\n 'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n \"\n type=\"text\"\n />\n </cds-text-label>\n\n <div class=\"valtimo-widget-management-collection__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n type=\"text\"\n />\n }\n </div>\n </form>\n\n <ng-content></ng-content>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n </span>\n\n <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n <section class=\"valtimo-widget-management-collection__card-title\">\n <div class=\"valtimo-widget-management-collection__path-selector\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n >\n </v-input-label>\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"value\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [parentItem]=\"selectedCollection$ | async\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"value\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n />\n }\n </div>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"theme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(cardForm, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n </cds-dropdown>\n </section>\n\n <section class=\"valtimo-widget-management-collection__card-options\">\n @switch (cardForm.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n @for (rowValue of cardForm.get('values')?.controls; track $index) {\n <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"theme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n }\n </section>\n </form>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n </span>\n\n <valtimo-widget-management-fields-column\n [columnData]=\"$content()?.fields\"\n [fieldWidthDropdown]=\"fieldWidthDropdown\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n >\n </valtimo-widget-management-fields-column>\n\n <ng-template #fieldWidthDropdown let-index=\"index\">\n <cds-dropdown\n [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n (selected)=\"onWidthSelected($event, index)\"\n >\n <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n </cds-dropdown>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3963
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCollectionComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i2$1.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
3964
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementCollectionComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"\n 'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n \"\n type=\"text\"\n />\n </cds-text-label>\n\n <div class=\"valtimo-widget-management-collection__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n type=\"text\"\n />\n }\n </div>\n </form>\n\n <ng-content></ng-content>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n </span>\n\n <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n <section class=\"valtimo-widget-management-collection__card-title\">\n <div class=\"valtimo-widget-management-collection__path-selector\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n >\n </v-input-label>\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"value\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [parentItem]=\"selectedCollection$ | async\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"value\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n />\n }\n </div>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"theme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(cardForm, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n </cds-dropdown>\n </section>\n\n <section class=\"valtimo-widget-management-collection__card-options\">\n @switch (cardForm.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n @for (rowValue of cardForm.get('values')?.controls; track $index) {\n <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"theme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n }\n </section>\n </form>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n </span>\n\n <valtimo-widget-management-fields-column\n [columnData]=\"$content()?.fields\"\n [fieldWidthDropdown]=\"fieldWidthDropdown\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n >\n </valtimo-widget-management-fields-column>\n\n <ng-template #fieldWidthDropdown let-index=\"index\">\n <cds-dropdown\n [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n (selected)=\"onWidthSelected($event, index)\"\n >\n <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n </cds-dropdown>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3586
3965
  }
3587
3966
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCollectionComponent, decorators: [{
3588
3967
  type: Component,
@@ -3597,8 +3976,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3597
3976
  IconModule,
3598
3977
  InputLabelModule,
3599
3978
  ValuePathSelectorComponent,
3600
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"\n 'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n \"\n type=\"text\"\n />\n </cds-text-label>\n\n <div class=\"valtimo-widget-management-collection__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n type=\"text\"\n />\n }\n </div>\n </form>\n\n <ng-content></ng-content>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n </span>\n\n <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n <section class=\"valtimo-widget-management-collection__card-title\">\n <div class=\"valtimo-widget-management-collection__path-selector\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n >\n </v-input-label>\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"value\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [parentItem]=\"selectedCollection$ | async\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"value\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n />\n }\n </div>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"theme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(cardForm, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n </cds-dropdown>\n </section>\n\n <section class=\"valtimo-widget-management-collection__card-options\">\n @switch (cardForm.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n @for (rowValue of cardForm.get('values')?.controls; track $index) {\n <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"theme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n }\n </section>\n </form>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n </span>\n\n <valtimo-widget-management-fields-column\n [columnData]=\"$content()?.fields\"\n [fieldWidthDropdown]=\"fieldWidthDropdown\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n >\n </valtimo-widget-management-fields-column>\n\n <ng-template #fieldWidthDropdown let-index=\"index\">\n <cds-dropdown\n [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n (selected)=\"onWidthSelected($event, index)\"\n >\n <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n </cds-dropdown>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-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"] }]
3601
- }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i2$4.FormBuilder }, { type: i2$2.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
3979
+ MdiIconSelectorComponent,
3980
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"\n 'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n \"\n type=\"text\"\n />\n </cds-text-label>\n\n <div class=\"valtimo-widget-management-collection__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n type=\"text\"\n />\n }\n </div>\n </form>\n\n <ng-content></ng-content>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n </span>\n\n <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n <section class=\"valtimo-widget-management-collection__card-title\">\n <div class=\"valtimo-widget-management-collection__path-selector\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n >\n </v-input-label>\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"value\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [parentItem]=\"selectedCollection$ | async\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"value\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n />\n }\n </div>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"theme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(cardForm, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n </cds-dropdown>\n </section>\n\n <section class=\"valtimo-widget-management-collection__card-options\">\n @switch (cardForm.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n @for (rowValue of cardForm.get('values')?.controls; track $index) {\n <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"theme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n }\n </section>\n </form>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n </span>\n\n <valtimo-widget-management-fields-column\n [columnData]=\"$content()?.fields\"\n [fieldWidthDropdown]=\"fieldWidthDropdown\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n >\n </valtimo-widget-management-fields-column>\n\n <ng-template #fieldWidthDropdown let-index=\"index\">\n <cds-dropdown\n [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n (selected)=\"onWidthSelected($event, index)\"\n >\n <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n </cds-dropdown>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-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"] }]
3981
+ }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i2$1.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
3602
3982
  type: Inject,
3603
3983
  args: [WIDGET_MANAGEMENT_SERVICE]
3604
3984
  }] }], propDecorators: { class: [{
@@ -3625,6 +4005,9 @@ class WidgetManagementCustomComponent {
3625
4005
  get widgetTitle() {
3626
4006
  return this.form.get('widgetTitle');
3627
4007
  }
4008
+ get widgetIcon() {
4009
+ return this.form.get('widgetIcon');
4010
+ }
3628
4011
  constructor(customWidgetConfig, cdsThemeService, fb, widgetWizardService) {
3629
4012
  this.customWidgetConfig = customWidgetConfig;
3630
4013
  this.cdsThemeService = cdsThemeService;
@@ -3632,6 +4015,7 @@ class WidgetManagementCustomComponent {
3632
4015
  this.widgetWizardService = widgetWizardService;
3633
4016
  this.form = this.fb.group({
3634
4017
  widgetTitle: this.fb.control(this.widgetWizardService.$widgetTitle(), Validators.required),
4018
+ widgetIcon: this.fb.control(this.widgetWizardService.$widgetIcon()),
3635
4019
  });
3636
4020
  this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((theme) => theme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G90));
3637
4021
  this._selectedCustomComponentKey$ = new BehaviorSubject(null);
@@ -3654,6 +4038,7 @@ class WidgetManagementCustomComponent {
3654
4038
  }
3655
4039
  ngOnInit() {
3656
4040
  this.openTitleSubscription();
4041
+ this.openIconSubscription();
3657
4042
  this.prefill();
3658
4043
  }
3659
4044
  ngOnDestroy() {
@@ -3664,6 +4049,11 @@ class WidgetManagementCustomComponent {
3664
4049
  this.widgetWizardService.$widgetTitle.set(title);
3665
4050
  }));
3666
4051
  }
4052
+ openIconSubscription() {
4053
+ this._subscriptions.add(this.widgetIcon?.valueChanges.subscribe(icon => {
4054
+ this.widgetWizardService.$widgetIcon.set(icon);
4055
+ }));
4056
+ }
3667
4057
  prefill() {
3668
4058
  const componentKey = this.widgetWizardService.$widgetContent()
3669
4059
  ?.componentKey;
@@ -3672,8 +4062,8 @@ class WidgetManagementCustomComponent {
3672
4062
  this._selectedCustomComponentKey$.next(componentKey);
3673
4063
  this.widgetWizardService.$widgetContentValid.set(true);
3674
4064
  }
3675
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCustomComponent, deps: [{ token: CUSTOM_WIDGET_TOKEN, optional: true }, { token: i1.CdsThemeService }, { token: i2$4.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
3676
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementCustomComponent, 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<form\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <cds-text-label class=\"valtimo-widget-management-field__input\">\n {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { 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: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { 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 }); }
4065
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCustomComponent, deps: [{ token: CUSTOM_WIDGET_TOKEN, optional: true }, { token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
4066
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementCustomComponent, 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<form\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-widget-management-custom__title-container\">\n <cds-text-label\n class=\"valtimo-widget-management-fields__input valtimo-widget-management-custom__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}.valtimo-widget-management-custom__title-container{display:flex;gap:16px}.valtimo-widget-management-custom__title-input{max-width:300px}\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: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { 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: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3677
4067
  }
3678
4068
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCustomComponent, decorators: [{
3679
4069
  type: Component,
@@ -3684,13 +4074,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3684
4074
  ReactiveFormsModule,
3685
4075
  SelectModule,
3686
4076
  DropdownModule,
3687
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <cds-text-label class=\"valtimo-widget-management-field__input\">\n {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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"] }]
4077
+ LayerModule,
4078
+ MdiIconSelectorComponent,
4079
+ InputLabelModule,
4080
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-widget-management-custom__title-container\">\n <cds-text-label\n class=\"valtimo-widget-management-fields__input valtimo-widget-management-custom__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}.valtimo-widget-management-custom__title-container{display:flex;gap:16px}.valtimo-widget-management-custom__title-input{max-width:300px}\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"] }]
3688
4081
  }], ctorParameters: () => [{ type: undefined, decorators: [{
3689
4082
  type: Optional
3690
4083
  }, {
3691
4084
  type: Inject,
3692
4085
  args: [CUSTOM_WIDGET_TOKEN]
3693
- }] }, { type: i1.CdsThemeService }, { type: i2$4.FormBuilder }, { type: WidgetWizardService }] });
4086
+ }] }, { type: i1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: WidgetWizardService }] });
4087
+
4088
+ /*
4089
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
4090
+ *
4091
+ * Licensed under EUPL, Version 1.2 (the "License");
4092
+ * you may not use this file except in compliance with the License.
4093
+ * You may obtain a copy of the License at
4094
+ *
4095
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
4096
+ *
4097
+ * Unless required by applicable law or agreed to in writing, software
4098
+ * distributed under the License is distributed on an "AS IS" basis,
4099
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4100
+ * See the License for the specific language governing permissions and
4101
+ * limitations under the License.
4102
+ */
4103
+ class WidgetManagementMapComponent {
4104
+ get formGeoJsonSources() {
4105
+ if (!this.form.get('geoJsonSources'))
4106
+ return undefined;
4107
+ return this.form.get('geoJsonSources');
4108
+ }
4109
+ constructor(fb, widgetWizardService, cdsThemeService) {
4110
+ this.fb = fb;
4111
+ this.widgetWizardService = widgetWizardService;
4112
+ this.cdsThemeService = cdsThemeService;
4113
+ this.class = 'valtimo-widget-management-map';
4114
+ this.$showTitleInput = signal(true);
4115
+ this.form = this.fb.group({
4116
+ widgetTitle: this.fb.control(this.widgetWizardService.$widgetTitle(), Validators.required),
4117
+ geoJsonSources: this.fb.array([]),
4118
+ });
4119
+ this.$widgetContext = this.widgetWizardService.$widgetContext;
4120
+ this.$content = this.widgetWizardService
4121
+ .$widgetContent;
4122
+ this.inputTheme$ = this.cdsThemeService.currentTheme$;
4123
+ this._subscriptions = new Subscription();
4124
+ }
4125
+ ngOnInit() {
4126
+ this.widgetWizardService.$widgetContentValid.set(false);
4127
+ this.initForm();
4128
+ this._subscriptions.add(this.form.valueChanges.pipe(debounceTime(100)).subscribe(formValue => {
4129
+ this.widgetWizardService.$widgetTitle.set(formValue.widgetTitle ?? '');
4130
+ this.widgetWizardService.$widgetContentValid.set(this.form.valid);
4131
+ this.widgetWizardService.$widgetContent.set({ geoJsonSources: formValue.geoJsonSources });
4132
+ }));
4133
+ }
4134
+ ngOnDestroy() {
4135
+ this._subscriptions.unsubscribe();
4136
+ this.form.reset();
4137
+ this.widgetWizardService.$widgetContentValid.set(false);
4138
+ }
4139
+ initForm() {
4140
+ if (!this.$content()?.geoJsonSources) {
4141
+ this.addField();
4142
+ return;
4143
+ }
4144
+ const sourcesControl = this.form.get('geoJsonSources');
4145
+ if (!sourcesControl)
4146
+ return;
4147
+ this.$content().geoJsonSources.forEach((geoJsonSource) => {
4148
+ sourcesControl.push(this.getGeoJsonSourcesForm(geoJsonSource), { emitEvent: false });
4149
+ });
4150
+ this.widgetWizardService.$widgetContentValid.set(this.form.valid);
4151
+ }
4152
+ getGeoJsonSourcesForm(geoJsonSource) {
4153
+ return this.fb.group({
4154
+ key: this.fb.control(geoJsonSource.key, Validators.required),
4155
+ });
4156
+ }
4157
+ addField() {
4158
+ if (!this.formGeoJsonSources)
4159
+ return;
4160
+ this.formGeoJsonSources.push(this.fb.group({
4161
+ key: this.fb.control('', Validators.required),
4162
+ }));
4163
+ }
4164
+ onDeleteRowClick(event, formArray, index) {
4165
+ event.stopImmediatePropagation();
4166
+ if (!formArray)
4167
+ return;
4168
+ formArray.removeAt(index);
4169
+ }
4170
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementMapComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: i1.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
4171
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementMapComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n *ngIf=\"$showTitleInput()\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-map__title-form\"\n>\n <cds-text-label class=\"valtimo-widget-management-map__input\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<form\n class=\"valtimo-widget-management-map-layer\"\n [formGroup]=\"form\"\n>\n <cds-accordion formArrayName=\"geoJsonSources\" align=\"start\" size=\"sm\">\n @for (formGeoJsonSource of formGeoJsonSources.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{count: $count, index: $index, key: formGeoJsonSource.get('key')?.value}\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-map-layer__item\"\n >\n <form\n [formGroup]=\"formGeoJsonSource\"\n class=\"valtimo-widget-management-map-layer__container\"\n >\n <div class=\"valtimo-widget-management-map-layer__content\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.map.key' | translate\"\n [tooltip]=\"'widgetTabManagement.content.map.keyTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"inputTheme$ | async\"\n [placeholder]=\"'widgetTabManagement.content.map.keyPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ 'widgetTabManagement.content.map.add' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\">\n <div class=\"valtimo-widget-management-map-layer__title\">\n {{ 'widgetTabManagement.content.map.layerTitle' | translate: {layer: index + 1} }}\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formGeoJsonSources, index)\"\n class=\"valtimo-widget-management-map-layer__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-map{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-map__title-form{padding:8px 0 16px 16px;background:var(--cds-layer)}.valtimo-widget-management-map__input{max-width:288px}.valtimo-widget-management-map__input input{background:var(--cds-layer-02)}.valtimo-widget-management-map__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-map__delete-button.enum{align-self:flex-end}.valtimo-widget-management-map__heading{display:flex;align-items:center}.valtimo-widget-management-map .cds--tabs__nav-item{padding-right:0!important}.valtimo-widget-management-map-layer{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-map-layer__item,.valtimo-widget-management-map-layer__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-map-layer__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-map-layer__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-map-layer__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-map-layer__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-map-layer__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-map-layer__delete-button.enum{align-self:flex-end}.valtimo-widget-management-map-layer .cds--text-input,.valtimo-widget-management-map-layer .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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: TabsModule }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { 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: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { 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: 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: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4172
+ }
4173
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementMapComponent, decorators: [{
4174
+ type: Component,
4175
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
4176
+ CommonModule,
4177
+ TranslateModule,
4178
+ InputModule,
4179
+ TabsModule,
4180
+ IconModule,
4181
+ ReactiveFormsModule,
4182
+ ButtonModule,
4183
+ InputLabelModule,
4184
+ AccordionModule,
4185
+ LayerModule,
4186
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n *ngIf=\"$showTitleInput()\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-map__title-form\"\n>\n <cds-text-label class=\"valtimo-widget-management-map__input\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<form\n class=\"valtimo-widget-management-map-layer\"\n [formGroup]=\"form\"\n>\n <cds-accordion formArrayName=\"geoJsonSources\" align=\"start\" size=\"sm\">\n @for (formGeoJsonSource of formGeoJsonSources.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{count: $count, index: $index, key: formGeoJsonSource.get('key')?.value}\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-map-layer__item\"\n >\n <form\n [formGroup]=\"formGeoJsonSource\"\n class=\"valtimo-widget-management-map-layer__container\"\n >\n <div class=\"valtimo-widget-management-map-layer__content\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.map.key' | translate\"\n [tooltip]=\"'widgetTabManagement.content.map.keyTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"inputTheme$ | async\"\n [placeholder]=\"'widgetTabManagement.content.map.keyPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ 'widgetTabManagement.content.map.add' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\">\n <div class=\"valtimo-widget-management-map-layer__title\">\n {{ 'widgetTabManagement.content.map.layerTitle' | translate: {layer: index + 1} }}\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formGeoJsonSources, index)\"\n class=\"valtimo-widget-management-map-layer__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-map{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-map__title-form{padding:8px 0 16px 16px;background:var(--cds-layer)}.valtimo-widget-management-map__input{max-width:288px}.valtimo-widget-management-map__input input{background:var(--cds-layer-02)}.valtimo-widget-management-map__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-map__delete-button.enum{align-self:flex-end}.valtimo-widget-management-map__heading{display:flex;align-items:center}.valtimo-widget-management-map .cds--tabs__nav-item{padding-right:0!important}.valtimo-widget-management-map-layer{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-map-layer__item,.valtimo-widget-management-map-layer__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-map-layer__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-map-layer__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-map-layer__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-map-layer__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-map-layer__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-map-layer__delete-button.enum{align-self:flex-end}.valtimo-widget-management-map-layer .cds--text-input,.valtimo-widget-management-map-layer .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
4187
+ }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: WidgetWizardService }, { type: i1.CdsThemeService }], propDecorators: { class: [{
4188
+ type: HostBinding,
4189
+ args: ['class']
4190
+ }] } });
3694
4191
 
3695
4192
  /*
3696
4193
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -3748,10 +4245,12 @@ class WidgetManagementInteractiveTableComponent {
3748
4245
  });
3749
4246
  }
3750
4247
  ngOnInit() {
4248
+ this.widgetWizardService.$disableActionButton.set(true);
3751
4249
  this.openActionsSubscription();
3752
4250
  this.openDetailsSubscription();
3753
4251
  }
3754
4252
  ngOnDestroy() {
4253
+ this.widgetWizardService.$disableActionButton.set(false);
3755
4254
  this._subscriptions.unsubscribe();
3756
4255
  }
3757
4256
  onAddExternalLinkClick() {
@@ -3792,8 +4291,8 @@ class WidgetManagementInteractiveTableComponent {
3792
4291
  });
3793
4292
  }));
3794
4293
  }
3795
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementInteractiveTableComponent, deps: [{ token: i2$4.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
3796
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementInteractiveTableComponent, 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<valtimo-widget-management-table\n [showFirstColumnOption]=\"false\"\n>\n <ng-content></ng-content>\n\n <form [formGroup]=\"formGroup\" class=\"valtimo-widget-management-interactive-table__form\">\n <cds-checkbox formControlName=\"canStartCase\">\n {{ 'ikoManagement.canStartCase' | translate }}\n </cds-checkbox>\n\n <cds-text-label class=\"valtimo-widget-management-interactive-table__row-action\">\n {{ 'ikoManagement.rowAction' | translate }}\n\n <input\n formControlName=\"rowClickAction\"\n cdsText\n cdsLayer=\"1\"\n [placeholder]=\"'ikoManagement.rowAction' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n formControlName=\"actions\"\n [addRowText]=\"'Add external link' | translate\"\n [keyColumnTitle]=\"'interface.name' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'interface.url' | translate\"\n ></valtimo-carbon-multi-input>\n </form>\n</valtimo-widget-management-table>\n", styles: [".valtimo-widget-management-interactive-table__form,.valtimo-widget-management-interactive-table__form>div{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-interactive-table__external-links-row{display:grid;grid-template-columns:1fr 1fr 56px;gap:16px;align-items:self-end;padding:12px 16px 16px}.valtimo-widget-management-interactive-table valtimo-key-value{width:100%!important}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px}.valtimo-widget-management-interactive-table__row-action{padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .cds--text-input,.valtimo-widget-management-interactive-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetManagementTableComponent, selector: "valtimo-widget-management-table", inputs: ["showFirstColumnOption"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4294
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementInteractiveTableComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
4295
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementInteractiveTableComponent, 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<valtimo-widget-management-table [showFirstColumnOption]=\"false\">\n <ng-content></ng-content>\n\n <form [formGroup]=\"formGroup\" class=\"valtimo-widget-management-interactive-table__form\">\n <cds-checkbox formControlName=\"canStartCase\">\n {{ 'ikoManagement.canStartCase' | translate }}\n </cds-checkbox>\n\n <cds-text-label class=\"valtimo-widget-management-interactive-table__row-action\">\n {{ 'ikoManagement.rowAction' | translate }}\n\n <input\n formControlName=\"rowClickAction\"\n cdsText\n cdsLayer=\"1\"\n [placeholder]=\"'ikoManagement.rowAction' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n formControlName=\"actions\"\n [addRowText]=\"'Add external link' | translate\"\n [keyColumnTitle]=\"'interface.name' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'interface.url' | translate\"\n ></valtimo-carbon-multi-input>\n </form>\n</valtimo-widget-management-table>\n", styles: [".valtimo-widget-management-interactive-table__form,.valtimo-widget-management-interactive-table__form>div{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-interactive-table__external-links-row{display:grid;grid-template-columns:1fr 1fr 56px;gap:16px;align-items:self-end;padding:12px 16px 16px}.valtimo-widget-management-interactive-table valtimo-key-value{width:100%!important}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px}.valtimo-widget-management-interactive-table__row-action{padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .cds--text-input,.valtimo-widget-management-interactive-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "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: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetManagementTableComponent, selector: "valtimo-widget-management-table", inputs: ["showFirstColumnOption"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3797
4296
  }
3798
4297
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementInteractiveTableComponent, decorators: [{
3799
4298
  type: Component,
@@ -3808,8 +4307,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3808
4307
  CarbonMultiInputModule,
3809
4308
  InputModule,
3810
4309
  LayerModule,
3811
- ], 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<valtimo-widget-management-table\n [showFirstColumnOption]=\"false\"\n>\n <ng-content></ng-content>\n\n <form [formGroup]=\"formGroup\" class=\"valtimo-widget-management-interactive-table__form\">\n <cds-checkbox formControlName=\"canStartCase\">\n {{ 'ikoManagement.canStartCase' | translate }}\n </cds-checkbox>\n\n <cds-text-label class=\"valtimo-widget-management-interactive-table__row-action\">\n {{ 'ikoManagement.rowAction' | translate }}\n\n <input\n formControlName=\"rowClickAction\"\n cdsText\n cdsLayer=\"1\"\n [placeholder]=\"'ikoManagement.rowAction' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n formControlName=\"actions\"\n [addRowText]=\"'Add external link' | translate\"\n [keyColumnTitle]=\"'interface.name' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'interface.url' | translate\"\n ></valtimo-carbon-multi-input>\n </form>\n</valtimo-widget-management-table>\n", styles: [".valtimo-widget-management-interactive-table__form,.valtimo-widget-management-interactive-table__form>div{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-interactive-table__external-links-row{display:grid;grid-template-columns:1fr 1fr 56px;gap:16px;align-items:self-end;padding:12px 16px 16px}.valtimo-widget-management-interactive-table valtimo-key-value{width:100%!important}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px}.valtimo-widget-management-interactive-table__row-action{padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .cds--text-input,.valtimo-widget-management-interactive-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
3812
- }], ctorParameters: () => [{ type: i2$4.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
4310
+ ], 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<valtimo-widget-management-table [showFirstColumnOption]=\"false\">\n <ng-content></ng-content>\n\n <form [formGroup]=\"formGroup\" class=\"valtimo-widget-management-interactive-table__form\">\n <cds-checkbox formControlName=\"canStartCase\">\n {{ 'ikoManagement.canStartCase' | translate }}\n </cds-checkbox>\n\n <cds-text-label class=\"valtimo-widget-management-interactive-table__row-action\">\n {{ 'ikoManagement.rowAction' | translate }}\n\n <input\n formControlName=\"rowClickAction\"\n cdsText\n cdsLayer=\"1\"\n [placeholder]=\"'ikoManagement.rowAction' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n formControlName=\"actions\"\n [addRowText]=\"'Add external link' | translate\"\n [keyColumnTitle]=\"'interface.name' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'interface.url' | translate\"\n ></valtimo-carbon-multi-input>\n </form>\n</valtimo-widget-management-table>\n", styles: [".valtimo-widget-management-interactive-table__form,.valtimo-widget-management-interactive-table__form>div{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-interactive-table__external-links-row{display:grid;grid-template-columns:1fr 1fr 56px;gap:16px;align-items:self-end;padding:12px 16px 16px}.valtimo-widget-management-interactive-table valtimo-key-value{width:100%!important}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px}.valtimo-widget-management-interactive-table__row-action{padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .cds--text-input,.valtimo-widget-management-interactive-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
4311
+ }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
3813
4312
  type: HostBinding,
3814
4313
  args: ['class']
3815
4314
  }] } });
@@ -3833,6 +4332,9 @@ class WidgetManagementWidgetFormioComponent {
3833
4332
  get widgetTitle() {
3834
4333
  return this.form.get('widgetTitle');
3835
4334
  }
4335
+ get widgetIcon() {
4336
+ return this.form.get('widgetIcon');
4337
+ }
3836
4338
  constructor(cdsThemeService, fb, widgetWizardService, formService, widgetManagementService) {
3837
4339
  this.cdsThemeService = cdsThemeService;
3838
4340
  this.fb = fb;
@@ -3841,6 +4343,7 @@ class WidgetManagementWidgetFormioComponent {
3841
4343
  this.widgetManagementService = widgetManagementService;
3842
4344
  this.form = this.fb.group({
3843
4345
  widgetTitle: this.fb.control(this.widgetWizardService.$widgetTitle(), Validators.required),
4346
+ widgetIcon: this.fb.control(this.widgetWizardService.$widgetIcon(), Validators.required),
3844
4347
  });
3845
4348
  this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((theme) => theme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G90));
3846
4349
  this._selectedFormDefinitionId$ = new BehaviorSubject(null);
@@ -3867,6 +4370,7 @@ class WidgetManagementWidgetFormioComponent {
3867
4370
  ngOnInit() {
3868
4371
  this.fetchFormDefinition();
3869
4372
  this.openTitleSubscription();
4373
+ this.openIconSubscription();
3870
4374
  this.prefill();
3871
4375
  }
3872
4376
  ngOnDestroy() {
@@ -3877,6 +4381,11 @@ class WidgetManagementWidgetFormioComponent {
3877
4381
  this.widgetWizardService.$widgetTitle.set(title);
3878
4382
  }));
3879
4383
  }
4384
+ openIconSubscription() {
4385
+ this._subscriptions.add(this.widgetIcon?.valueChanges.subscribe(icon => {
4386
+ this.widgetWizardService.$widgetIcon.set(icon);
4387
+ }));
4388
+ }
3880
4389
  fetchFormDefinition() {
3881
4390
  this.widgetManagementService.params$.subscribe(params => {
3882
4391
  if (!params)
@@ -3896,8 +4405,8 @@ class WidgetManagementWidgetFormioComponent {
3896
4405
  this._selectedFormDefinitionId$.next(formDefinitionId);
3897
4406
  this.widgetWizardService.$widgetContentValid.set(true);
3898
4407
  }
3899
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWidgetFormioComponent, deps: [{ token: i1.CdsThemeService }, { token: i2$4.FormBuilder }, { token: WidgetWizardService }, { token: i1$1.FormService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
3900
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementWidgetFormioComponent, 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<form\n class=\"valtimo-case-management-widget-formio\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <cds-text-label class=\"valtimo-case-management-widget-field__input\">\n {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.formio.selectForm' | translate }}\n\n <cds-dropdown\n *ngIf=\"formListItems$ | async as formListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.formio.placeholder' | translate\"\n [disabled]=\"formListItems.length === 0\"\n [dropUp]=\"false\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"formListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-case-management-widget-formio{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-case-management-widget-formio ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { 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: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { 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 }); }
4408
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWidgetFormioComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: i1$2.FormService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
4409
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementWidgetFormioComponent, 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<form\n class=\"valtimo-case-management-widget-formio\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-case-management-widget-formio__title-container\">\n <cds-text-label\n class=\"valtimo-case-management-widget-field__input valtimo-case-management-widget-formio__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.formio.selectForm' | translate }}\n\n <cds-dropdown\n *ngIf=\"formListItems$ | async as formListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.formio.placeholder' | translate\"\n [disabled]=\"formListItems.length === 0\"\n [dropUp]=\"false\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"formListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-case-management-widget-formio{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-case-management-widget-formio__title-container{display:flex;gap:16px}.valtimo-case-management-widget-formio__title-input{max-width:300px}.valtimo-case-management-widget-formio ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-case-management-widget-formio ::ng-deep .cds--list-box,.valtimo-case-management-widget-formio ::ng-deep .cds--text-input{background:var(--cds-layer)}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { 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: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3901
4410
  }
3902
4411
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWidgetFormioComponent, decorators: [{
3903
4412
  type: Component,
@@ -3908,8 +4417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3908
4417
  ReactiveFormsModule,
3909
4418
  SelectModule,
3910
4419
  DropdownModule,
3911
- ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n class=\"valtimo-case-management-widget-formio\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <cds-text-label class=\"valtimo-case-management-widget-field__input\">\n {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.formio.selectForm' | translate }}\n\n <cds-dropdown\n *ngIf=\"formListItems$ | async as formListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.formio.placeholder' | translate\"\n [disabled]=\"formListItems.length === 0\"\n [dropUp]=\"false\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"formListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-case-management-widget-formio{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-case-management-widget-formio ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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"] }]
3912
- }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i2$4.FormBuilder }, { type: WidgetWizardService }, { type: i1$1.FormService }, { type: undefined, decorators: [{
4420
+ InputLabelModule,
4421
+ MdiIconSelectorComponent,
4422
+ LayerModule,
4423
+ ], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n class=\"valtimo-case-management-widget-formio\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-case-management-widget-formio__title-container\">\n <cds-text-label\n class=\"valtimo-case-management-widget-field__input valtimo-case-management-widget-formio__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.formio.selectForm' | translate }}\n\n <cds-dropdown\n *ngIf=\"formListItems$ | async as formListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.formio.placeholder' | translate\"\n [disabled]=\"formListItems.length === 0\"\n [dropUp]=\"false\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"formListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-case-management-widget-formio{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-case-management-widget-formio__title-container{display:flex;gap:16px}.valtimo-case-management-widget-formio__title-input{max-width:300px}.valtimo-case-management-widget-formio ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-case-management-widget-formio ::ng-deep .cds--list-box,.valtimo-case-management-widget-formio ::ng-deep .cds--text-input{background:var(--cds-layer)}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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"] }]
4424
+ }], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: WidgetWizardService }, { type: i1$2.FormService }, { type: undefined, decorators: [{
3913
4425
  type: Inject,
3914
4426
  args: [WIDGET_MANAGEMENT_SERVICE]
3915
4427
  }] }] });
@@ -3983,6 +4495,13 @@ const AVAILABLE_WIDGETS = [
3983
4495
  type: WidgetType.COLLECTION,
3984
4496
  component: WidgetManagementCollectionComponent,
3985
4497
  },
4498
+ {
4499
+ titleKey: 'widgetTabManagement.type.map.title',
4500
+ descriptionKey: 'widgetTabManagement.type.map.description',
4501
+ illustrationUrl: 'valtimo-layout/img/widget-management/types/map.svg',
4502
+ type: WidgetType.MAP,
4503
+ component: WidgetManagementMapComponent,
4504
+ },
3986
4505
  ];
3987
4506
  const WIDGET_WIDTH_LABELS = {
3988
4507
  1: 'widgetTabManagement.width.small.title',
@@ -4123,7 +4642,7 @@ class WidgetFieldsService {
4123
4642
  break;
4124
4643
  }
4125
4644
  }
4126
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldsService, deps: [{ token: i2$4.FormBuilder }, { token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
4645
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldsService, deps: [{ token: i1$3.FormBuilder }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
4127
4646
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldsService, providedIn: 'root' }); }
4128
4647
  }
4129
4648
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldsService, decorators: [{
@@ -4131,7 +4650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
4131
4650
  args: [{
4132
4651
  providedIn: 'root',
4133
4652
  }]
4134
- }], ctorParameters: () => [{ type: i2$4.FormBuilder }, { type: i2$2.TranslateService }] });
4653
+ }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$1.TranslateService }] });
4135
4654
 
4136
4655
  /*
4137
4656
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -4204,7 +4723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
4204
4723
  CommonModule,
4205
4724
  PromptModule,
4206
4725
  GlobalNotificationComponent,
4207
- PlaceholderModule
4726
+ PlaceholderModule,
4208
4727
  ],
4209
4728
  exports: [LayoutComponent],
4210
4729
  }]
@@ -4354,5 +4873,5 @@ class ManagementWidgetDetailsComponent {
4354
4873
  * Generated bundle index. Do not edit.
4355
4874
  */
4356
4875
 
4357
- export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_STYLE_LABELS, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetBlockComponent, WidgetCollectionComponent, WidgetContainerComponent, WidgetCustomComponent, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetStyle, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
4876
+ export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_STYLE_LABELS, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetContainerComponent, WidgetCustomComponent, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetStyle, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
4358
4877
  //# sourceMappingURL=valtimo-layout.mjs.map