@wolkabout/commons 0.3.2 → 0.3.4

package/fesm2022/wolkabout-commons.mjs

@@ -5621,13 +5621,20 @@ class NestedListViewComponent {
                 this.children.update(children => [...children, newChild].sort(dataSource.sortingFunction));
                 this.selectChild(newChild);
             });
-            dataControl.itemRemoved$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((id) => {
+            dataControl.itemRemoved$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((ids) => {
                 const breadcrumbs = this.breadcrumbs();
-                const index = breadcrumbs.findIndex(breadcrumb => breadcrumb.id === id);
-                this.breadcrumbs.update(breadcrumbs => breadcrumbs.slice(0, index));
-                const lastItem = this.breadcrumbs()[this.breadcrumbs().length - 1];
-                this.selectedItem.set(lastItem);
-                this.itemSelected.emit(lastItem.data);
+                const breadcrumbIndex = breadcrumbs.findIndex(breadcrumb => ids.includes(breadcrumb.id));
+                if (breadcrumbIndex !== -1) {
+                    this.breadcrumbs.update(breadcrumbs => breadcrumbs.slice(0, breadcrumbIndex));
+                    const lastItem = this.breadcrumbs()[this.breadcrumbs().length - 1];
+                    this.selectedItem.set(lastItem);
+                    this.itemSelected.emit(lastItem.data);
+                }
+                else {
+                    this.children.set(this.children().filter(child => !ids.includes(child.id)));
+                }
+                this.selectedItems.set([]);
+                this.itemsSelected.emit([]);
             });
             dataControl.itemUpdated$.pipe(map((item) => dataSource.prepareItem(item, false, this.countsMap())), takeUntilDestroyed(this.destroyRef)).subscribe((updatedItem) => {
                 this.breadcrumbs.update(breadcrumbs => breadcrumbs.map(breadcrumb => breadcrumb.id === updatedItem.id ? updatedItem : breadcrumb));
@@ -5827,11 +5834,11 @@ 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 }, 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\">\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n      <!-- HEADER -->\n      <div class=\"flex w-full flex-row gap-x-2\">\n\n        <!-- SEARCH -->\n        @if (!hideSearch()) {\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\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()}\">\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n              <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n            @if (defaultSearchAction(); as defaultAction) {\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\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\">\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n                </button>\n              </div>\n            }\n            @for (action of otherSearchActions(); track $index) {\n              @if (action.condition() | async) {\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n        <!-- BREADCRUMBS -->\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n          @if (!loadingBreadcrumbs()) {\n            @if (breadcrumbs(); as items) {\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\n                @for (item of items; let i = $index; track i) {\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\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-item' : ''\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        <div class=\"shrink-0 h-6\">\n                          <mat-icon>arrow_upward</mat-icon>\n                        </div>\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n                      </div>\n                    </mat-card>\n                  }\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\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-item' : '']\"\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n                      </div>\n                      @if (item.rightNumber && item.rightNumber > 0) {\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>\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n                        <mat-icon>drag_indicator</mat-icon>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <mat-divider class=\"w-full pb-2\"/>\n\n        <!-- CHILDREN -->\n        @if (selectedItem()) {\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n            @if (!loadingChildren()) {\n              @if (filteredChildren(); as items) {\n                @if (items.length) {\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n                    @for (item of items; track $index) {\n                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                            @if (item.icon; as icon) {\n                              <app-icon [icon]=\"icon\"/>\n                            }\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n                          </div>\n                          @if (item.rightNumber && item.rightNumber > 0) {\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>\n                          } @else if (enableDrag()) {\n                            <mat-icon>drag_indicator</mat-icon>\n                          }\n                        </div>\n                      </mat-card>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"flex flex-col grow justify-center items-center\">\n                    <ng-content select=\"[app-no-items-message]\"/>\n                  </div>\n                }\n              }\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <mat-spinner diameter=\"30\"></mat-spinner>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (width() !== 'full') {\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\n      @if (!selectedItems().length) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.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: i4$3.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$1.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\">\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n      <!-- HEADER -->\n      <div class=\"flex w-full flex-row gap-x-2\">\n\n        <!-- SEARCH -->\n        @if (!hideSearch()) {\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.shift)=\"$event.stopPropagation()\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n              <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n            @if (defaultSearchAction(); as defaultAction) {\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\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\">\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n                </button>\n              </div>\n            }\n            @for (action of otherSearchActions(); track $index) {\n              @if (action.condition() | async) {\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n        <!-- BREADCRUMBS -->\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n          @if (!loadingBreadcrumbs()) {\n            @if (breadcrumbs(); as items) {\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\n                @for (item of items; let i = $index; track i) {\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\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-item' : ''\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        <div class=\"shrink-0 h-6\">\n                          <mat-icon>arrow_upward</mat-icon>\n                        </div>\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n                      </div>\n                    </mat-card>\n                  }\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\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-item' : '']\"\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n                      </div>\n                      @if (item.rightNumber && item.rightNumber > 0) {\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>\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n                        <mat-icon>drag_indicator</mat-icon>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <mat-divider class=\"w-full pb-2\"/>\n\n        <!-- CHILDREN -->\n        @if (selectedItem()) {\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n            @if (!loadingChildren()) {\n              @if (filteredChildren(); as items) {\n                @if (items.length) {\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n                    @for (item of items; track $index) {\n                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                            @if (item.icon; as icon) {\n                              <app-icon [icon]=\"icon\"/>\n                            }\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n                          </div>\n                          @if (item.rightNumber && item.rightNumber > 0) {\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>\n                          } @else if (enableDrag()) {\n                            <mat-icon>drag_indicator</mat-icon>\n                          }\n                        </div>\n                      </mat-card>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"flex flex-col grow justify-center items-center\">\n                    <ng-content select=\"[app-no-items-message]\"/>\n                  </div>\n                }\n              }\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <mat-spinner diameter=\"30\"></mat-spinner>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (width() !== 'full') {\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\n      @if (!selectedItems().length) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.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: i4$3.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$1.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\">\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n      <!-- HEADER -->\n      <div class=\"flex w-full flex-row gap-x-2\">\n\n        <!-- SEARCH -->\n        @if (!hideSearch()) {\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\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()}\">\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n              <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n            @if (defaultSearchAction(); as defaultAction) {\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\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\">\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n                </button>\n              </div>\n            }\n            @for (action of otherSearchActions(); track $index) {\n              @if (action.condition() | async) {\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n        <!-- BREADCRUMBS -->\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n          @if (!loadingBreadcrumbs()) {\n            @if (breadcrumbs(); as items) {\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\n                @for (item of items; let i = $index; track i) {\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\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-item' : ''\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        <div class=\"shrink-0 h-6\">\n                          <mat-icon>arrow_upward</mat-icon>\n                        </div>\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n                      </div>\n                    </mat-card>\n                  }\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\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-item' : '']\"\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n                      </div>\n                      @if (item.rightNumber && item.rightNumber > 0) {\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>\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n                        <mat-icon>drag_indicator</mat-icon>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <mat-divider class=\"w-full pb-2\"/>\n\n        <!-- CHILDREN -->\n        @if (selectedItem()) {\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n            @if (!loadingChildren()) {\n              @if (filteredChildren(); as items) {\n                @if (items.length) {\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n                    @for (item of items; track $index) {\n                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                            @if (item.icon; as icon) {\n                              <app-icon [icon]=\"icon\"/>\n                            }\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n                          </div>\n                          @if (item.rightNumber && item.rightNumber > 0) {\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>\n                          } @else if (enableDrag()) {\n                            <mat-icon>drag_indicator</mat-icon>\n                          }\n                        </div>\n                      </mat-card>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"flex flex-col grow justify-center items-center\">\n                    <ng-content select=\"[app-no-items-message]\"/>\n                  </div>\n                }\n              }\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <mat-spinner diameter=\"30\"></mat-spinner>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (width() !== 'full') {\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\n      @if (!selectedItems().length) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+            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\">\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n      <!-- HEADER -->\n      <div class=\"flex w-full flex-row gap-x-2\">\n\n        <!-- SEARCH -->\n        @if (!hideSearch()) {\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.shift)=\"$event.stopPropagation()\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n              <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n            @if (defaultSearchAction(); as defaultAction) {\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\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\">\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n                </button>\n              </div>\n            }\n            @for (action of otherSearchActions(); track $index) {\n              @if (action.condition() | async) {\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n        <!-- BREADCRUMBS -->\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n          @if (!loadingBreadcrumbs()) {\n            @if (breadcrumbs(); as items) {\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\n                @for (item of items; let i = $index; track i) {\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\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-item' : ''\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        <div class=\"shrink-0 h-6\">\n                          <mat-icon>arrow_upward</mat-icon>\n                        </div>\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n                      </div>\n                    </mat-card>\n                  }\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\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-item' : '']\"\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n                      </div>\n                      @if (item.rightNumber && item.rightNumber > 0) {\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>\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n                        <mat-icon>drag_indicator</mat-icon>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <mat-divider class=\"w-full pb-2\"/>\n\n        <!-- CHILDREN -->\n        @if (selectedItem()) {\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n            @if (!loadingChildren()) {\n              @if (filteredChildren(); as items) {\n                @if (items.length) {\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n                    @for (item of items; track $index) {\n                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                            @if (item.icon; as icon) {\n                              <app-icon [icon]=\"icon\"/>\n                            }\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n                          </div>\n                          @if (item.rightNumber && item.rightNumber > 0) {\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>\n                          } @else if (enableDrag()) {\n                            <mat-icon>drag_indicator</mat-icon>\n                          }\n                        </div>\n                      </mat-card>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"flex flex-col grow justify-center items-center\">\n                    <ng-content select=\"[app-no-items-message]\"/>\n                  </div>\n                }\n              }\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <mat-spinner diameter=\"30\"></mat-spinner>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (width() !== 'full') {\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\n      @if (!selectedItems().length) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
@@ -5857,7 +5864,7 @@ class NestedListDataControl {
     deselectItem = () => this._changeSelection$.next(null);
     updateItem = (item) => this._itemUpdated$.next(item);
     addItem = (item) => this._childAdded.next(item);
-    removeItem = (id) => this._itemRemoved$.next(id);
+    removeItem = (id) => this._itemRemoved$.next(Array.isArray(id) ? id : [id]);
     associatedItemAdded = (scopeGuid) => this._associatedItemAdded$.next(scopeGuid);
     associatedItemRemoved = (scopeGuid) => this._associatedItemRemoved$.next(scopeGuid);
     associatedItemScopeChanged = (fromGuid, toGuid) => this._associatedItemScopeChanged$.next({ from: fromGuid, to: toGuid });
@@ -6042,6 +6049,9 @@ class StandardListViewComponent {
             dataControl.changeSelection$.pipe(takeUntilDestroyed(destroyRef)).subscribe((id) => {
                 const items = this.filteredItems();
                 const newSelection = items.find(item => item.id === id) ?? items[0];
+                if (!newSelection) {
+                    return;
+                }
                 this.selectItems(newSelection);
             });
             dataControl.itemAdded$.pipe(map((item) => dataSource.prepareItem(item)), takeUntilDestroyed(destroyRef)).subscribe((item) => {
@@ -6177,11 +6187,11 @@ 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 }, 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'}}\">\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n      <!-- SEARCH -->\n      @if (!hideSearch()) {\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n      }\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n        @if (!loadingData()) {\n          @if (filteredItems(); as items) {\n            @if (items.length) {\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n                @for (item of items; track $index) {\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n                        @if (item.rightIcon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                      </div>\n                    </mat-card>\n                  </ng-template>\n                }\n\n                <!--  Load more  -->\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n                      @if (loadingPage()) {\n                        <mat-spinner diameter=\"30\"></mat-spinner>\n                      } @else {\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"flex flex-col grow justify-center items-center\">\n            <mat-spinner diameter=\"30\"></mat-spinner>\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (!hideDetails()) {\n    <mat-divider [vertical]=\"true\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden\">\n      @if (selectedItems().length <= 1) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.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: i4$3.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$1.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'}}\">\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n      <!-- SEARCH -->\n      @if (!hideSearch()) {\n        <mat-form-field class=\"w-full small-input\" (keydown.shift)=\"$event.stopPropagation()\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n      }\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n        @if (!loadingData()) {\n          @if (filteredItems(); as items) {\n            @if (items.length) {\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n                @for (item of items; track $index) {\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n                        @if (item.rightIcon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                      </div>\n                    </mat-card>\n                  </ng-template>\n                }\n\n                <!--  Load more  -->\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n                      @if (loadingPage()) {\n                        <mat-spinner diameter=\"30\"></mat-spinner>\n                      } @else {\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"flex flex-col grow justify-center items-center\">\n            <mat-spinner diameter=\"30\"></mat-spinner>\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (!hideDetails()) {\n    <mat-divider [vertical]=\"true\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden\">\n      @if (selectedItems().length <= 1) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.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: i4$3.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$1.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'}}\">\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n      <!-- SEARCH -->\n      @if (!hideSearch()) {\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n      }\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n        @if (!loadingData()) {\n          @if (filteredItems(); as items) {\n            @if (items.length) {\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n                @for (item of items; track $index) {\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n                        @if (item.rightIcon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                      </div>\n                    </mat-card>\n                  </ng-template>\n                }\n\n                <!--  Load more  -->\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n                      @if (loadingPage()) {\n                        <mat-spinner diameter=\"30\"></mat-spinner>\n                      } @else {\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"flex flex-col grow justify-center items-center\">\n            <mat-spinner diameter=\"30\"></mat-spinner>\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (!hideDetails()) {\n    <mat-divider [vertical]=\"true\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden\">\n      @if (selectedItems().length <= 1) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+            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'}}\">\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n      <!-- SEARCH -->\n      @if (!hideSearch()) {\n        <mat-form-field class=\"w-full small-input\" (keydown.shift)=\"$event.stopPropagation()\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n      }\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n        @if (!loadingData()) {\n          @if (filteredItems(); as items) {\n            @if (items.length) {\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n                @for (item of items; track $index) {\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n                        @if (item.rightIcon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                      </div>\n                    </mat-card>\n                  </ng-template>\n                }\n\n                <!--  Load more  -->\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n                      @if (loadingPage()) {\n                        <mat-spinner diameter=\"30\"></mat-spinner>\n                      } @else {\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"flex flex-col grow justify-center items-center\">\n            <mat-spinner diameter=\"30\"></mat-spinner>\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (!hideDetails()) {\n    <mat-divider [vertical]=\"true\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden\">\n      @if (selectedItems().length <= 1) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]