@wolkabout/commons 0.1.10 → 0.2.0

package/fesm2022/wolkabout-commons.mjs

@@ -8,6 +8,7 @@ import * as i1$2 from '@angular/router';
 import { RouterLink, RouterOutlet, RouterLinkActive, Router, NavigationEnd } from '@angular/router';
 import * as i1$4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i2 from '@angular/material/form-field';
@@ -5439,6 +5440,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class NestedListViewComponent {
     destroyRef;
+    onKeyDown(event) {
+        if (event.key === 'Shift' && this.enableMultiSelect() && !this.ctrlPressed()) {
+            event.preventDefault();
+            this.shiftPressed.set(true);
+        }
+        if (event.key === 'Control' && this.enableMultiSelect()) {
+            event.preventDefault();
+            this.shiftPressed.set(false);
+            this.ctrlPressed.set(true);
+        }
+    }
+    onKeyUp(event) {
+        if (event.key === 'Shift' && this.enableMultiSelect() && !this.ctrlPressed()) {
+            event.preventDefault();
+            this.shiftPressed.set(false);
+        }
+        if (event.key === 'Control' && this.enableMultiSelect()) {
+            event.preventDefault();
+            this.ctrlPressed.set(false);
+        }
+    }
     dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : []));
     width = input('quarter', ...(ngDevMode ? [{ debugName: "width" }] : []));
@@ -5447,6 +5469,9 @@ class NestedListViewComponent {
     searchActions = input([], ...(ngDevMode ? [{ debugName: "searchActions" }] : []));
     defaultSearchAction = computed(() => this.searchActions().find((action) => !!action.defaultAction), ...(ngDevMode ? [{ debugName: "defaultSearchAction" }] : []));
     otherSearchActions = computed(() => this.searchActions().filter((action) => !action.defaultAction), ...(ngDevMode ? [{ debugName: "otherSearchActions" }] : []));
+    enableMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "enableMultiSelect" }] : []));
+    ctrlPressed = signal(false, ...(ngDevMode ? [{ debugName: "ctrlPressed" }] : []));
+    shiftPressed = signal(false, ...(ngDevMode ? [{ debugName: "shiftPressed" }] : []));
     widthClass = computed(() => {
         switch (this.width()) {
             case 'full':
@@ -5463,6 +5488,7 @@ class NestedListViewComponent {
     loadingBreadcrumbs = signal(true, ...(ngDevMode ? [{ debugName: "loadingBreadcrumbs" }] : []));
     loadingChildren = signal(true, ...(ngDevMode ? [{ debugName: "loadingChildren" }] : []));
     selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     hideSearch = input(false, ...(ngDevMode ? [{ debugName: "hideSearch" }] : []));
     nameSearchControl = new FormControl('');
     searchTerm = toSignal(this.nameSearchControl.valueChanges.pipe(startWith(this.nameSearchControl.getRawValue())));
@@ -5482,6 +5508,7 @@ class NestedListViewComponent {
         return this.children().filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
     }, ...(ngDevMode ? [{ debugName: "filteredChildren" }] : []));
     itemSelected = output();
+    itemsSelected = output();
     countsMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "countsMap" }] : []));
     currentScopes = signal(null, ...(ngDevMode ? [{ debugName: "currentScopes" }] : []));
     constructor(destroyRef) {
@@ -5565,6 +5592,11 @@ class NestedListViewComponent {
             const isDragging = this.isDragging();
             this.dragging.emit(isDragging);
         });
