@valtimo/components 11.1.5 → 11.2.1

package/fesm2022/valtimo-components.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Pipe, NgModule, RendererStyleFlags2, Injectable, Component, Input, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, ViewEncapsulation, HostListener, ChangeDetectionStrategy, Inject, ContentChildren, ViewChildren, inject, TemplateRef, ContentChild } from '@angular/core';
-import { combineLatest, map, BehaviorSubject, fromEvent, Subject, from, switchMap, Observable, timer, take as take$1, startWith, Subscription, of, debounceTime as debounceTime$1, filter as filter$1, first } from 'rxjs';
+import { combineLatest, map, BehaviorSubject, fromEvent, Subject, from, switchMap, Observable, timer, take as take$1, startWith, Subscription, debounceTime as debounceTime$1, of, filter as filter$1, first } from 'rxjs';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
 import { take, map as map$1, tap, debounceTime, filter, distinctUntilChanged, switchMap as switchMap$1, delay } from 'rxjs/operators';
@@ -15,7 +15,7 @@ import * as i1$3 from '@valtimo/choicefield';
 import User20 from '@carbon/icons/es/user/20';
 import * as i1$4 from 'keycloak-angular';
 import * as i2$2 from 'carbon-components-angular';
-import { UIShellModule, IconModule, LinkModule, DialogModule, GridModule, TabsModule, StructuredListModule, SelectModule as SelectModule$1, ToggleModule, TagModule, SkeletonModule, TableModel, Table, TableHeaderItem, TableItem, PaginationModule, TableModule as TableModule$1, ContentSwitcherModule, ButtonModule as ButtonModule$1, BreadcrumbModule, InputModule as InputModule$1, CheckboxModule, ComboBoxModule, DropdownModule, ModalButtonType, ModalModule as ModalModule$1, TilesModule, RadioModule as RadioModule$1, ModalService as ModalService$1 } from 'carbon-components-angular';
+import { UIShellModule, IconModule, LinkModule, DialogModule, GridModule, TabsModule, StructuredListModule, SelectModule as SelectModule$1, ToggleModule, TagModule, SkeletonModule, Table, TableHeaderItem, TableItem, TableModel, PaginationModule, TableModule as TableModule$1, ContentSwitcherModule, ButtonModule as ButtonModule$1, BreadcrumbModule, InputModule as InputModule$1, CheckboxModule, ComboBoxModule, DropdownModule, ModalButtonType, ModalModule as ModalModule$1, TilesModule, RadioModule as RadioModule$1, ModalService as ModalService$1 } from 'carbon-components-angular';
 import * as i5 from '@angular/platform-browser';
 import * as i1$5 from '@angular/router';
 import { RouterModule, NavigationEnd, NavigationStart, ResolveEnd } from '@angular/router';
@@ -27,17 +27,17 @@ import * as i3 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i2$4 from 'ngx-logger';
 import * as i8 from '@valtimo/security';
-import * as i4 from '@ng-bootstrap/ng-bootstrap';
+import * as i8$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i3$1 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
-import { SettingsView16 } from '@carbon/icons';
+import { ArrowDown16, ArrowUp16, SettingsView16 } from '@carbon/icons';
 import { get } from 'lodash';
 import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import heatmap from 'heatmap.js-fixed/build/heatmap.js';
 import * as i1$6 from '@valtimo/resource';
 import { S3Resource, ResourceModule } from '@valtimo/resource';
-import * as i8$1 from '@formio/angular';
+import * as i8$2 from '@formio/angular';
 import { Formio, Components, FormioModule, FormioAppConfig, createCustomFormioComponent, registerCustomFormioComponentWithClass, registerCustomFormioComponent } from '@formio/angular';
 import jwt_decode from 'jwt-decode';
 import Dropzone from 'dropzone';
@@ -46,7 +46,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$7 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i4$1 from 'carbon-components-angular/dropdown';
+import * as i4 from 'carbon-components-angular/dropdown';
 import flatpickr from 'flatpickr';
 import { Dutch } from 'flatpickr/dist/l10n/nl';
 import { German } from 'flatpickr/dist/l10n/de';
@@ -133,6 +133,11 @@ var ViewType;
     ViewType["TEXT"] = "text";
     ViewType["UNDERSCORES_TO_SPACES"] = "underscoresToSpaces";
 })(ViewType || (ViewType = {}));
+var MoveRowDirection;
+(function (MoveRowDirection) {
+    MoveRowDirection["UP"] = "UP";
+    MoveRowDirection["DOWN"] = "DOWN";
+})(MoveRowDirection || (MoveRowDirection = {}));
 const DEFAULT_LIST_TRANSLATIONS = {
     select: { single: 'interface.list.singleSelect', multiple: 'interface.list.multipleSelect' },
     pagination: {
@@ -2577,11 +2582,11 @@ class MenuItemTextComponent {
         this.openInNewTab.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem", accent: "accent", showOverFlowMenu: "showOverFlowMenu" }, outputs: { overflowMenuClosed: "overflowMenuClosed", openInNewTab: "openInNewTab" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{titleTranslation: menuItem | menuItemTranslate | async} as obs\"\n  class=\"menu-item-text-container\"\n  id=\"{{menuItem?.id}}\"\n>\n  <span [ngClass]=\"{'cds--link empty-menu-icon-text': accent}\">\n    <div class=\"menu-item-icon-container\">\n      <i class=\"{{ menuItem.iconClass }}\"></i>\n    </div>\n\n    {{ obs.titleTranslation + (accent ? ' >' : '') }}\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"overflowTrigger\"></ng-container>\n\n  <cds-overflow-menu\n    [customTrigger]=\"overflowTrigger\"\n    [open]=\"showOverFlowMenu\"\n    [offset]=\"{x: 100, y: -25}\"\n    placement=\"bottom\"\n    wrapperClass=\"--hide-after --wide\"\n    (openChange)=\"onOpenChange($event)\"\n  >\n    <cds-overflow-menu-option (selected)=\"onSelectOpenInNewTab()\">{{\n      'interface.openInNewTab' | translate\n    }}</cds-overflow-menu-option>\n  </cds-overflow-menu>\n</div>\n\n<ng-template #overflowTrigger>\n  <div></div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.menu-item-text-container .menu-item-icon-container{position:absolute;margin-left:-.75rem;transform:translate(-100%)}.menu-item-text-container .empty-menu-icon-text{font-weight:600!important}.menu-item-text-container .cds--overflow-menu{visibility:hidden;height:0;width:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem", accent: "accent", showOverFlowMenu: "showOverFlowMenu" }, outputs: { overflowMenuClosed: "overflowMenuClosed", openInNewTab: "openInNewTab" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{titleTranslation: menuItem | menuItemTranslate | async} as obs\"\n  class=\"menu-item-text-container\"\n  id=\"{{ menuItem?.id }}\"\n>\n  <span *ngIf=\"obs.titleTranslation\" [ngClass]=\"{'cds--link empty-menu-icon-text': accent}\">\n    <div class=\"menu-item-icon-container\">\n      <i class=\"{{ menuItem.iconClass }}\"></i>\n    </div>\n\n    {{ obs.titleTranslation + (accent ? ' >' : '') }}\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"overflowTrigger\"></ng-container>\n\n  <cds-overflow-menu\n    [customTrigger]=\"overflowTrigger\"\n    [open]=\"showOverFlowMenu\"\n    [offset]=\"{x: 100, y: -25}\"\n    placement=\"bottom\"\n    wrapperClass=\"--hide-after --wide\"\n    (openChange)=\"onOpenChange($event)\"\n  >\n    <cds-overflow-menu-option (selected)=\"onSelectOpenInNewTab()\">{{\n      'interface.openInNewTab' | translate\n    }}</cds-overflow-menu-option>\n  </cds-overflow-menu>\n</div>\n\n<ng-template #overflowTrigger>\n  <div></div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.menu-item-text-container .menu-item-icon-container{position:absolute;margin-left:-.75rem;transform:translate(-100%)}.menu-item-text-container .empty-menu-icon-text{font-weight:600!important}.menu-item-text-container .cds--overflow-menu{visibility:hidden;height:0;width:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuItemTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-menu-item-text', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{titleTranslation: menuItem | menuItemTranslate | async} as obs\"\n  class=\"menu-item-text-container\"\n  id=\"{{menuItem?.id}}\"\n>\n  <span [ngClass]=\"{'cds--link empty-menu-icon-text': accent}\">\n    <div class=\"menu-item-icon-container\">\n      <i class=\"{{ menuItem.iconClass }}\"></i>\n    </div>\n\n    {{ obs.titleTranslation + (accent ? ' >' : '') }}\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"overflowTrigger\"></ng-container>\n\n  <cds-overflow-menu\n    [customTrigger]=\"overflowTrigger\"\n    [open]=\"showOverFlowMenu\"\n    [offset]=\"{x: 100, y: -25}\"\n    placement=\"bottom\"\n    wrapperClass=\"--hide-after --wide\"\n    (openChange)=\"onOpenChange($event)\"\n  >\n    <cds-overflow-menu-option (selected)=\"onSelectOpenInNewTab()\">{{\n      'interface.openInNewTab' | translate\n    }}</cds-overflow-menu-option>\n  </cds-overflow-menu>\n</div>\n\n<ng-template #overflowTrigger>\n  <div></div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.menu-item-text-container .menu-item-icon-container{position:absolute;margin-left:-.75rem;transform:translate(-100%)}.menu-item-text-container .empty-menu-icon-text{font-weight:600!important}.menu-item-text-container .cds--overflow-menu{visibility:hidden;height:0;width:0;position:absolute}\n"] }]
+            args: [{ selector: 'valtimo-menu-item-text', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{titleTranslation: menuItem | menuItemTranslate | async} as obs\"\n  class=\"menu-item-text-container\"\n  id=\"{{ menuItem?.id }}\"\n>\n  <span *ngIf=\"obs.titleTranslation\" [ngClass]=\"{'cds--link empty-menu-icon-text': accent}\">\n    <div class=\"menu-item-icon-container\">\n      <i class=\"{{ menuItem.iconClass }}\"></i>\n    </div>\n\n    {{ obs.titleTranslation + (accent ? ' >' : '') }}\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"overflowTrigger\"></ng-container>\n\n  <cds-overflow-menu\n    [customTrigger]=\"overflowTrigger\"\n    [open]=\"showOverFlowMenu\"\n    [offset]=\"{x: 100, y: -25}\"\n    placement=\"bottom\"\n    wrapperClass=\"--hide-after --wide\"\n    (openChange)=\"onOpenChange($event)\"\n  >\n    <cds-overflow-menu-option (selected)=\"onSelectOpenInNewTab()\">{{\n      'interface.openInNewTab' | translate\n    }}</cds-overflow-menu-option>\n  </cds-overflow-menu>\n</div>\n\n<ng-template #overflowTrigger>\n  <div></div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.menu-item-text-container .menu-item-icon-container{position:absolute;margin-left:-.75rem;transform:translate(-100%)}.menu-item-text-container .empty-menu-icon-text{font-weight:600!important}.menu-item-text-container .cds--overflow-menu{visibility:hidden;height:0;width:0;position:absolute}\n"] }]
         }], propDecorators: { menuItem: [{
                 type: Input
             }], accent: [{
@@ -3177,6 +3182,9 @@ class PageTitleService {
     get hasPageActions$() {
         return this._hasPageActions$.asObservable();
     }
+    get pageActionsFullWidth$() {
+        return this._pageActionsFullWidth$.asObservable();
+    }
     constructor(router) {
         this.router = router;
         this._customPageTitle$ = new BehaviorSubject('');
@@ -3184,6 +3192,7 @@ class PageTitleService {
         this._customPageSubtitle$ = new BehaviorSubject('');
         this._customPageSubtitleSet$ = new BehaviorSubject(false);
         this._hasPageActions$ = new BehaviorSubject(false);
+        this._pageActionsFullWidth$ = new BehaviorSubject(false);
         this._pageActionsViewContainerRef$ = new BehaviorSubject(null);
         this.openRouteSubscription();
     }
@@ -3213,6 +3222,12 @@ class PageTitleService {
     setHasPageActions(value) {
         this._hasPageActions$.next(value);
     }
+    setPageActionsFullWidth(value) {
+        this._pageActionsFullWidth$.next(value);
+    }
+    setCustomPageTitleSet(set) {
+        this._customPageTitleSet$.next(set);
+    }
     openRouteSubscription() {
         this._routeSubscription = combineLatest([
             this.router.events,
@@ -3277,6 +3292,7 @@ class PageTitleComponent {
         this.customPageSubtitle$ = this.pageTitleService.customPageSubtitle$;
         this.customPageSubtitleSet$ = this.pageTitleService.customPageSubtitleSet$;
         this.hasPageActions$ = this.pageTitleService.hasPageActions$;
+        this.pageActionsFullWidth$ = this.pageTitleService.pageActionsFullWidth$;
         this.translatedTitle$ = new BehaviorSubject('');
         this.appTitleAsSuffix = this.configService?.config?.featureToggles?.applicationTitleAsSuffix || false;
         this._subscriptions = new Subscription();
@@ -3328,11 +3344,11 @@ class PageTitleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$5.Router }, { token: i1$5.ActivatedRoute }, { token: i5.Title }, { token: i1.TranslateService }, { token: i2$4.NGXLogger }, { token: i1$1.ConfigService }, { token: PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PageTitleComponent, selector: "valtimo-page-title", viewQueries: [{ propertyName: "_pageActionsVcr", first: true, predicate: ["pageActionsVcr"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 [ngClass]=\"{'--no-margin': hidePageTitle}\" class=\"page-title-container\">\n  <ng-container\n    *ngIf=\"\n      hidePageTitle === false && {\n        title: translatedTitle$ | async,\n        hasCustomPageTitle: hasCustomPageTitle$ | async,\n        hasCustomPageSubtitle: hasCustomPageSubtitle$ | async,\n        customPageTitle: customPageTitle$ | async,\n        customPageTitleSet: customPageTitleSet$ | async,\n        customPageSubtitle: customPageSubtitle$ | async,\n        customPageSubtitleSet: customPageSubtitleSet$ | async\n      } as obs\n    \"\n  >\n    <div class=\"skeleton-container\" *ngIf=\"obs.hasCustomPageTitle && !obs.customPageTitleSet\">\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <h2\n      *ngIf=\"obs.hasCustomPageTitle ? obs.customPageTitleSet : obs.title !== ''\"\n      [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\"\n      class=\"page-title\"\n    >\n      {{ obs.hasCustomPageTitle ? obs.customPageTitle : obs.title }}\n    </h2>\n\n    <div\n      *ngIf=\"obs.hasCustomPageSubtitle && !obs.customPageSubtitleSet\"\n      class=\"subtitle-skeleton-container\"\n    >\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <span\n      *ngIf=\"obs.hasCustomPageSubtitle && obs.customPageSubtitleSet\"\n      [innerHtml]=\"obs.customPageSubtitle\"\n      [title]=\"obs.customPageSubtitle\"\n      class=\"page-subtitle\"\n    >\n    </span>\n  </ng-container>\n\n  <div [ngClass]=\"{'--visible': hasPageActions$ | async}\" class=\"page-actions\">\n    <ng-container #pageActionsVcr></ng-container>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.page-title-container{margin-bottom:32px;display:flex;flex-direction:row;align-items:flex-end}.page-title-container.--no-margin{margin-bottom:0}.page-title-container .page-title{font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-title-container .page-subtitle{margin-left:16px;padding-bottom:4px;color:var(--cds-text-helper, #6f6f6f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:18px}.page-title-container .page-subtitle b{font-weight:bolder}.page-title-container .skeleton-container .cds--skeleton__placeholder{width:200px;height:40px}.page-title-container .subtitle-skeleton-container .cds--skeleton__placeholder{height:18px;margin-bottom:8px;width:200px;margin-left:16px}.page-title-container .page-actions.--visible{margin-left:auto;padding-left:32px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PageTitleComponent, selector: "valtimo-page-title", viewQueries: [{ propertyName: "_pageActionsVcr", first: true, predicate: ["pageActionsVcr"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 [ngClass]=\"{'--no-margin': hidePageTitle}\" class=\"page-title-container\">\n  <ng-container\n    *ngIf=\"\n      hidePageTitle === false && {\n        title: translatedTitle$ | async,\n        hasCustomPageTitle: hasCustomPageTitle$ | async,\n        hasCustomPageSubtitle: hasCustomPageSubtitle$ | async,\n        customPageTitle: customPageTitle$ | async,\n        customPageTitleSet: customPageTitleSet$ | async,\n        customPageSubtitle: customPageSubtitle$ | async,\n        customPageSubtitleSet: customPageSubtitleSet$ | async\n      } as obs\n    \"\n  >\n    <div class=\"skeleton-container\" *ngIf=\"obs.hasCustomPageTitle && !obs.customPageTitleSet\">\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <h2\n      *ngIf=\"obs.hasCustomPageTitle ? obs.customPageTitleSet : obs.title !== ''\"\n      [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\"\n      class=\"page-title\"\n    >\n      {{ obs.hasCustomPageTitle ? obs.customPageTitle : obs.title }}\n    </h2>\n\n    <div\n      *ngIf=\"obs.hasCustomPageSubtitle && !obs.customPageSubtitleSet\"\n      class=\"subtitle-skeleton-container\"\n    >\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <span\n      *ngIf=\"obs.hasCustomPageSubtitle && obs.customPageSubtitleSet\"\n      [innerHtml]=\"obs.customPageSubtitle\"\n      [title]=\"obs.customPageSubtitle\"\n      class=\"page-subtitle\"\n    >\n    </span>\n  </ng-container>\n\n  <div\n    [ngClass]=\"{\n      'page-actions--visible': hasPageActions$ | async,\n      'page-actions--full-width': pageActionsFullWidth$ | async\n    }\"\n    class=\"page-actions\"\n  >\n    <ng-container #pageActionsVcr></ng-container>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.page-title-container{margin-bottom:32px;display:flex;flex-direction:row;align-items:flex-end}.page-title-container.--no-margin{margin-bottom:0}.page-title-container .page-title{flex-shrink:0;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-title-container .page-subtitle{margin-left:16px;padding-bottom:4px;color:var(--cds-text-helper, #6f6f6f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:18px}.page-title-container .page-subtitle b{font-weight:bolder}.page-title-container .skeleton-container .cds--skeleton__placeholder{width:200px;height:40px}.page-title-container .subtitle-skeleton-container .cds--skeleton__placeholder{height:18px;margin-bottom:8px;width:200px;margin-left:16px}.page-title-container .page-actions--visible{margin-left:auto;padding-left:32px}.page-title-container .page-actions--full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-page-title', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 [ngClass]=\"{'--no-margin': hidePageTitle}\" class=\"page-title-container\">\n  <ng-container\n    *ngIf=\"\n      hidePageTitle === false && {\n        title: translatedTitle$ | async,\n        hasCustomPageTitle: hasCustomPageTitle$ | async,\n        hasCustomPageSubtitle: hasCustomPageSubtitle$ | async,\n        customPageTitle: customPageTitle$ | async,\n        customPageTitleSet: customPageTitleSet$ | async,\n        customPageSubtitle: customPageSubtitle$ | async,\n        customPageSubtitleSet: customPageSubtitleSet$ | async\n      } as obs\n    \"\n  >\n    <div class=\"skeleton-container\" *ngIf=\"obs.hasCustomPageTitle && !obs.customPageTitleSet\">\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <h2\n      *ngIf=\"obs.hasCustomPageTitle ? obs.customPageTitleSet : obs.title !== ''\"\n      [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\"\n      class=\"page-title\"\n    >\n      {{ obs.hasCustomPageTitle ? obs.customPageTitle : obs.title }}\n    </h2>\n\n    <div\n      *ngIf=\"obs.hasCustomPageSubtitle && !obs.customPageSubtitleSet\"\n      class=\"subtitle-skeleton-container\"\n    >\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <span\n      *ngIf=\"obs.hasCustomPageSubtitle && obs.customPageSubtitleSet\"\n      [innerHtml]=\"obs.customPageSubtitle\"\n      [title]=\"obs.customPageSubtitle\"\n      class=\"page-subtitle\"\n    >\n    </span>\n  </ng-container>\n\n  <div [ngClass]=\"{'--visible': hasPageActions$ | async}\" class=\"page-actions\">\n    <ng-container #pageActionsVcr></ng-container>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.page-title-container{margin-bottom:32px;display:flex;flex-direction:row;align-items:flex-end}.page-title-container.--no-margin{margin-bottom:0}.page-title-container .page-title{font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-title-container .page-subtitle{margin-left:16px;padding-bottom:4px;color:var(--cds-text-helper, #6f6f6f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:18px}.page-title-container .page-subtitle b{font-weight:bolder}.page-title-container .skeleton-container .cds--skeleton__placeholder{width:200px;height:40px}.page-title-container .subtitle-skeleton-container .cds--skeleton__placeholder{height:18px;margin-bottom:8px;width:200px;margin-left:16px}.page-title-container .page-actions.--visible{margin-left:auto;padding-left:32px}\n"] }]
+            args: [{ selector: 'valtimo-page-title', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 [ngClass]=\"{'--no-margin': hidePageTitle}\" class=\"page-title-container\">\n  <ng-container\n    *ngIf=\"\n      hidePageTitle === false && {\n        title: translatedTitle$ | async,\n        hasCustomPageTitle: hasCustomPageTitle$ | async,\n        hasCustomPageSubtitle: hasCustomPageSubtitle$ | async,\n        customPageTitle: customPageTitle$ | async,\n        customPageTitleSet: customPageTitleSet$ | async,\n        customPageSubtitle: customPageSubtitle$ | async,\n        customPageSubtitleSet: customPageSubtitleSet$ | async\n      } as obs\n    \"\n  >\n    <div class=\"skeleton-container\" *ngIf=\"obs.hasCustomPageTitle && !obs.customPageTitleSet\">\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <h2\n      *ngIf=\"obs.hasCustomPageTitle ? obs.customPageTitleSet : obs.title !== ''\"\n      [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\"\n      class=\"page-title\"\n    >\n      {{ obs.hasCustomPageTitle ? obs.customPageTitle : obs.title }}\n    </h2>\n\n    <div\n      *ngIf=\"obs.hasCustomPageSubtitle && !obs.customPageSubtitleSet\"\n      class=\"subtitle-skeleton-container\"\n    >\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <span\n      *ngIf=\"obs.hasCustomPageSubtitle && obs.customPageSubtitleSet\"\n      [innerHtml]=\"obs.customPageSubtitle\"\n      [title]=\"obs.customPageSubtitle\"\n      class=\"page-subtitle\"\n    >\n    </span>\n  </ng-container>\n\n  <div\n    [ngClass]=\"{\n      'page-actions--visible': hasPageActions$ | async,\n      'page-actions--full-width': pageActionsFullWidth$ | async\n    }\"\n    class=\"page-actions\"\n  >\n    <ng-container #pageActionsVcr></ng-container>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.page-title-container{margin-bottom:32px;display:flex;flex-direction:row;align-items:flex-end}.page-title-container.--no-margin{margin-bottom:0}.page-title-container .page-title{flex-shrink:0;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-title-container .page-subtitle{margin-left:16px;padding-bottom:4px;color:var(--cds-text-helper, #6f6f6f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:18px}.page-title-container .page-subtitle b{font-weight:bolder}.page-title-container .skeleton-container .cds--skeleton__placeholder{width:200px;height:40px}.page-title-container .subtitle-skeleton-container .cds--skeleton__placeholder{height:18px;margin-bottom:8px;width:200px;margin-left:16px}.page-title-container .page-actions--visible{margin-left:auto;padding-left:32px}.page-title-container .page-actions--full-width{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$5.Router }, { type: i1$5.ActivatedRoute }, { type: i5.Title }, { type: i1.TranslateService }, { type: i2$4.NGXLogger }, { type: i1$1.ConfigService }, { type: PageTitleService }]; }, propDecorators: { _pageActionsVcr: [{
                 type: ViewChild,
                 args: ['pageActionsVcr', { static: true, read: ViewContainerRef }]
@@ -3742,27 +3758,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class CarbonListComponent {
     set items(value) {
         this._items = value;
-        if (!this._fields) {
-            return;
-        }
-        this.model.data = this.buildTableItems();
-        this._completeDataSource = this.model.data;
+        this._items$.next(value);
     }
     get items() {
         return this._items;
     }
     set fields(value) {
-        this._fields = value;
-        this.buildHeaderItems(value);
-        if (!this._items?.length) {
-            return;
-        }
-        this.model.data = this.buildTableItems();
+        this._fields$.next(value);
     }
     set tableTranslations(value) {
         this._tableTranslations$.next({ ...DEFAULT_LIST_TRANSLATIONS, ...value });
     }
     set pagination(value) {
+        if (!value) {
+            return;
+        }
         if (!this._pagination) {
             this._pagination = { ...DEFAULT_PAGINATION, ...value };
         }
@@ -3774,7 +3784,14 @@ class CarbonListComponent {
     }
     static { this.PAGINATION_SIZE = 'PaginationSize'; }
     get selectedItems() {
-        return this.model.data.reduce((items, _, index) => this.model.isRowSelected(index) ? [...items, this.items[index]] : [...items], []);
+        const model = this._table.model;
+        return model.data.reduce((items, _, index) => model.isRowSelected(index) ? [...items, this.items[index]] : [...items], []);
+    }
+    get viewInitialized$() {
+        return this._viewInitialized$.pipe(filter(initialized => initialized));
+    }
+    get model() {
+        return this._table.model;
     }
     constructor(filterPipe, iconService, logger, translateService, viewContentService) {
         this.filterPipe = filterPipe;
@@ -3783,8 +3800,9 @@ class CarbonListComponent {
         this.translateService = translateService;
         this.viewContentService = viewContentService;
         this.theme = 'g10';
+        this._items$ = new BehaviorSubject([]);
         this.items$ = new BehaviorSubject([]);
-        this.fields$ = of([]);
+        this._fields$ = new BehaviorSubject([]);
         this._tableTranslations$ = new BehaviorSubject(DEFAULT_LIST_TRANSLATIONS);
         this.paginatorConfig = DEFAULT_PAGINATOR_CONFIG;
         /**
@@ -3795,11 +3813,14 @@ class CarbonListComponent {
         this.enableSingleSelection = false;
         this.showSelectionColumn = false;
         this.striped = false;
+        this.hideToolbar = false;
+        this.lockedTooltipTranslationKey = '';
         this.rowClicked = new EventEmitter();
         this.paginationClicked = new EventEmitter();
         this.paginationSet = new EventEmitter();
         this.search = new EventEmitter();
         this.sortChanged = new EventEmitter();
+        this.moveRow = new EventEmitter();
         this.batchText$ = this._tableTranslations$.pipe(switchMap((translations) => combineLatest([
             this.translateService.stream(translations.select.single),
             this.translateService.stream(translations.select.multiple),
@@ -3822,12 +3843,62 @@ class CarbonListComponent {
             isSorting: false,
         });
         this.ViewType = ViewType;
-        this.model = new TableModel();
         this.skeletonModel = Table.skeletonModel(5, 5);
         this.searchFormControl = new FormControl('');
         this._subscriptions = new Subscription();
-        this.viewListAs = localStorage.getItem('viewListAs') || 'table';
-        this.iconService.registerAll([SettingsView16]);
+        this._viewInitialized$ = new BehaviorSubject(false);
+        this._translatedFields$ = this.translateService.stream('key').pipe(switchMap(() => this._fields$), map((fields) => fields.map((field) => ({
+            ...field,
+            label: !field.label ? '' : this.translateService.instant(field.label),
+        }))));
+        this._headerItems$ = combineLatest([
+            this._translatedFields$,
+            this.sort$,
+        ]).pipe(map(([translatedFields, sortState]) => translatedFields.map((field) => new TableHeaderItem({
+            data: field.label,
+            sortable: field.sortable,
+            className: field.className,
+            key: field.key,
+            sorted: sortState.isSorting && field.key === sortState.state.name,
+            ascending: field.key === sortState.state.name && sortState.state.direction === 'ASC',
+        }))), map((header) => [...header, ...this.extraColumns]));
+        this._tableItems$ = this._viewInitialized$.pipe(switchMap(() => combineLatest([this._fields$, this._items$])), filter(([fields, items]) => !!fields && !!items), map(([fields, items]) => items.map((item, index) => [
+            ...fields.map((field) => {
+                switch (field.viewType) {
+                    case ViewType.TEMPLATE:
+                        return new TableItem({
+                            data: { item, index, length: items.length },
+                            template: field.template,
+                        });
+                    case ViewType.BOOLEAN:
+                        let data = this.resolveObject(field, item);
+                        data = !BOOLEAN_CONVERTER_VALUES.includes(data)
+                            ? data
+                            : `${'viewTypeConverter.' + data}`;
+                        return new TableItem({
+                            data,
+                            template: this.booleanTemplate,
+                        });
+                    default:
+                        return new TableItem({ data: this.resolveObject(field, item) ?? '-', item });
+                }
+            }),
+            ...this.getExtraItems(item, index, items.length),
+        ])), tap((data) => {
+            this._completeDataSource = data;
+        }));
+        this._filteredItems$ = new BehaviorSubject(null);
+        this.model$ = combineLatest([
+            this._headerItems$,
+            this._tableItems$,
+            this._filteredItems$,
+        ]).pipe(map(([header, data, filteredData]) => {
+            const model = new TableModel();
+            model.header = header;
+            model.data = filteredData ?? data;
+            return model;
+        }), startWith(new TableModel()));
+        this.iconService.registerAll([ArrowDown16, ArrowUp16, SettingsView16]);
     }
     ngOnInit() {
         if (this.pagination) {
@@ -3841,18 +3912,24 @@ class CarbonListComponent {
             .subscribe((searchString) => {
             if (this.search.observed) {
                 this.search.emit(searchString);
+                return;
             }
-            else {
-                this.model.data = this.filterPipe.transform(this._completeDataSource, searchString ?? '');
+            if (!searchString) {
+                this._filteredItems$.next(null);
+                return;
             }
+            this._filteredItems$.next(this.filterPipe.transform(this._completeDataSource, searchString ?? ''));
         }));
     }
+    ngAfterViewInit() {
+        this._viewInitialized$.next(true);
+    }
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
     onRowClick(index) {
-        const item = this.model.data[index][0]['item'];
-        if (!item) {
+        const item = this._table.model.data[index][0]['item'];
+        if (!item || item?.locked) {
             return;
         }
         this.rowClicked.emit(item);
@@ -3901,90 +3978,87 @@ class CarbonListComponent {
             pageLength: this.pagination.size,
         };
     }
-    buildHeaderItems(fields) {
-        const translationStreams = fields.map((column) => !column.label ? of('') : this.translateService.stream(column.label));
-        this._subscriptions.add(combineLatest(translationStreams)
-            .pipe(switchMap((translationResults) => this.sort$.pipe(map((sortState) => ({ translationResults, sortState })))), map(({ translationResults, sortState }) => [
-            ...translationResults.map((translation, index) => new TableHeaderItem({
-                data: translation,
-                sortable: !!fields[index].sortable,
-                className: fields[index].className ?? '',
-                key: fields[index].key,
-                sorted: sortState.isSorting && fields[index].key === sortState.state.name,
-                ascending: fields[index].key === sortState.state.name &&
-                    sortState.state.direction === 'ASC',
-                viewType: fields[index].viewType,
-            })),
-        ]))
-            .subscribe((header) => {
-            if (!!this.actions.length) {
-                header = [
-                    ...header,
-                    ...this.actions.map(action => new TableHeaderItem({
-                        data: action.columnName,
-                        key: action.columnName,
-                        ViewType: ViewType.TEMPLATE,
-                        sorable: false,
-                    })),
-                ];
-            }
-            this.model.header = !this.lastColumnTemplate
-                ? header
-                : [
-                    ...header,
+    get extraColumns() {
+        const emptyHeader = new TableHeaderItem({ sortable: false });
+        return [
+            ...(this.movingRowsEnabled
+                ? [
                     new TableHeaderItem({
-                        data: '',
-                        key: '',
-                        viewType: ViewType.ACTION,
+                        className: 'valtimo-carbon-list__actions',
                         sortable: false,
                     }),
-                ];
-        }));
+                ]
+                : []),
+            ...(!!this.actions
+                ? this.actions.map(action => new TableHeaderItem({
+                    data: action.columnName,
+                    key: action.columnName,
+                    sortable: false,
+                }))
+                : []),
+            ...(!!this.lastColumnTemplate ? [emptyHeader] : []),
+            ...(this._items?.some(item => item.locked) ? [emptyHeader] : []),
+            ...(!!this.actionItems
+                ? [
+                    new TableHeaderItem({
+                        className: 'valtimo-carbon-list__actions',
+                        sortable: false,
+                    }),
+                ]
+                : []),
+        ];
     }
-    buildTableItems() {
-        const itemCount = this._items.length;
-        return this._items.map((item, index) => {
-            const fields = this._fields.map((column) => {
-                switch (column.viewType) {
-                    case ViewType.ACTION:
-                        return new TableItem({
-                            data: { actions: column.actions, item },
-                            template: this.actionsMenu,
-                        });
-                    case ViewType.TEMPLATE:
-                        return new TableItem({
-                            data: { item, index, length: itemCount },
-                            template: column.template,
-                        });
-                    case ViewType.BOOLEAN:
-                        let data = this.resolveObject(column, item);
-                        data = !BOOLEAN_CONVERTER_VALUES.includes(data)
-                            ? data
-                            : `${'viewTypeConverter.' + data}`;
-                        return new TableItem({
-                            data,
-                            template: this.booleanTemplate,
-                        });
-                    default:
-                        return new TableItem({ data: this.resolveObject(column, item) ?? '-', item });
-                }
-            });
-            if (!!this.actions) {
-                fields.push(...this.actions.map(action => new TableItem({
+    onMoveDownClick(event, data) {
+        event.stopImmediatePropagation();
+        this.moveRow.emit({
+            direction: MoveRowDirection.DOWN,
+            index: data.index,
+        });
+    }
+    onMoveUpClick(event, data) {
+        event.stopImmediatePropagation();
+        this.moveRow.emit({
+            direction: MoveRowDirection.UP,
+            index: data.index,
+        });
+    }
+    getExtraItems(item, index, length) {
+        return [
+            ...(!!this.actions
+                ? this.actions.map(action => new TableItem({
                     data: { item, callback: action.callback, iconClass: action.iconClass },
-                    template: this.actionItem,
-                })));
-            }
-            return !this.lastColumnTemplate
-                ? fields
-                : [
-                    ...fields,
+                    template: this.actionTemplate,
+                }))
+                : []),
+            ...(this._items?.some(tableItem => tableItem.locked)
+                ? [
                     new TableItem({
-                        data: { item, index, length: itemCount },
-                        template: this.lastColumnTemplate,
+                        data: { locked: item.locked },
+                        template: this.rowDisabled,
                     }),
-                ];
-        });
+                ]
+                : []),
+            ...(!!this.lastColumnTemplate
+                ? [new TableItem({ data: { item, index, length }, template: this.lastColumnTemplate })]
+                : []),
+            ...(this.movingRowsEnabled
+                ? [
+                    new TableItem({
+                        data: { item, index, length },
+                        template: this.moveRowsTemplate,
+                    }),
+                ]
+                : []),
+            ...(!!this.actionItems
+                ? [
+                    new TableItem({
+                        className: 'valtimo-carbon-list__actions',
+                        data: { actions: this.actionItems, item },
+                        template: this.actionsMenuTemplate,
+                    }),
+                ]
+                : []),
+        ];
     }
     loadPaginationSize() {
         const entries = localStorage.getItem(`${this.paginationIdentifier}${CarbonListComponent.PAGINATION_SIZE}`);
@@ -4013,23 +4087,32 @@ class CarbonListComponent {
         return this.viewContentService.get(resolvedObjValue, definition);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CarbonListComponent, deps: [{ token: CarbonListFilterPipe }, { token: i2$2.IconService }, { token: i2$4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CarbonListComponent, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", header: "header", initialSortState: "initialSortState", isSearchable: "isSearchable", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged" }, host: { properties: { "attr.data-carbon-theme": "this.theme" } }, providers: [CarbonListFilterPipe], viewQueries: [{ propertyName: "actionsMenu", first: true, predicate: ["actionsMenu"], descendants: true }, { propertyName: "actionItem", first: true, predicate: ["actionItem"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <ng-template #actionsMenu let-data=\"data\">\n    <cds-overflow-menu (click)=\"$event.stopPropagation()\">\n      <cds-overflow-menu-option\n        *ngFor=\"let action of data.actions\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    </cds-overflow-menu>\n  </ng-template>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading ? skeletonModel : model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionItem let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list label{margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$2.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$2.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$2.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$2.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$2.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$2.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$2.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$2.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CarbonListComponent, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", actionItems: "actionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", isSearchable: "isSearchable", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow" }, host: { properties: { "attr.data-carbon-theme": "this.theme" } }, providers: [CarbonListFilterPipe], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-table-container\n  *ngIf=\"\n    (viewInitialized$ | async) && {\n      sort: sort$ | async,\n      model: model$ | async\n    } as obs\n  \"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu (click)=\"$event.stopPropagation()\">\n    <cds-overflow-menu-option\n      *ngFor=\"let action of data.actions\"\n      [type]=\"action.type\"\n      (selected)=\"action.callback(data.item)\"\n    >\n      <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n      {{ action.label | translate }}\n    </cds-overflow-menu-option>\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"disabled\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child){margin-right:8px}.valtimo-carbon-list label{margin-bottom:0!important}.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$2.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$2.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$2.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$2.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$2.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$2.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$2.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$2.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i8$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CarbonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <ng-template #actionsMenu let-data=\"data\">\n    <cds-overflow-menu (click)=\"$event.stopPropagation()\">\n      <cds-overflow-menu-option\n        *ngFor=\"let action of data.actions\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    </cds-overflow-menu>\n  </ng-template>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading ? skeletonModel : model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionItem let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list label{margin-bottom:0!important}\n"] }]
+            args: [{ selector: 'valtimo-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-table-container\n  *ngIf=\"\n    (viewInitialized$ | async) && {\n      sort: sort$ | async,\n      model: model$ | async\n    } as obs\n  \"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu (click)=\"$event.stopPropagation()\">\n    <cds-overflow-menu-option\n      *ngFor=\"let action of data.actions\"\n      [type]=\"action.type\"\n      (selected)=\"action.callback(data.item)\"\n    >\n      <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n      {{ action.label | translate }}\n    </cds-overflow-menu-option>\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"disabled\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child){margin-right:8px}.valtimo-carbon-list label{margin-bottom:0!important}.disabled{cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: CarbonListFilterPipe }, { type: i2$2.IconService }, { type: i2$4.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }]; }, propDecorators: { theme: [{
                 type: HostBinding,
                 args: ['attr.data-carbon-theme']
-            }], actionsMenu: [{
+            }], actionsMenuTemplate: [{
                 type: ViewChild,
-                args: ['actionsMenu']
-            }], actionItem: [{
+                args: ['actionsMenuTemplate']
+            }], actionTemplate: [{
                 type: ViewChild,
-                args: ['actionItem']
+                args: ['actionTemplate']
             }], booleanTemplate: [{
                 type: ViewChild,
                 args: ['booleanTemplate']
+            }], moveRowsTemplate: [{
+                type: ViewChild,
+                args: ['moveRowsTemplate']
+            }], rowDisabled: [{
+                type: ViewChild,
+                args: ['rowDisabled']
+            }], _table: [{
+                type: ViewChild,
+                args: [Table]
             }], items: [{
                 type: Input
             }], fields: [{
@@ -4044,8 +4127,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], actions: [{
                 type: Input
+            }], actionItems: [{
+                type: Input
             }], header: [{
                 type: Input
+            }], hideColumnHeader: [{
+                type: Input
             }], initialSortState: [{
                 type: Input
             }], isSearchable: [{
@@ -4060,6 +4147,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], striped: [{
                 type: Input
+            }], hideToolbar: [{
+                type: Input
+            }], lockedTooltipTranslationKey: [{
+                type: Input
+            }], movingRowsEnabled: [{
+                type: Input
             }], rowClicked: [{
                 type: Output
             }], paginationClicked: [{
@@ -4070,6 +4163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], sortChanged: [{
                 type: Output
+            }], moveRow: [{
+                type: Output
             }] } });
 
 /*
@@ -4197,7 +4292,8 @@ class CarbonListModule {
             ContentSwitcherModule,
             IconModule,
             ButtonModule$1,
-            DialogModule], exports: [CarbonListComponent, CarbonListFilterPipe, CarbonNoResultsComponent] }); }
+            DialogModule,
+            NgbTooltipModule], exports: [CarbonListComponent, CarbonListFilterPipe, CarbonNoResultsComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CarbonListModule, imports: [CardModule,
             CommonModule,
             FormsModule,
@@ -4209,7 +4305,8 @@ class CarbonListModule {
             ContentSwitcherModule,
             IconModule,
             ButtonModule$1,
-            DialogModule] }); }
+            DialogModule,
+            NgbTooltipModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CarbonListModule, decorators: [{
             type: NgModule,
@@ -4228,6 +4325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         IconModule,
                         ButtonModule$1,
                         DialogModule,
+                        NgbTooltipModule,
                     ],
                     exports: [CarbonListComponent, CarbonListFilterPipe, CarbonNoResultsComponent],
                 }]
@@ -4416,7 +4514,7 @@ class ListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: ViewContentService }, { token: i2$4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, selector: "valtimo-list", inputs: { items: "items", fields: "fields", pagination: "pagination", viewMode: "viewMode", isSearchable: "isSearchable", header: "header", actions: "actions", paginationIdentifier: "paginationIdentifier", initialSortState: "initialSortState", lastColumnTemplate: "lastColumnTemplate" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC'\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container\n                *ngIf=\"\n                  listItemField.type === '' && {\n                    valueTranslationKey: 'viewTypeConverter.' + listItemField.value,\n                    valueTranslation: 'viewTypeConverter.' + listItemField.value | translate\n                  } as vars\n                \"\n              >\n                {{\n                  listItemField.value\n                    ? vars.valueTranslation !== vars.valueTranslationKey\n                      ? vars.valueTranslation\n                      : listItemField.value\n                    : '-'\n                }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  lastColumnTemplate;\n                  context: {index: i, length: items.length, item: item}\n                \"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage'\n          | translate\n            : {current: pagination.page > 0 ? pagination.page : 1, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListFilterPipe, name: "listFilter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, selector: "valtimo-list", inputs: { items: "items", fields: "fields", pagination: "pagination", viewMode: "viewMode", isSearchable: "isSearchable", header: "header", actions: "actions", paginationIdentifier: "paginationIdentifier", initialSortState: "initialSortState", lastColumnTemplate: "lastColumnTemplate" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC'\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container\n                *ngIf=\"\n                  listItemField.type === '' && {\n                    valueTranslationKey: 'viewTypeConverter.' + listItemField.value,\n                    valueTranslation: 'viewTypeConverter.' + listItemField.value | translate\n                  } as vars\n                \"\n              >\n                {{\n                  listItemField.value\n                    ? vars.valueTranslation !== vars.valueTranslationKey\n                      ? vars.valueTranslation\n                      : listItemField.value\n                    : '-'\n                }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  lastColumnTemplate;\n                  context: {index: i, length: items.length, item: item}\n                \"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage'\n          | translate\n            : {current: pagination.page > 0 ? pagination.page : 1, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListFilterPipe, name: "listFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -5365,11 +5463,11 @@ class UploaderComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploaderComponent, deps: [{ token: i1$6.S3Service }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploaderComponent, selector: "valtimo-uploader", inputs: { showFileList: "showFileList" }, outputs: { resourcesChanged: "resourcesChanged", resourceRegistered: "resourceRegistered" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"mdi mdi-cloud-upload\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"icon mdi mdi-delete text-danger\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".upload-file-container{background-repeat:no-repeat;background-size:100px;background-position:center;margin:0 0 1rem;border:2px dashed #d5d8de;text-align:center;color:#d5d8de;background-color:#fff}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{display:flex;justify-content:space-between;margin:1rem auto;background:#ffffff;border:1px solid #bdc0c7;padding:5px;font-size:1em}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UploaderDragDropDirective, selector: "[valtimoUploaderDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploaderComponent, selector: "valtimo-uploader", inputs: { showFileList: "showFileList" }, outputs: { resourcesChanged: "resourcesChanged", resourceRegistered: "resourceRegistered" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"mdi mdi-cloud-upload\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"icon mdi mdi-delete text-danger\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".upload-file-container{background-repeat:no-repeat;background-size:100px;background-position:center;margin:0 0 1rem;border:2px dashed #d5d8de;text-align:center;color:#d5d8de;background-color:#fff}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{display:flex;justify-content:space-between;margin:1rem auto;background:#fff;border:1px solid #bdc0c7;padding:5px;font-size:1em}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UploaderDragDropDirective, selector: "[valtimoUploaderDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-uploader', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"mdi mdi-cloud-upload\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"icon mdi mdi-delete text-danger\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".upload-file-container{background-repeat:no-repeat;background-size:100px;background-position:center;margin:0 0 1rem;border:2px dashed #d5d8de;text-align:center;color:#d5d8de;background-color:#fff}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{display:flex;justify-content:space-between;margin:1rem auto;background:#ffffff;border:1px solid #bdc0c7;padding:5px;font-size:1em}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}\n"] }]
+            args: [{ selector: 'valtimo-uploader', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"mdi mdi-cloud-upload\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"icon mdi mdi-delete text-danger\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".upload-file-container{background-repeat:no-repeat;background-size:100px;background-position:center;margin:0 0 1rem;border:2px dashed #d5d8de;text-align:center;color:#d5d8de;background-color:#fff}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{display:flex;justify-content:space-between;margin:1rem auto;background:#fff;border:1px solid #bdc0c7;padding:5px;font-size:1em}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$6.S3Service }]; }, propDecorators: { resourcesChanged: [{
                 type: Output
             }], resourceRegistered: [{
@@ -5977,7 +6075,7 @@ class FormioComponent {
         localStorage.removeItem(this._FORMIO_TOKEN_LOCAL_STORAGE_KEY);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormioComponent, deps: [{ token: i8.UserProviderService }, { token: i2$4.NGXLogger }, { token: FormIoStateService }, { token: i1$5.ActivatedRoute }, { token: i1.TranslateService }, { token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormioComponent, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [submission]=\"obs.submission\"\n    [form]=\"obs.form\"\n    [refresh]=\"refreshForm\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.FormioComponent, selector: "formio" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormioComponent, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [submission]=\"obs.submission\"\n    [form]=\"obs.form\"\n    [refresh]=\"refreshForm\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$2.FormioComponent, selector: "formio" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
@@ -6054,7 +6152,7 @@ class FormioBuilderComponent {
         this.change.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormioBuilderComponent, deps: [{ token: i1.TranslateService }, { token: FormIoStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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  <form-builder\n    [form]=\"form\"\n    [rebuild]=\"triggerRebuild\"\n    [options]=\"formioOptions$ | async\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i8$1.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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  <form-builder\n    [form]=\"form\"\n    [rebuild]=\"triggerRebuild\"\n    [options]=\"formioOptions$ | async\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i8$2.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormioBuilderComponent, decorators: [{
             type: Component,
@@ -6803,7 +6901,7 @@ class TooltipComponent {
         this.text = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "v-tooltip", inputs: { text: "text" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 @tooltip>{{ text }}</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */:host{display:block}div{background-color:var(--v-tooltip-bg-color);color:var(--v-tooltip-font-color);padding-inline-start:var(--v-tooltip-spacing-inline);padding-inline-end:var(--v-tooltip-spacing-inline);padding-block-start:var(--v-tooltip-spacing-block);padding-block-end:var(--v-tooltip-spacing-block);border-radius:var(--v-tooltip-border-radius);font-size:var(--v-tooltip-font-size);font-weight:var(--v-tooltip-font-weight);line-height:var(--v-tooltip-line-height);max-width:var(--v-tooltip-max-width)}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-container{position:fixed;z-index:11000}::ng-deep .cdk-overlay-container:empty{display:none}::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:11001}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:11001;display:flex;max-width:11001%;max-height:11001%}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:11001;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}::ng-deep .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:11001;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "v-tooltip", inputs: { text: "text" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 @tooltip>{{ text }}</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */:host{display:block}div{background-color:var(--v-tooltip-bg-color);color:var(--v-tooltip-font-color);padding-inline-start:var(--v-tooltip-spacing-inline);padding-inline-end:var(--v-tooltip-spacing-inline);padding-block-start:var(--v-tooltip-spacing-block);padding-block-end:var(--v-tooltip-spacing-block);border-radius:var(--v-tooltip-border-radius);font-size:var(--v-tooltip-font-size);font-weight:var(--v-tooltip-font-weight);line-height:var(--v-tooltip-line-height);max-width:var(--v-tooltip-max-width)}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-container{position:fixed;z-index:11000}::ng-deep .cdk-overlay-container:empty{display:none}::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:11001}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:11001;display:flex;max-width:11001%;max-height:11001%}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:11001;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}::ng-deep .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}::ng-deep .cdk-overlay-dark-backdrop{background:#00000052}::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:11001;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"], animations: [
             trigger('tooltip', [
                 transition(':enter', [style({ opacity: 0 }), animate(300, style({ opacity: 1 }))]),
                 transition(':leave', [animate(300, style({ opacity: 0 }))]),
@@ -6817,7 +6915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             transition(':enter', [style({ opacity: 0 }), animate(300, style({ opacity: 1 }))]),
                             transition(':leave', [animate(300, style({ opacity: 0 }))]),
                         ]),
-                    ], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 @tooltip>{{ text }}</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */:host{display:block}div{background-color:var(--v-tooltip-bg-color);color:var(--v-tooltip-font-color);padding-inline-start:var(--v-tooltip-spacing-inline);padding-inline-end:var(--v-tooltip-spacing-inline);padding-block-start:var(--v-tooltip-spacing-block);padding-block-end:var(--v-tooltip-spacing-block);border-radius:var(--v-tooltip-border-radius);font-size:var(--v-tooltip-font-size);font-weight:var(--v-tooltip-font-weight);line-height:var(--v-tooltip-line-height);max-width:var(--v-tooltip-max-width)}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-container{position:fixed;z-index:11000}::ng-deep .cdk-overlay-container:empty{display:none}::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:11001}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:11001;display:flex;max-width:11001%;max-height:11001%}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:11001;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}::ng-deep .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:11001;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 @tooltip>{{ text }}</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */:host{display:block}div{background-color:var(--v-tooltip-bg-color);color:var(--v-tooltip-font-color);padding-inline-start:var(--v-tooltip-spacing-inline);padding-inline-end:var(--v-tooltip-spacing-inline);padding-block-start:var(--v-tooltip-spacing-block);padding-block-end:var(--v-tooltip-spacing-block);border-radius:var(--v-tooltip-border-radius);font-size:var(--v-tooltip-font-size);font-weight:var(--v-tooltip-font-weight);line-height:var(--v-tooltip-line-height);max-width:var(--v-tooltip-max-width)}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-container{position:fixed;z-index:11000}::ng-deep .cdk-overlay-container:empty{display:none}::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:11001}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:11001;display:flex;max-width:11001%;max-height:11001%}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:11001;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}::ng-deep .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}::ng-deep .cdk-overlay-dark-backdrop{background:#00000052}::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:11001;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }] } });
@@ -7572,11 +7670,11 @@ let SelectComponent$1 = class SelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectComponent, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async\n  } as vars\"\n  [ngClass]=\"{'--margin': margin, '--small-margin': smallMargin}\"\n  class=\"v-select-container\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n  <cds-combo-box\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"disabled || loading || vars.items.length === 0\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : vars.items.length === 0\n        ? vars.notFoundText\n        : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n  >\n    <cds-dropdown-list\n      [items]=\"vars.items\"\n      [attr.data-carbon-theme]=\"carbonTheme\"\n    ></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */::ng-deep .cds--list-box__wrapper{z-index:100001!important}.v-select-container.--margin{margin-block-end:var(--v-input-margin)}.v-select-container.--small-margin{margin-block-end:var(--v-input-small-margin)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectComponent, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async\n  } as vars\"\n  [ngClass]=\"{'--margin': margin, '--small-margin': smallMargin}\"\n  class=\"v-select-container\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n  <cds-combo-box\n    [appendInline]=\"true\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"disabled || loading || vars.items.length === 0\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : vars.items.length === 0\n        ? vars.notFoundText\n        : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n  >\n    <cds-dropdown-list\n      [items]=\"vars.items\"\n      [attr.data-carbon-theme]=\"carbonTheme\"\n    ></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-select-container.--margin{margin-block-end:var(--v-input-margin)}.v-select-container.--small-margin{margin-block-end:var(--v-input-small-margin)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i4.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'v-select', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async\n  } as vars\"\n  [ngClass]=\"{'--margin': margin, '--small-margin': smallMargin}\"\n  class=\"v-select-container\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n  <cds-combo-box\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"disabled || loading || vars.items.length === 0\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : vars.items.length === 0\n        ? vars.notFoundText\n        : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n  >\n    <cds-dropdown-list\n      [items]=\"vars.items\"\n      [attr.data-carbon-theme]=\"carbonTheme\"\n    ></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */::ng-deep .cds--list-box__wrapper{z-index:100001!important}.v-select-container.--margin{margin-block-end:var(--v-input-margin)}.v-select-container.--small-margin{margin-block-end:var(--v-input-small-margin)}\n"] }]
+            args: [{ selector: 'v-select', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async\n  } as vars\"\n  [ngClass]=\"{'--margin': margin, '--small-margin': smallMargin}\"\n  class=\"v-select-container\"\n  [style.width.px]=\"widthInPx\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n  <cds-combo-box\n    [appendInline]=\"true\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"disabled || loading || vars.items.length === 0\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : vars.items.length === 0\n        ? vars.notFoundText\n        : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n    [attr.data-carbon-theme]=\"carbonTheme\"\n  >\n    <cds-dropdown-list\n      [items]=\"vars.items\"\n      [attr.data-carbon-theme]=\"carbonTheme\"\n    ></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-select-container.--margin{margin-block-end:var(--v-input-margin)}.v-select-container.--small-margin{margin-block-end:var(--v-input-small-margin)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { items: [{
                 type: Input
             }], defaultSelection: [{
@@ -7773,11 +7871,11 @@ class CarbonMultiInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CarbonMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", hideDeleteButton: "hideDeleteButton", hideAddButton: "hideAddButton", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate)\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyDropdownValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyDropdownValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #singleValue let-value=\"value\">\n  <div class=\"v-multi-input__input\">\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (change)=\"onValueChange(value, $event, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyValue let-value=\"value\" let-index=\"index\">\n  <div class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</cds-label>\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyDropdownValue let-value=\"value\" let-index=\"index\">\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n\n  <div [style.minWidth.px]=\"dropdownWidth\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n    <cds-dropdown (selected)=\"onValueChange(value, $event.item.id, 'dropdown')\">\n      <cds-dropdown-list\n        [items]=\"getDropdownItemsForRow(index) | async\"\n        type=\"multi\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i4$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", hideDeleteButton: "hideDeleteButton", hideAddButton: "hideAddButton", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate)\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyDropdownValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyDropdownValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #singleValue let-value=\"value\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (change)=\"onValueChange(value, $event, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyValue let-value=\"value\" let-index=\"index\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</cds-label>\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyDropdownValue let-value=\"value\" let-index=\"index\">\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n\n  <div [style.minWidth.px]=\"dropdownWidth\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n    <cds-dropdown\n      (selected)=\"onValueChange(value, $event.item.id, 'dropdown')\"\n      [appendInline]=\"true\"\n    >\n      <cds-dropdown-list\n        [items]=\"getDropdownItemsForRow(index) | async\"\n        type=\"multi\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i4.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CarbonMultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-carbon-multi-input', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate)\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyDropdownValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyDropdownValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #singleValue let-value=\"value\">\n  <div class=\"v-multi-input__input\">\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (change)=\"onValueChange(value, $event, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyValue let-value=\"value\" let-index=\"index\">\n  <div class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</cds-label>\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyDropdownValue let-value=\"value\" let-index=\"index\">\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n\n  <div [style.minWidth.px]=\"dropdownWidth\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n    <cds-dropdown (selected)=\"onValueChange(value, $event.item.id, 'dropdown')\">\n      <cds-dropdown-list\n        [items]=\"getDropdownItemsForRow(index) | async\"\n        type=\"multi\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{width:100%}\n"] }]
+            args: [{ selector: 'valtimo-carbon-multi-input', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate)\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyDropdownValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyDropdownValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #singleValue let-value=\"value\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (change)=\"onValueChange(value, $event, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyValue let-value=\"value\" let-index=\"index\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</cds-label>\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyDropdownValue let-value=\"value\" let-index=\"index\">\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n\n  <div [style.minWidth.px]=\"dropdownWidth\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n    <cds-dropdown\n      (selected)=\"onValueChange(value, $event.item.id, 'dropdown')\"\n      [appendInline]=\"true\"\n    >\n      <cds-dropdown-list\n        [items]=\"getDropdownItemsForRow(index) | async\"\n        type=\"multi\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{width:100%}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], title: [{
@@ -9698,6 +9796,16 @@ const formIoUploaderEditForm = () => ({
                 required: true,
             },
         },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'validate.required',
+            label: 'Required',
+            validate: {
+                required: false,
+            },
+        },
         {
             type: 'textfield',
             input: true,
@@ -9849,6 +9957,16 @@ const documentenApiUploaderEditForm = () => ({
                 required: true,
             },
         },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'validate.required',
+            label: 'Required',
+            validate: {
+                required: false,
+            },
+        },
         {
             type: 'textfield',
             input: true,
@@ -11285,11 +11403,11 @@ class EditorComponent {
         this.updateModel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponent, deps: [{ token: EditorService }, { token: ShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorComponent, selector: "valtimo-editor", inputs: { editorOptions: "editorOptions", model: "model", disabled: "disabled", formatOnLoad: "formatOnLoad", widthPx: "widthPx", heightPx: "heightPx" }, outputs: { validEvent: "validEvent", valueChangeEvent: "valueChangeEvent" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"editor-container\"\n  #editorContainer\n  [style.width.px]=\"widthPx\"\n  [style.height.px]=\"heightPx\"\n></div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.editor-container{width:100%;height:calc(100vh - 219px)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorComponent, selector: "valtimo-editor", inputs: { editorOptions: "editorOptions", model: "model", disabled: "disabled", formatOnLoad: "formatOnLoad", widthPx: "widthPx", heightPx: "heightPx", heightStyle: "heightStyle" }, outputs: { validEvent: "validEvent", valueChangeEvent: "valueChangeEvent" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"editor-container\"\n  #editorContainer\n  [style.width.px]=\"widthPx\"\n  [style.height.px]=\"heightPx\"\n  [style.height]=\"heightStyle\"\n></div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.editor-container{width:100%;height:calc(100vh - 219px)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-editor', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"editor-container\"\n  #editorContainer\n  [style.width.px]=\"widthPx\"\n  [style.height.px]=\"heightPx\"\n></div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.editor-container{width:100%;height:calc(100vh - 219px)}\n"] }]
+            args: [{ selector: 'valtimo-editor', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"editor-container\"\n  #editorContainer\n  [style.width.px]=\"widthPx\"\n  [style.height.px]=\"heightPx\"\n  [style.height]=\"heightStyle\"\n></div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.editor-container{width:100%;height:calc(100vh - 219px)}\n"] }]
         }], ctorParameters: function () { return [{ type: EditorService }, { type: ShellService }]; }, propDecorators: { editorContainer: [{
                 type: ViewChild,
                 args: ['editorContainer', { static: true }]
@@ -11305,6 +11423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], heightPx: [{
                 type: Input
+            }], heightStyle: [{
+                type: Input
             }], validEvent: [{
                 type: Output
             }], valueChangeEvent: [{
@@ -11463,11 +11583,11 @@ class TableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [{ token: i3$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <v-button type=\"secondary\" (clickEvent)=\"editButtonClicked.emit(item)\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)'\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <v-button type=\"secondary\" [disabled]=\"true\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)'\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <v-button (clickEvent)=\"setPage('previous')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.previous' | translate\n      }}</v-button>\n    </span>\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <v-button (clickEvent)=\"setPage('next')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.next' | translate\n      }}</v-button>\n    </span>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: SelectComponent$1, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme"], outputs: ["selectedChange"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <v-button type=\"secondary\" (clickEvent)=\"editButtonClicked.emit(item)\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)'\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <v-button type=\"secondary\" [disabled]=\"true\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)'\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <v-button (clickEvent)=\"setPage('previous')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.previous' | translate\n      }}</v-button>\n    </span>\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <v-button (clickEvent)=\"setPage('next')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.nextArrow' | translate\n      }}</v-button>\n    </span>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: SelectComponent$1, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme"], outputs: ["selectedChange"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-table', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <v-button type=\"secondary\" (clickEvent)=\"editButtonClicked.emit(item)\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)'\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <v-button type=\"secondary\" [disabled]=\"true\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)'\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <v-button (clickEvent)=\"setPage('previous')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.previous' | translate\n      }}</v-button>\n    </span>\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <v-button (clickEvent)=\"setPage('next')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.next' | translate\n      }}</v-button>\n    </span>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\n"] }]
+            args: [{ selector: 'v-table', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <v-button type=\"secondary\" (clickEvent)=\"editButtonClicked.emit(item)\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)'\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <v-button type=\"secondary\" [disabled]=\"true\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)'\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <v-button (clickEvent)=\"setPage('previous')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.previous' | translate\n      }}</v-button>\n    </span>\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <v-button (clickEvent)=\"setPage('next')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.nextArrow' | translate\n      }}</v-button>\n    </span>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\n"] }]
         }], ctorParameters: function () { return [{ type: i3$1.BreakpointObserver }]; }, propDecorators: { items: [{
                 type: Input
             }], columns: [{
@@ -12483,6 +12603,7 @@ class PendingChangesComponent {
 class RenderInPageHeaderDirective {
     constructor(pageTitleService) {
         this.pageTitleService = pageTitleService;
+        this.fullWidth = false;
     }
     ngAfterContentInit() {
         this.pageTitleService.pageActionsViewContainerRef$.pipe(take$1(1)).subscribe(pageActionsVcr => {
@@ -12490,11 +12611,12 @@ class RenderInPageHeaderDirective {
                 pageActionsVcr.clear();
                 pageActionsVcr.createEmbeddedView(this.templateRef);
                 this.pageTitleService.setHasPageActions(true);
+                this.pageTitleService.setPageActionsFullWidth(this.fullWidth);
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderInPageHeaderDirective, deps: [{ token: PageTitleService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: { fullWidth: "fullWidth" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderInPageHeaderDirective, decorators: [{
             type: Directive,
@@ -12502,6 +12624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: PageTitleService }]; }, propDecorators: { templateRef: [{
                 type: ContentChild,
                 args: [TemplateRef]
+            }], fullWidth: [{
+                type: Input
             }] } });
 
 /*
@@ -12533,6 +12657,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ValtimoCdsOverflowButtonDirective {
+    constructor(document, elementRef, renderer, host) {
+        this.document = document;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.host = host;
+        this.width = 0;
+        this.WRAPPER_CLASS = v4();
+    }
+    ngAfterViewInit() {
+        this.openMutationObserver();
+        this.setHostInputs();
+        this.setStyles();
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+    }
+    setStyles() {
+        const overflowMenuElement = this.elementRef.nativeElement.firstChild;
+        const firstChildElement = overflowMenuElement.firstChild;
+        this.renderer.setStyle(overflowMenuElement, 'visibility', 'hidden');
+        this.renderer.setStyle(overflowMenuElement, 'display', 'flex');
+        this.renderer.setStyle(overflowMenuElement, 'width', 'min-content');
+        this.renderer.setStyle(overflowMenuElement, 'height', 'min-content');
+        this.renderer.setStyle(firstChildElement, 'visibility', 'visible');
+    }
+    setHostInputs() {
+        this.host.wrapperClass = this.WRAPPER_CLASS;
+        this.host.flip = true;
+    }
+    openMutationObserver() {
+        this._observer = new MutationObserver(() => {
+            const overflowMenuElements = Array.from(this.document.getElementsByClassName(this.WRAPPER_CLASS));
+            const overFlowMenuElement = overflowMenuElements[0];
+            if (overFlowMenuElement) {
+                this.setOverFlowMenuProperties(overFlowMenuElement);
+            }
+        });
+        this._observer.observe(this.document, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    setOverFlowMenuProperties(element) {
+        this.renderer.addClass(element, 'hide-after');
+        if (this.width) {
+            this.renderer.setStyle(element, 'width', `${this.width}px`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2$2.OverflowMenu }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: { width: "width" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[valtimoCdsOverflowButton]' }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2$2.OverflowMenu }]; }, propDecorators: { width: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ValtimoCdsOverflowButtonDirectiveModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirectiveModule, declarations: [ValtimoCdsOverflowButtonDirective], imports: [CommonModule], exports: [ValtimoCdsOverflowButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirectiveModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ValtimoCdsOverflowButtonDirective],
+                    imports: [CommonModule],
+                    exports: [ValtimoCdsOverflowButtonDirective],
+                }]
+        }] });
+
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
  *
@@ -12556,5 +12786,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, ButtonComponent, ButtonModule, CARBON_CONSTANTS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CardComponent, CardModule, CaseCountPipe, CommandClickDirectiveModule, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormComponent, FormIoCurrentUserComponent, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageContainerComponent, PageContentComponent, PageHeaderActionsComponent, PageHeaderComponent, PageHeaderIntroductionComponent, PageHeaderModule, PageModule, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, RenderInPageHeaderDirective, RenderInPageHeaderDirectiveModule, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SelectComponent$1 as SelectComponent, SelectModule, ShellService, SpinnerComponent, SpinnerModule, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TitleComponent, TitleModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VCardComponent, VCardModule, VModalComponent, VModalModule, VPageHeaderComponent, ValtimoCdsModalDirective, ValtimoCdsModalDirectiveModule, ValtimoModalService, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customDocumentApiUploaderType, customUploaderType, menuInitializer, pendingChangesGuard, registerDocumentenApiFormioUploadComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioUploadComponent };
+export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, ButtonComponent, ButtonModule, CARBON_CONSTANTS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CardComponent, CardModule, CaseCountPipe, CommandClickDirectiveModule, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormComponent, FormIoCurrentUserComponent, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageContainerComponent, PageContentComponent, PageHeaderActionsComponent, PageHeaderComponent, PageHeaderIntroductionComponent, PageHeaderModule, PageModule, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, RenderInPageHeaderDirective, RenderInPageHeaderDirectiveModule, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SelectComponent$1 as SelectComponent, SelectModule, ShellService, SpinnerComponent, SpinnerModule, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TitleComponent, TitleModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VCardComponent, VCardModule, VModalComponent, VModalModule, VPageHeaderComponent, ValtimoCdsModalDirective, ValtimoCdsModalDirectiveModule, ValtimoCdsOverflowButtonDirective, ValtimoCdsOverflowButtonDirectiveModule, ValtimoModalService, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customDocumentApiUploaderType, customUploaderType, menuInitializer, pendingChangesGuard, registerDocumentenApiFormioUploadComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioUploadComponent };
 //# sourceMappingURL=valtimo-components.mjs.map