+        effect(() => {
+            const searchTerm = this.searchTerm();
+            this.selectedItems.set([]);
+            this.itemsSelected.emit([]);
+        });
     }
     initiateState(startingItem) {
         const dataSource = this.dataSource();
@@ -5607,6 +5639,8 @@ class NestedListViewComponent {
         const confirmationAction = this.selectionConfirmationAction();
         confirmationAction().pipe(take(1)).subscribe((response) => {
             if (response) {
+                this.selectedItems.set([]);
+                this.itemsSelected.emit([]);
                 if (this.selectedItem()?.id === item?.id) {
                     return;
                 }
@@ -5628,14 +5662,48 @@ class NestedListViewComponent {
         const confirmationAction = this.selectionConfirmationAction();
         confirmationAction().pipe(take(1)).subscribe((response) => {
             if (response) {
-                if (this.selectedItem()?.id === item?.id) {
-                    return;
+                if (this.ctrlPressed()) {
+                    const isSelected = this.isChildSelected(item);
+                    this.selectedItems.update((previous) => {
+                        if (isSelected) {
+                            return previous.filter((selected) => selected.id !== item.id);
+                        }
+                        else {
+                            return [...previous, item];
+                        }
+                    });
+                    this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+                }
+                else if (this.shiftPressed()) {
+                    window.getSelection()?.removeAllRanges();
+                    if (this.selectedItems().length === 0) {
+                        this.selectedItems.set(this.filteredChildren().slice(0, 1));
+                    }
+                    const firstSelectedItemIndex = this.filteredChildren().findIndex((selectedItem) => this.selectedItems()[0].id === selectedItem.id);
+                    const lastSelectedItemIndex = this.filteredChildren().findIndex((selectedItem) => this.selectedItems()[this.selectedItems().length - 1].id === selectedItem.id);
+                    const currentSelectionIndex = this.filteredChildren().findIndex((selectedItem) => item.id === selectedItem.id);
+                    if (currentSelectionIndex === -1 || firstSelectedItemIndex === -1 || lastSelectedItemIndex === -1) {
+                        return;
+                    }
+                    const startSelectedItemIndex = firstSelectedItemIndex < lastSelectedItemIndex ? firstSelectedItemIndex : lastSelectedItemIndex;
+                    const endSelectedItemIndex = firstSelectedItemIndex < lastSelectedItemIndex ? lastSelectedItemIndex : firstSelectedItemIndex;
+                    const startIndex = currentSelectionIndex < startSelectedItemIndex ? currentSelectionIndex : startSelectedItemIndex;
+                    const endIndex = currentSelectionIndex < endSelectedItemIndex ? endSelectedItemIndex : currentSelectionIndex;
+                    this.selectedItems.set(this.filteredChildren().slice(startIndex, endIndex + 1));
+                    this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+                }
+                else {
+                    if (this.selectedItem()?.id === item?.id) {
+                        return;
+                    }
+                    this.breadcrumbs.update(breadcrumbs => [...breadcrumbs, item]);
+                    this.nameSearchControl.setValue(null);
+                    this.selectedItem.set(item);
+                    this.selectedItems.set([]);
+                    this.itemSelected.emit(item.data);
+                    this.itemsSelected.emit([]);
+                    this.dataControl().persist(item.id);
                 }
-                this.breadcrumbs.update(breadcrumbs => [...breadcrumbs, item]);
-                this.nameSearchControl.setValue(null);
-                this.selectedItem.set(item);
-                this.itemSelected.emit(item.data);
-                this.dataControl().persist(item.id);
             }
         });
     }
@@ -5669,6 +5737,21 @@ class NestedListViewComponent {
         }
         this.countsMap.set(counts);
     }
+    toggleSelectAll() {
+        if (this.selectedItems().length < this.filteredChildren().length) {
+            this.selectedItems.set(this.filteredChildren());
+        }
+        else {
+            this.selectedItems.set([]);
+        }
+        this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+    }
+    isChildSelected(item) {
+        return !!this.selectedItems().find((selected) => selected.id === item.id);
+    }
+    isBreadcrumbSelected(item) {
+        return this.selectedItem()?.id === item.id;
+    }
     refreshCount(guid) {
         const count = this.countsMap().get(guid);
         const rightNumber = count && count > 0 ? count : undefined;
@@ -5676,12 +5759,18 @@ class NestedListViewComponent {
         this.children.update(items => items.map(item => item.id === guid ? { ...item, rightNumber } : item));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (item.rightNumber && item.rightNumber > 0) {\r\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon; as icon) {\r\n                              <app-icon [icon]=\"icon\"/>\r\n                            }\r\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (item.rightNumber && item.rightNumber > 0) {\r\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                          } @else if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (width() !== 'full') {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\"  [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : ''\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '',  shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (item.rightNumber && item.rightNumber > 0) {\r\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon; as icon) {\r\n                              <app-icon [icon]=\"icon\"/>\r\n                            }\r\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (item.rightNumber && item.rightNumber > 0) {\r\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                          } @else if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (width() !== 'full') {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      @if (!selectedItems().length) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === filteredChildren().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (item.rightNumber && item.rightNumber > 0) {\r\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon; as icon) {\r\n                              <app-icon [icon]=\"icon\"/>\r\n                            }\r\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (item.rightNumber && item.rightNumber > 0) {\r\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                          } @else if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (width() !== 'full') {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], disableThresholdId: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableThresholdId", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], searchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchActions", required: false }] }], selectionConfirmationAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionConfirmationAction", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], rootButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootButtonText", required: false }] }], enableDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDrag", required: false }] }], dragging: [{ type: i0.Output, args: ["dragging"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+            args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\"  [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : ''\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '',  shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (item.rightNumber && item.rightNumber > 0) {\r\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon; as icon) {\r\n                              <app-icon [icon]=\"icon\"/>\r\n                            }\r\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (item.rightNumber && item.rightNumber > 0) {\r\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                          } @else if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (width() !== 'full') {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      @if (!selectedItems().length) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === filteredChildren().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup', ['$event']]
+            }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], disableThresholdId: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableThresholdId", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], searchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchActions", required: false }] }], enableMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMultiSelect", required: false }] }], selectionConfirmationAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionConfirmationAction", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], rootButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootButtonText", required: false }] }], enableDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDrag", required: false }] }], dragging: [{ type: i0.Output, args: ["dragging"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemsSelected: [{ type: i0.Output, args: ["itemsSelected"] }] } });
 
 class NestedListDataControl {
     navigationPersistence = inject(NavigationPersistenceService);
@@ -5797,13 +5886,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [{ type: i1$6.DomSanitizer }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class StandardListViewComponent {
+    onKeyDown(event) {
+        if (event.key === 'Shift' && this.enableMultiSelect() && !this.ctrlPressed()) {
+            event.preventDefault();
+            this.shiftPressed.set(true);
+        }
+        if (event.key === 'Control' && this.enableMultiSelect()) {
+            event.preventDefault();
+            this.shiftPressed.set(false);
+            this.ctrlPressed.set(true);
+        }
+    }
+    onKeyUp(event) {
+        if (event.key === 'Shift' && this.enableMultiSelect() && !this.ctrlPressed()) {
+            event.preventDefault();
+            this.shiftPressed.set(false);
+        }
+        if (event.key === 'Control' && this.enableMultiSelect()) {
+            event.preventDefault();
+            this.ctrlPressed.set(false);
+        }
+    }
     dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : []));
     position = input('outer', ...(ngDevMode ? [{ debugName: "position" }] : []));
     isColoredInput = input(false, ...(ngDevMode ? [{ debugName: "isColoredInput" }] : []));
+    enableMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "enableMultiSelect" }] : []));
+    ctrlPressed = signal(false, ...(ngDevMode ? [{ debugName: "ctrlPressed" }] : []));
+    shiftPressed = signal(false, ...(ngDevMode ? [{ debugName: "shiftPressed" }] : []));
     loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : []));
     loadingPage = signal(false, ...(ngDevMode ? [{ debugName: "loadingPage" }] : []));
-    selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     hideSearch = input(false, ...(ngDevMode ? [{ debugName: "hideSearch" }] : []));
     hideDetails = input(false, ...(ngDevMode ? [{ debugName: "hideDetails" }] : []));
     hidePadding = input(false, ...(ngDevMode ? [{ debugName: "hidePadding" }] : [])); // TODO Remove, but the component should have innate outer padding :(
@@ -5824,6 +5937,7 @@ class StandardListViewComponent {
         return this.items().filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
     }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
     itemSelected = output();
+    itemsSelected = output();
     itemTemplate = contentChild('standardListItemTemplate', ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
     constructor(destroyRef) {
         afterNextRender(() => {
@@ -5834,7 +5948,7 @@ class StandardListViewComponent {
                 return of([]);
             }), takeUntilDestroyed(destroyRef)).subscribe((items) => {
                 this.loadingData.set(false);
-                this.selectedItem.set(null);
+                this.selectedItems.set([]);
                 this.items.set(items.sort(dataSource.sortingFunction));
                 if (items.length === 0) {
                     this.selectEmpty();
@@ -5842,40 +5956,45 @@ class StandardListViewComponent {
                 }
                 const initialSelection = dataSource.initialSelection();
                 if (initialSelection) {
-                    this.selectItem(items.find(item => item.id === initialSelection) ?? items[0]);
+                    this.selectItems(items.find(item => item.id === initialSelection) ?? items[0]);
                 }
                 else {
-                    this.selectItem(items[0]);
+                    this.selectItems(items[0]);
                 }
             });
             dataControl.changeSelection$.pipe(takeUntilDestroyed(destroyRef)).subscribe((id) => {
                 const items = this.filteredItems();
                 const newSelection = items.find(item => item.id === id) ?? items[0];
-                this.selectItem(newSelection);
+                this.selectItems(newSelection);
             });
             dataControl.itemAdded$.pipe(map((item) => dataSource.prepareItem(item)), takeUntilDestroyed(destroyRef)).subscribe((item) => {
                 this.items.set([...this.items(), item].sort(dataSource.sortingFunction));
-                this.selectItem(item);
+                this.selectItems(item);
             });
-            dataControl.itemRemoved$.pipe(takeUntilDestroyed(destroyRef)).subscribe((id) => {
+            dataControl.itemRemoved$.pipe(takeUntilDestroyed(destroyRef)).subscribe((ids) => {
                 if (this.items().length === 0) {
                     this.selectEmpty();
                     return;
                 }
-                const deletedItemPosition = this.items().map((item) => item.id).indexOf(id);
-                this.items.set(this.items().filter(item => item.id !== id));
+                const deletedItemPosition = this.items().findIndex((item) => item.id === ids[0]);
+                this.items.set(this.items().filter(item => !ids.includes(item.id)));
                 if (deletedItemPosition > 0) {
-                    this.selectItem(this.items()[deletedItemPosition - 1]);
+                    this.selectItems(this.items()[deletedItemPosition - 1]);
                 }
                 else if (deletedItemPosition === 0 && this.items().length > 0) {
-                    this.selectItem(this.items()[0]);
+                    this.selectItems(this.items()[0]);
                 }
                 else {
                     this.selectEmpty();
                 }
             });
-            dataControl.itemUpdated$.pipe(map((item) => dataSource.prepareItem(item)), takeUntilDestroyed(destroyRef)).subscribe((updatedItem) => {
-                this.items.update(items => items.map(item => item.id === updatedItem.id ? updatedItem : item).sort(dataSource.sortingFunction));
+            dataControl.itemUpdated$.pipe(map((items) => items.map((item) => dataSource.prepareItem(item))), takeUntilDestroyed(destroyRef)).subscribe((updatedItems) => {
+                this.items.update(items => items
+                    .map(item => {
+                    const updatedItem = updatedItems.find((newItem) => newItem.id === item.id);
+                    return updatedItem ?? item;
+                })
+                    .sort(dataSource.sortingFunction));
             });
             dataControl.itemPartiallyUpdated$.pipe(takeUntilDestroyed(destroyRef)).subscribe((partialUpdate) => {
                 this.items.update(items => items.map(item => item.id === partialUpdate.id ? dataSource.prepareItem(partialUpdate.update(item.data)) : item).sort(dataSource.sortingFunction));
@@ -5883,36 +6002,83 @@ class StandardListViewComponent {
         });
         afterRenderEffect(() => {
             const items = this.filteredItems();
-            const selected = this.selectedItem();
+            const selectedItems = this.selectedItems();
             if (items.length === 0) {
-                if (!selected) {
+                if (!selectedItems.length) {
                     return;
                 }
                 this.selectEmpty();
                 return;
             }
-            if (!selected) {
-                this.selectItem(items[0]);
+            if (!selectedItems.length) {
+                this.selectItems(items[0]);
             }
-            const selectedItemStillVisible = items.find((item) => item.id === selected?.id);
+            const selectedItemStillVisible = items.find((item) => selectedItems.find((selected) => selected.id === item.id));
             if (!selectedItemStillVisible) {
-                this.selectItem(items[0]);
+                this.selectItems(items[0]);
             }
         });
+        effect(() => {
+            const searchTerm = this.searchTerm();
+            this.selectedItems.set([]);
+            this.itemsSelected.emit([]);
+        });
     }
-    selectItem(item) {
-        if (this.selectedItem()?.id === item?.id) {
-            return;
+    selectItems(item) {
+        const isSelected = this.isSelected(item);
+        if (this.ctrlPressed()) {
+            this.selectedItems.update((previous) => {
+                if (isSelected) {
+                    return previous.length > 1 ? previous.filter((selected) => selected.id !== item.id) : previous;
+                }
+                else {
+                    return [...previous, item];
+                }
+            });
+            this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+        }
+        else if (this.shiftPressed()) {
+            window.getSelection()?.removeAllRanges();
+            const firstSelectedItemIndex = this.filteredItems().findIndex((selectedItem) => this.selectedItems()[0].id === selectedItem.id);
+            const lastSelectedItemIndex = this.filteredItems().findIndex((selectedItem) => this.selectedItems()[this.selectedItems().length - 1].id === selectedItem.id);
+            const currentSelectionIndex = this.filteredItems().findIndex((selectedItem) => item.id === selectedItem.id);
+            if (currentSelectionIndex === -1 || firstSelectedItemIndex === -1 || lastSelectedItemIndex === -1) {
+                return;
+            }
+            const startSelectedItemIndex = firstSelectedItemIndex < lastSelectedItemIndex ? firstSelectedItemIndex : lastSelectedItemIndex;
+            const endSelectedItemIndex = firstSelectedItemIndex < lastSelectedItemIndex ? lastSelectedItemIndex : firstSelectedItemIndex;
+            const startIndex = currentSelectionIndex < startSelectedItemIndex ? currentSelectionIndex : startSelectedItemIndex;
+            const endIndex = currentSelectionIndex < endSelectedItemIndex ? endSelectedItemIndex : currentSelectionIndex;
+            this.selectedItems.set(this.filteredItems().slice(startIndex, endIndex + 1));
+            this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+        }
+        else {
+            if (isSelected && this.selectedItems().length === 1) {
+                return;
+            }
+            this.selectedItems.set([item]);
+            this.itemSelected.emit(item.data);
+            this.itemsSelected.emit([]);
+            this.dataControl().persist(item.id);
         }
-        this.selectedItem.set(item);
-        this.itemSelected.emit(item.data);
-        this.dataControl().persist(item.id);
     }
     selectEmpty() {
-        this.selectedItem.set(null);
+        this.selectedItems.set([]);
         this.itemSelected.emit(null);
         this.dataControl().persist(null);
     }
+    isSelected(item) {
+        return !!this.selectedItems().find((selected) => selected.id === item.id);
+    }
+    toggleSelectAll() {
+        if (this.selectedItems().length < this.filteredItems().length) {
+            this.selectedItems.set(this.filteredItems());
+        }
+        else {
+            this.selectedItems.set([]);
+        }
+        this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+    }
     loadMore() {
         this.loadingPage.set(true);
         this.dataSource().nextPage().pipe(map((data) => data.map((value) => this.dataSource().prepareItem(value))), catchError(() => {
@@ -5924,12 +6090,18 @@ class StandardListViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this)}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '']\"\r\n                              [appScrollIntoView]=\"selectedItems().length ? false : isSelected(item)\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      @if (selectedItems().length <= 1) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === filteredItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], hidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePadding", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemTemplate: [{ type: i0.ContentChild, args: ['standardListItemTemplate', { isSignal: true }] }] } });
+            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this)}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '']\"\r\n                              [appScrollIntoView]=\"selectedItems().length ? false : isSelected(item)\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      @if (selectedItems().length <= 1) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === filteredItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup', ['$event']]
+            }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], enableMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMultiSelect", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], hidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePadding", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemsSelected: [{ type: i0.Output, args: ["itemsSelected"] }], itemTemplate: [{ type: i0.ContentChild, args: ['standardListItemTemplate', { isSignal: true }] }] } });
 
 class StandardListDataControl {
     navigationPersistence = inject(NavigationPersistenceService);
@@ -5944,10 +6116,10 @@ class StandardListDataControl {
     }
     selectItem = (id) => this._changeSelection$.next(id);
     deselectItem = () => this._changeSelection$.next(null);
-    updateItem = (item) => this._itemUpdated$.next(item);
+    updateItem = (item) => this._itemUpdated$.next(Array.isArray(item) ? item : [item]);
     updateItemPartially = (id, update) => this._itemPartiallyUpdated$.next({ id, update });
     addItem = (item) => this._itemAdded$.next(item);
-    removeItem = (id) => this._itemRemoved$.next(id);
+    removeItem = (id) => this._itemRemoved$.next(Array.isArray(id) ? id : [id]);
     /**
      * Internal event hook. Do not use outside the Standard List Component
      */
@@ -6185,7 +6357,7 @@ class ValueInputBooleanComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     onTouched = () => {
@@ -6273,7 +6445,7 @@ class ValueInputColorComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.hexadecimalColorValidator]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -6376,7 +6548,7 @@ class ValueInputDateComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // Control Value Accessor
@@ -6463,7 +6635,7 @@ class ValueInputEnumComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -6548,7 +6720,7 @@ class ValueInputHexadecimalComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.hexadecimalValidator]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     onTouched = () => {
@@ -6644,7 +6816,7 @@ class ValueInputLinkComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.linkValidator]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -6742,8 +6914,8 @@ class ValueInputLocationComponent {
             const validators = this.validators() ?? [];
             this.formGroup.get('latitude')?.setValidators([...validators, Validators.min(-90), Validators.max(90)]);
             this.formGroup.get('longitude')?.setValidators([...validators, Validators.min(-180), Validators.max(180)]);
-            this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false });
-            this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false });
+            this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: true });
+            this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -6849,7 +7021,7 @@ class ValueInputNumericComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.numberValidator()]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     validate() {
@@ -6946,7 +7118,7 @@ class ValueInputStringComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -7036,7 +7208,7 @@ class ValueInputVectorComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.validateOptions]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
         effect(() => {
             const options = this.options();
@@ -7152,7 +7324,7 @@ class ValueInputDurationComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.durationValidator]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     writeValue(value) {
@@ -7259,6 +7431,7 @@ class ValueInputComponent {
             const validationConditions = this.validationConditions();
             const dataType = this.dataType();
             this.setValidators(validationConditions, dataType);
+            this.formControl.updateValueAndValidity();
         });
     }
     validate() {
@@ -7308,6 +7481,7 @@ class ValueInputComponent {
             validators.push(Validators.minLength(+validationConditions.minSize));
         }
         this.validators.set(validators);
+        console.log("formControl in value-input.component", this.formControl);
     }
     DataType = DataType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });