@wolkabout/commons 0.1.11 → 0.2.1

package/fesm2022/wolkabout-commons.mjs

@@ -8,6 +8,7 @@ import * as i1$2 from '@angular/router';
 import { RouterLink, RouterOutlet, RouterLinkActive, Router, NavigationEnd } from '@angular/router';
 import * as i1$4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i2 from '@angular/material/form-field';
@@ -23,11 +24,11 @@ import * as i8$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i8 from '@angular/material/autocomplete';
 import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import * as i4$3 from '@angular/material/datepicker';
+import * as i4$4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatTreeModule } from '@angular/material/tree';
-import * as i5$2 from '@angular/material/progress-spinner';
+import * as i5$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i7 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -42,12 +43,12 @@ import { MatDialogModule, MAT_DIALOG_DATA, MatDialog } from '@angular/material/d
 import { MatSortModule } from '@angular/material/sort';
 import * as i4$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i5$1 from '@angular/material/card';
+import * as i4$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule, MatIconRegistry, MatIcon } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import * as i4$4 from '@angular/material/tabs';
+import * as i4$5 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i0 from '@angular/core';
@@ -4541,7 +4542,7 @@ class CardLabeledValueComponent {
     }, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : []));
     hasPermission = toSignal(toObservable(this.permissionFunction).pipe(switchMap(obs => obs)), { initialValue: false });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\n  [matTooltip]=\"tooltip() | translate\"\n  matTooltipPosition=\"above\"\n>\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\n      <div class=\"text-mat-sys-primary flex items-center grow\">\n        <ng-content/>\n      </div>\n    </div>\n    @if (editFunction() && hasPermission()) {\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\n        <mat-icon>{{ icon() }}</mat-icon>\n      </button>\n    }\n  </div>\n</mat-card>\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\n  [matTooltip]=\"tooltip() | translate\"\n  matTooltipPosition=\"above\"\n>\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\n      <div class=\"text-mat-sys-primary flex items-center grow\">\n        <ng-content/>\n      </div>\n    </div>\n    @if (editFunction() && hasPermission()) {\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\n        <mat-icon>{{ icon() }}</mat-icon>\n      </button>\n    }\n  </div>\n</mat-card>\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
             type: Component,
@@ -4724,7 +4725,7 @@ class DateRangeInputComponent {
                 useExisting: forwardRef(() => DateRangeInputComponent),
                 multi: true,
             }
-        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\n  @if (isInForm()) {\n    <mat-form-field class=\"flex\">\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\n        <mat-error>\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n        </mat-error>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n      }\n    </mat-form-field>\n  } @else {\n    <div class=\"flex\">\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SimpleDatePipe, name: "simpleDate" }] });
+        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\n  @if (isInForm()) {\n    <mat-form-field class=\"flex\">\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\n        <mat-error>\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n        </mat-error>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n      }\n    </mat-form-field>\n  } @else {\n    <div class=\"flex\">\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SimpleDatePipe, name: "simpleDate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateRangeInputComponent, decorators: [{
             type: Component,
@@ -4848,7 +4849,7 @@ class DateTimeFormFieldComponent {
                 useExisting: forwardRef(() => DateTimeFormFieldComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-4\">\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      @for (error of getDateErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\n      @for (error of getTimeErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "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: i4$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-4\">\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      @for (error of getDateErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\n      @for (error of getTimeErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "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: i4$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimeFormFieldComponent, decorators: [{
             type: Component,
@@ -5018,6 +5019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class GoogleMapComponent {
     translateService;
     simpleDateTimePipe;
+    ZOOM_BASE = 4;
     map = viewChild.required(GoogleMap);
     googleMapId = input.required(...(ngDevMode ? [{ debugName: "googleMapId" }] : []));
     darkTheme = input.required(...(ngDevMode ? [{ debugName: "darkTheme" }] : []));
@@ -5025,6 +5027,9 @@ class GoogleMapComponent {
     pinColor = input.required(...(ngDevMode ? [{ debugName: "pinColor" }] : []));
     markerClicked = output();
     zoom = signal(4, ...(ngDevMode ? [{ debugName: "zoom" }] : []));
+    canZoomIn = computed(() => this.zoom() < 22, ...(ngDevMode ? [{ debugName: "canZoomIn" }] : []));
+    canZoomOut = computed(() => this.zoom() > 2, ...(ngDevMode ? [{ debugName: "canZoomOut" }] : []));
+    zoomPercentage = computed(() => Math.round(this.zoom() / this.ZOOM_BASE * 100), ...(ngDevMode ? [{ debugName: "zoomPercentage" }] : []));
     mapOptions = computed(() => {
         return {
             mapId: this.googleMapId(),
@@ -5083,19 +5088,37 @@ class GoogleMapComponent {
                     this.mapBounds.extend(position);
                 }
             });
-            this.map().fitBounds(this.mapBounds, { top: 100, right: 20, left: 20, bottom: 20 });
-            // Update default zoom
-            this.zoom.set(markers.length === 1 ? 18 : (this.map().getZoom() ?? 4));
+            this.fitToMarkers();
             const markerClusterer = this.clusterer();
             markerClusterer.clearMarkers();
             markerClusterer.addMarkers(markers);
         });
     }
-    changeZoom(number) {
-        this.zoom.update(value => Math.max(Math.min(value + number, 22), 2)); // Zoom level must be between 1 and 21
+    syncZoom() {
+        const newZoom = this.map().getZoom();
+        if (newZoom !== undefined) {
+            this.zoom.set(newZoom);
+        }
+    }
+    changeZoom(delta) {
+        this.zoom.update(current => Math.max(Math.min(current + delta, 22), 2));
     }
-    fitBounds() {
-        this.map().fitBounds(this.mapBounds, { top: 100, right: 10, left: 10, bottom: 10 });
+    fitToMarkers() {
+        const markers = this.markers();
+        if (markers.length === 1) {
+            const position = markers[0].position;
+            if (position) {
+                this.map().panTo(position);
+            }
+            this.zoom.set(18);
+        }
+        else if (markers.length > 1) {
+            this.map().fitBounds(this.mapBounds);
+            const fittedZoom = this.map().getZoom();
+            if (fittedZoom !== undefined) {
+                this.zoom.set(fittedZoom);
+            }
+        }
     }
     openDetails(mapItem) {
         this.markerClicked.emit(mapItem);
@@ -5184,11 +5207,11 @@ class GoogleMapComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, deps: [{ token: i1$1.TranslateService }, { token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"map-wrapper\">\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\n  <div class=\"map-controls\">\n    <mat-card>\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>filter_center_focus</mat-icon>\n      </button>\n    </mat-card>\n    <mat-card>\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </mat-card>\n    <mat-card>\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </mat-card>\n  </div>\n</div>\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"map-wrapper\">\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" (zoomChanged)=\"syncZoom()\" class=\"map-full\"/>\n  <div class=\"bottom-controls\">\n    <div class=\"control-group\">\n      <button class=\"icon-btn\" (click)=\"changeZoom(-1)\" [disabled]=\"!canZoomOut()\" [class.disabled]=\"!canZoomOut()\" [matTooltip]=\"'DASHBOARDS.MAP_WIDGET_ZOOM_OUT' | translate\" type=\"button\">\n        <mat-icon>zoom_out</mat-icon>\n      </button>\n      <span class=\"zoom-level\" (click)=\"fitToMarkers()\" [matTooltip]=\"'DASHBOARDS.MAP_WIDGET_ZOOM_RESET' | translate\">{{ zoomPercentage() }}%</span>\n      <button class=\"icon-btn\" (click)=\"changeZoom(+1)\" [disabled]=\"!canZoomIn()\" [class.disabled]=\"!canZoomIn()\" [matTooltip]=\"'DASHBOARDS.MAP_WIDGET_ZOOM_IN' | translate\" type=\"button\">\n        <mat-icon>zoom_in</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.bottom-controls{display:flex;align-items:center;justify-content:center;gap:12px;background-color:transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:200;padding:12px 20px 16px}.control-group{display:flex;align-items:center;gap:4px;background:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000001f}.zoom-level{min-width:44px;text-align:center;color:var(--mat-sys-on-surface);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:16px;transition:background-color .2s}.zoom-level:hover{background-color:var(--mat-sys-surface-container-high)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;transition:all .2s ease}.icon-btn:hover:not(.disabled){background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface)}.icon-btn.disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "ngmodule", type: SharedModule }, { 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: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-google-map', imports: [GoogleMap, SharedModule], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\n  <div class=\"map-controls\">\n    <mat-card>\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>filter_center_focus</mat-icon>\n      </button>\n    </mat-card>\n    <mat-card>\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </mat-card>\n    <mat-card>\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </mat-card>\n  </div>\n</div>\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"] }]
+            args: [{ selector: 'app-google-map', imports: [GoogleMap, SharedModule], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" (zoomChanged)=\"syncZoom()\" class=\"map-full\"/>\n  <div class=\"bottom-controls\">\n    <div class=\"control-group\">\n      <button class=\"icon-btn\" (click)=\"changeZoom(-1)\" [disabled]=\"!canZoomOut()\" [class.disabled]=\"!canZoomOut()\" [matTooltip]=\"'DASHBOARDS.MAP_WIDGET_ZOOM_OUT' | translate\" type=\"button\">\n        <mat-icon>zoom_out</mat-icon>\n      </button>\n      <span class=\"zoom-level\" (click)=\"fitToMarkers()\" [matTooltip]=\"'DASHBOARDS.MAP_WIDGET_ZOOM_RESET' | translate\">{{ zoomPercentage() }}%</span>\n      <button class=\"icon-btn\" (click)=\"changeZoom(+1)\" [disabled]=\"!canZoomIn()\" [class.disabled]=\"!canZoomIn()\" [matTooltip]=\"'DASHBOARDS.MAP_WIDGET_ZOOM_IN' | translate\" type=\"button\">\n        <mat-icon>zoom_in</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.bottom-controls{display:flex;align-items:center;justify-content:center;gap:12px;background-color:transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:200;padding:12px 20px 16px}.control-group{display:flex;align-items:center;gap:4px;background:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000001f}.zoom-level{min-width:44px;text-align:center;color:var(--mat-sys-on-surface);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:16px;transition:background-color .2s}.zoom-level:hover{background-color:var(--mat-sys-surface-container-high)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;transition:all .2s ease}.icon-btn:hover:not(.disabled){background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface)}.icon-btn.disabled{opacity:.4;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: SimpleDateTimePipe }], propDecorators: { map: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GoogleMap), { isSignal: true }] }], googleMapId: [{ type: i0.Input, args: [{ isSignal: true, alias: "googleMapId", required: true }] }], darkTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkTheme", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], pinColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinColor", required: true }] }], markerClicked: [{ type: i0.Output, args: ["markerClicked"] }] } });
 
 class ImagePreviewComponent {
@@ -5398,7 +5421,7 @@ class LocalSortTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, deps: [{ token: TenantPropertiesService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\n  <thead>\n  <tr>\n    @for (column of columns(); track column.name) {\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\n        <div class=\"flex flex-row items-center gap-x-2\">\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\n          @if (column.shouldSort) {\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n          }\n        </div>\n      </th>\n    }\n  </tr>\n  </thead>\n  <tbody>\n    @if (loading()) {\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\n        <mat-spinner diameter=\"30\"></mat-spinner>\n      </div>\n    } @else {\n      @if (displayData(); as displayData){\n        @if (!noValuesMessage()) {\n          @if (!sorting()) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\n                @for (column of columns(); track column.name) {\n                  <td class=\"cursor-pointer truncate\">\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\n              </span>\n                }\n              </tr>\n            </cdk-virtual-scroll-viewport>\n          }\n        } @else {\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\n            <span>{{ noValuesMessage() | translate }}</span>\n          </div>\n        }\n      }\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\n  <thead>\n  <tr>\n    @for (column of columns(); track column.name) {\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\n        <div class=\"flex flex-row items-center gap-x-2\">\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\n          @if (column.shouldSort) {\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n          }\n        </div>\n      </th>\n    }\n  </tr>\n  </thead>\n  <tbody>\n    @if (loading()) {\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\n        <mat-spinner diameter=\"30\"></mat-spinner>\n      </div>\n    } @else {\n      @if (displayData(); as displayData){\n        @if (!noValuesMessage()) {\n          @if (!sorting()) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\n                @for (column of columns(); track column.name) {\n                  <td class=\"cursor-pointer truncate\">\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\n              </span>\n                }\n              </tr>\n            </cdk-virtual-scroll-viewport>\n          }\n        } @else {\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\n            <span>{{ noValuesMessage() | translate }}</span>\n          </div>\n        }\n      }\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, decorators: [{
             type: Component,
@@ -5439,6 +5462,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class NestedListViewComponent {
     destroyRef;
+    onKeyDown(event) {
+        if (event.key === 'Shift' && this.enableMultiSelect() && !this.ctrlPressed()) {
+            event.preventDefault();
+            this.shiftPressed.set(true);
+        }
+        if (event.key === 'Control' && this.enableMultiSelect()) {
+            event.preventDefault();
+            this.shiftPressed.set(false);
+            this.ctrlPressed.set(true);
+        }
+    }
+    onKeyUp(event) {
+        if (event.key === 'Shift' && this.enableMultiSelect() && !this.ctrlPressed()) {
+            event.preventDefault();
+            this.shiftPressed.set(false);
+        }
+        if (event.key === 'Control' && this.enableMultiSelect()) {
+            event.preventDefault();
+            this.ctrlPressed.set(false);
+        }
+    }
     dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : []));
     width = input('quarter', ...(ngDevMode ? [{ debugName: "width" }] : []));
@@ -5447,6 +5491,9 @@ class NestedListViewComponent {
     searchActions = input([], ...(ngDevMode ? [{ debugName: "searchActions" }] : []));
     defaultSearchAction = computed(() => this.searchActions().find((action) => !!action.defaultAction), ...(ngDevMode ? [{ debugName: "defaultSearchAction" }] : []));
     otherSearchActions = computed(() => this.searchActions().filter((action) => !action.defaultAction), ...(ngDevMode ? [{ debugName: "otherSearchActions" }] : []));
+    enableMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "enableMultiSelect" }] : []));
+    ctrlPressed = signal(false, ...(ngDevMode ? [{ debugName: "ctrlPressed" }] : []));
+    shiftPressed = signal(false, ...(ngDevMode ? [{ debugName: "shiftPressed" }] : []));
     widthClass = computed(() => {
         switch (this.width()) {
             case 'full':
@@ -5463,6 +5510,7 @@ class NestedListViewComponent {
     loadingBreadcrumbs = signal(true, ...(ngDevMode ? [{ debugName: "loadingBreadcrumbs" }] : []));
     loadingChildren = signal(true, ...(ngDevMode ? [{ debugName: "loadingChildren" }] : []));
     selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     hideSearch = input(false, ...(ngDevMode ? [{ debugName: "hideSearch" }] : []));
     nameSearchControl = new FormControl('');
     searchTerm = toSignal(this.nameSearchControl.valueChanges.pipe(startWith(this.nameSearchControl.getRawValue())));
@@ -5482,6 +5530,7 @@ class NestedListViewComponent {
         return this.children().filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
     }, ...(ngDevMode ? [{ debugName: "filteredChildren" }] : []));
     itemSelected = output();
+    itemsSelected = output();
     countsMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "countsMap" }] : []));
     currentScopes = signal(null, ...(ngDevMode ? [{ debugName: "currentScopes" }] : []));
     constructor(destroyRef) {
@@ -5565,6 +5614,11 @@ class NestedListViewComponent {
             const isDragging = this.isDragging();
             this.dragging.emit(isDragging);
         });
+        effect(() => {
+            const searchTerm = this.searchTerm();
+            this.selectedItems.set([]);
+            this.itemsSelected.emit([]);
+        });
     }
     initiateState(startingItem) {
         const dataSource = this.dataSource();
@@ -5607,6 +5661,8 @@ class NestedListViewComponent {
         const confirmationAction = this.selectionConfirmationAction();
         confirmationAction().pipe(take(1)).subscribe((response) => {
             if (response) {
+                this.selectedItems.set([]);
+                this.itemsSelected.emit([]);
                 if (this.selectedItem()?.id === item?.id) {
                     return;
                 }
@@ -5628,14 +5684,48 @@ class NestedListViewComponent {
         const confirmationAction = this.selectionConfirmationAction();
         confirmationAction().pipe(take(1)).subscribe((response) => {
             if (response) {
-                if (this.selectedItem()?.id === item?.id) {
-                    return;
+                if (this.ctrlPressed()) {
+                    const isSelected = this.isChildSelected(item);
+                    this.selectedItems.update((previous) => {
+                        if (isSelected) {
+                            return previous.filter((selected) => selected.id !== item.id);
+                        }
+                        else {
+                            return [...previous, item];
+                        }
+                    });
+                    this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+                }
+                else if (this.shiftPressed()) {
+                    window.getSelection()?.removeAllRanges();
+                    if (this.selectedItems().length === 0) {
+                        this.selectedItems.set(this.filteredChildren().slice(0, 1));
+                    }
+                    const firstSelectedItemIndex = this.filteredChildren().findIndex((selectedItem) => this.selectedItems()[0].id === selectedItem.id);
+                    const lastSelectedItemIndex = this.filteredChildren().findIndex((selectedItem) => this.selectedItems()[this.selectedItems().length - 1].id === selectedItem.id);
+                    const currentSelectionIndex = this.filteredChildren().findIndex((selectedItem) => item.id === selectedItem.id);
+                    if (currentSelectionIndex === -1 || firstSelectedItemIndex === -1 || lastSelectedItemIndex === -1) {
+                        return;
+                    }
+                    const startSelectedItemIndex = firstSelectedItemIndex < lastSelectedItemIndex ? firstSelectedItemIndex : lastSelectedItemIndex;
+                    const endSelectedItemIndex = firstSelectedItemIndex < lastSelectedItemIndex ? lastSelectedItemIndex : firstSelectedItemIndex;
+                    const startIndex = currentSelectionIndex < startSelectedItemIndex ? currentSelectionIndex : startSelectedItemIndex;
+                    const endIndex = currentSelectionIndex < endSelectedItemIndex ? endSelectedItemIndex : currentSelectionIndex;
+                    this.selectedItems.set(this.filteredChildren().slice(startIndex, endIndex + 1));
+                    this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+                }
+                else {
+                    if (this.selectedItem()?.id === item?.id) {
+                        return;
+                    }
+                    this.breadcrumbs.update(breadcrumbs => [...breadcrumbs, item]);
+                    this.nameSearchControl.setValue(null);
+                    this.selectedItem.set(item);
+                    this.selectedItems.set([]);
+                    this.itemSelected.emit(item.data);
+                    this.itemsSelected.emit([]);
+                    this.dataControl().persist(item.id);
                 }
-                this.breadcrumbs.update(breadcrumbs => [...breadcrumbs, item]);
-                this.nameSearchControl.setValue(null);
-                this.selectedItem.set(item);
-                this.itemSelected.emit(item.data);
-                this.dataControl().persist(item.id);
             }
         });
     }
@@ -5669,6 +5759,21 @@ class NestedListViewComponent {
         }
         this.countsMap.set(counts);
     }
+    toggleSelectAll() {
+        if (this.selectedItems().length < this.filteredChildren().length) {
+            this.selectedItems.set(this.filteredChildren());
+        }
+        else {
+            this.selectedItems.set([]);
+        }
+        this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+    }
+    isChildSelected(item) {
+        return !!this.selectedItems().find((selected) => selected.id === item.id);
+    }
+    isBreadcrumbSelected(item) {
+        return this.selectedItem()?.id === item.id;
+    }
     refreshCount(guid) {
         const count = this.countsMap().get(guid);
         const rightNumber = count && count > 0 ? count : undefined;
@@ -5676,12 +5781,18 @@ class NestedListViewComponent {
         this.children.update(items => items.map(item => item.id === guid ? { ...item, rightNumber } : item));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\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\">\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]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [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]=\"[selectedItem()?.id === item.id ? '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]=\"selectedItem()?.id === item.id ? '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 regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"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]=\"selectedItem()?.id === item.id ? '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]=\"selectedItem()?.id === item.id ? '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      <ng-content select=\"[app-details]\"/>\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)}.regular-item.disabled{color:unset}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\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' : ''\">\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' : '']\"\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' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"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 === filteredChildren().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)}.regular-item.disabled{color:unset}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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\">\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]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [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]=\"[selectedItem()?.id === item.id ? '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]=\"selectedItem()?.id === item.id ? '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 regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"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]=\"selectedItem()?.id === item.id ? '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]=\"selectedItem()?.id === item.id ? '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      <ng-content select=\"[app-details]\"/>\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)}.regular-item.disabled{color:unset}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], disableThresholdId: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableThresholdId", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], searchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchActions", required: false }] }], selectionConfirmationAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionConfirmationAction", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], rootButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootButtonText", required: false }] }], enableDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDrag", required: false }] }], dragging: [{ type: i0.Output, args: ["dragging"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+            args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\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' : ''\">\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' : '']\"\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' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"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 === filteredChildren().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)}.regular-item.disabled{color:unset}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup', ['$event']]
+            }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], disableThresholdId: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableThresholdId", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], searchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchActions", required: false }] }], enableMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMultiSelect", required: false }] }], selectionConfirmationAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionConfirmationAction", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], rootButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootButtonText", required: false }] }], enableDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDrag", required: false }] }], dragging: [{ type: i0.Output, args: ["dragging"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemsSelected: [{ type: i0.Output, args: ["itemsSelected"] }] } });
 
 class NestedListDataControl {
     navigationPersistence = inject(NavigationPersistenceService);
@@ -5797,13 +5908,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [{ type: i1$6.DomSanitizer }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class StandardListViewComponent {
+    onKeyDown(event) {
+        if (event.key === 'Shift' && this.enableMultiSelect() && !this.ctrlPressed()) {
+            event.preventDefault();
+            this.shiftPressed.set(true);
+        }
+        if (event.key === 'Control' && this.enableMultiSelect()) {
+            event.preventDefault();
+            this.shiftPressed.set(false);
+            this.ctrlPressed.set(true);
+        }
+    }
+    onKeyUp(event) {
+        if (event.key === 'Shift' && this.enableMultiSelect() && !this.ctrlPressed()) {
+            event.preventDefault();
+            this.shiftPressed.set(false);
+        }
+        if (event.key === 'Control' && this.enableMultiSelect()) {
+            event.preventDefault();
+            this.ctrlPressed.set(false);
+        }
+    }
     dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : []));
     position = input('outer', ...(ngDevMode ? [{ debugName: "position" }] : []));
     isColoredInput = input(false, ...(ngDevMode ? [{ debugName: "isColoredInput" }] : []));
+    enableMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "enableMultiSelect" }] : []));
+    ctrlPressed = signal(false, ...(ngDevMode ? [{ debugName: "ctrlPressed" }] : []));
+    shiftPressed = signal(false, ...(ngDevMode ? [{ debugName: "shiftPressed" }] : []));
     loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : []));
     loadingPage = signal(false, ...(ngDevMode ? [{ debugName: "loadingPage" }] : []));
-    selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     hideSearch = input(false, ...(ngDevMode ? [{ debugName: "hideSearch" }] : []));
     hideDetails = input(false, ...(ngDevMode ? [{ debugName: "hideDetails" }] : []));
     hidePadding = input(false, ...(ngDevMode ? [{ debugName: "hidePadding" }] : [])); // TODO Remove, but the component should have innate outer padding :(
@@ -5824,6 +5959,7 @@ class StandardListViewComponent {
         return this.items().filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
     }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
     itemSelected = output();
+    itemsSelected = output();
     itemTemplate = contentChild('standardListItemTemplate', ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
     constructor(destroyRef) {
         afterNextRender(() => {
@@ -5834,7 +5970,7 @@ class StandardListViewComponent {
                 return of([]);
             }), takeUntilDestroyed(destroyRef)).subscribe((items) => {
                 this.loadingData.set(false);
-                this.selectedItem.set(null);
+                this.selectedItems.set([]);
                 this.items.set(items.sort(dataSource.sortingFunction));
                 if (items.length === 0) {
                     this.selectEmpty();
@@ -5842,40 +5978,45 @@ class StandardListViewComponent {
                 }
                 const initialSelection = dataSource.initialSelection();
                 if (initialSelection) {
-                    this.selectItem(items.find(item => item.id === initialSelection) ?? items[0]);
+                    this.selectItems(items.find(item => item.id === initialSelection) ?? items[0]);
                 }
                 else {
-                    this.selectItem(items[0]);
+                    this.selectItems(items[0]);
                 }
             });
             dataControl.changeSelection$.pipe(takeUntilDestroyed(destroyRef)).subscribe((id) => {
                 const items = this.filteredItems();
                 const newSelection = items.find(item => item.id === id) ?? items[0];
-                this.selectItem(newSelection);
+                this.selectItems(newSelection);
             });
             dataControl.itemAdded$.pipe(map((item) => dataSource.prepareItem(item)), takeUntilDestroyed(destroyRef)).subscribe((item) => {
                 this.items.set([...this.items(), item].sort(dataSource.sortingFunction));
-                this.selectItem(item);
+                this.selectItems(item);
             });
-            dataControl.itemRemoved$.pipe(takeUntilDestroyed(destroyRef)).subscribe((id) => {
+            dataControl.itemRemoved$.pipe(takeUntilDestroyed(destroyRef)).subscribe((ids) => {
                 if (this.items().length === 0) {
                     this.selectEmpty();
                     return;
                 }
-                const deletedItemPosition = this.items().map((item) => item.id).indexOf(id);
-                this.items.set(this.items().filter(item => item.id !== id));
+                const deletedItemPosition = this.items().findIndex((item) => item.id === ids[0]);
+                this.items.set(this.items().filter(item => !ids.includes(item.id)));
                 if (deletedItemPosition > 0) {
-                    this.selectItem(this.items()[deletedItemPosition - 1]);
+                    this.selectItems(this.items()[deletedItemPosition - 1]);
                 }
                 else if (deletedItemPosition === 0 && this.items().length > 0) {
-                    this.selectItem(this.items()[0]);
+                    this.selectItems(this.items()[0]);
                 }
                 else {
                     this.selectEmpty();
                 }
             });
-            dataControl.itemUpdated$.pipe(map((item) => dataSource.prepareItem(item)), takeUntilDestroyed(destroyRef)).subscribe((updatedItem) => {
-                this.items.update(items => items.map(item => item.id === updatedItem.id ? updatedItem : item).sort(dataSource.sortingFunction));
+            dataControl.itemUpdated$.pipe(map((items) => items.map((item) => dataSource.prepareItem(item))), takeUntilDestroyed(destroyRef)).subscribe((updatedItems) => {
+                this.items.update(items => items
+                    .map(item => {
+                    const updatedItem = updatedItems.find((newItem) => newItem.id === item.id);
+                    return updatedItem ?? item;
+                })
+                    .sort(dataSource.sortingFunction));
             });
             dataControl.itemPartiallyUpdated$.pipe(takeUntilDestroyed(destroyRef)).subscribe((partialUpdate) => {
                 this.items.update(items => items.map(item => item.id === partialUpdate.id ? dataSource.prepareItem(partialUpdate.update(item.data)) : item).sort(dataSource.sortingFunction));
@@ -5883,36 +6024,83 @@ class StandardListViewComponent {
         });
         afterRenderEffect(() => {
             const items = this.filteredItems();
-            const selected = this.selectedItem();
+            const selectedItems = this.selectedItems();
             if (items.length === 0) {
-                if (!selected) {
+                if (!selectedItems.length) {
                     return;
                 }
                 this.selectEmpty();
                 return;
             }
-            if (!selected) {
-                this.selectItem(items[0]);
+            if (!selectedItems.length) {
+                this.selectItems(items[0]);
             }
-            const selectedItemStillVisible = items.find((item) => item.id === selected?.id);
+            const selectedItemStillVisible = items.find((item) => selectedItems.find((selected) => selected.id === item.id));
             if (!selectedItemStillVisible) {
-                this.selectItem(items[0]);
+                this.selectItems(items[0]);
             }
         });
+        effect(() => {
+            const searchTerm = this.searchTerm();
+            this.selectedItems.set([]);
+            this.itemsSelected.emit([]);
+        });
     }
-    selectItem(item) {
-        if (this.selectedItem()?.id === item?.id) {
-            return;
+    selectItems(item) {
+        const isSelected = this.isSelected(item);
+        if (this.ctrlPressed()) {
+            this.selectedItems.update((previous) => {
+                if (isSelected) {
+                    return previous.length > 1 ? previous.filter((selected) => selected.id !== item.id) : previous;
+                }
+                else {
+                    return [...previous, item];
+                }
+            });
+            this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+        }
+        else if (this.shiftPressed()) {
+            window.getSelection()?.removeAllRanges();
+            const firstSelectedItemIndex = this.filteredItems().findIndex((selectedItem) => this.selectedItems()[0].id === selectedItem.id);
+            const lastSelectedItemIndex = this.filteredItems().findIndex((selectedItem) => this.selectedItems()[this.selectedItems().length - 1].id === selectedItem.id);
+            const currentSelectionIndex = this.filteredItems().findIndex((selectedItem) => item.id === selectedItem.id);
+            if (currentSelectionIndex === -1 || firstSelectedItemIndex === -1 || lastSelectedItemIndex === -1) {
+                return;
+            }
+            const startSelectedItemIndex = firstSelectedItemIndex < lastSelectedItemIndex ? firstSelectedItemIndex : lastSelectedItemIndex;
+            const endSelectedItemIndex = firstSelectedItemIndex < lastSelectedItemIndex ? lastSelectedItemIndex : firstSelectedItemIndex;
+            const startIndex = currentSelectionIndex < startSelectedItemIndex ? currentSelectionIndex : startSelectedItemIndex;
+            const endIndex = currentSelectionIndex < endSelectedItemIndex ? endSelectedItemIndex : currentSelectionIndex;
+            this.selectedItems.set(this.filteredItems().slice(startIndex, endIndex + 1));
+            this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+        }
+        else {
+            if (isSelected && this.selectedItems().length === 1) {
+                return;
+            }
+            this.selectedItems.set([item]);
+            this.itemSelected.emit(item.data);
+            this.itemsSelected.emit([]);
+            this.dataControl().persist(item.id);
         }
-        this.selectedItem.set(item);
-        this.itemSelected.emit(item.data);
-        this.dataControl().persist(item.id);
     }
     selectEmpty() {
-        this.selectedItem.set(null);
+        this.selectedItems.set([]);
         this.itemSelected.emit(null);
         this.dataControl().persist(null);
     }
+    isSelected(item) {
+        return !!this.selectedItems().find((selected) => selected.id === item.id);
+    }
+    toggleSelectAll() {
+        if (this.selectedItems().length < this.filteredItems().length) {
+            this.selectedItems.set(this.filteredItems());
+        }
+        else {
+            this.selectedItems.set([]);
+        }
+        this.itemsSelected.emit(this.selectedItems().map((item) => item.data));
+    }
     loadMore() {
         this.loadingPage.set(true);
         this.dataSource().nextPage().pipe(map((data) => data.map((value) => this.dataSource().prepareItem(value))), catchError(() => {
@@ -5924,12 +6112,18 @@ class StandardListViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\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, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\n                              [matTooltip]=\"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]=\"selectedItem()?.id === item.id ? '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      <ng-content select=\"[app-details]\"/>\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)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\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)}\"/>\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' : '']\"\n                              [appScrollIntoView]=\"selectedItems().length ? false : isSelected(item)\"\n                              [matTooltip]=\"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 === filteredItems().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)}.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, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\n                              [matTooltip]=\"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]=\"selectedItem()?.id === item.id ? '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      <ng-content select=\"[app-details]\"/>\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)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], hidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePadding", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemTemplate: [{ type: i0.ContentChild, args: ['standardListItemTemplate', { isSignal: true }] }] } });
+            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\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)}\"/>\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' : '']\"\n                              [appScrollIntoView]=\"selectedItems().length ? false : isSelected(item)\"\n                              [matTooltip]=\"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 === filteredItems().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)}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup', ['$event']]
+            }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], enableMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMultiSelect", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], hidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePadding", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemsSelected: [{ type: i0.Output, args: ["itemsSelected"] }], itemTemplate: [{ type: i0.ContentChild, args: ['standardListItemTemplate', { isSignal: true }] }] } });
 
 class StandardListDataControl {
     navigationPersistence = inject(NavigationPersistenceService);
@@ -5944,10 +6138,10 @@ class StandardListDataControl {
     }
     selectItem = (id) => this._changeSelection$.next(id);
     deselectItem = () => this._changeSelection$.next(null);
-    updateItem = (item) => this._itemUpdated$.next(item);
+    updateItem = (item) => this._itemUpdated$.next(Array.isArray(item) ? item : [item]);
     updateItemPartially = (id, update) => this._itemPartiallyUpdated$.next({ id, update });
     addItem = (item) => this._itemAdded$.next(item);
-    removeItem = (id) => this._itemRemoved$.next(id);
+    removeItem = (id) => this._itemRemoved$.next(Array.isArray(id) ? id : [id]);
     /**
      * Internal event hook. Do not use outside the Standard List Component
      */
@@ -6036,7 +6230,7 @@ class TabulatedChipViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedChipViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabulatedChipViewComponent, isStandalone: true, selector: "app-tabulated-chip-view", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, queryParamHandling: { classPropertyName: "queryParamHandling", publicName: "queryParamHandling", isSignal: true, isRequired: false, transformFunction: null }, saveLastActiveTab: { classPropertyName: "saveLastActiveTab", publicName: "saveLastActiveTab", isSignal: true, isRequired: false, transformFunction: null }, navBarLayoutClasses: { classPropertyName: "navBarLayoutClasses", publicName: "navBarLayoutClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\n    @for (tab of tabs(); track $index) {\n      @if (!tab.condition || (tab.condition | async)) {\n        <div\n          mat-tab-link\n          [active]=\"isActive(tab.route)\"\n          (click)=\"navigate(tab.route)\"\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\n          class=\"rounded mr-2 navigation-tab\"\n          [attr.data-test]=\"tab.name + '_tab'\"\n        >\n          @if (tab.icon) {\n            <mat-icon>{{ tab.icon }}</mat-icon>\n          }\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\n        </div>\n      }\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet/>\n  </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { 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: TabulatedChipViewComponent, isStandalone: true, selector: "app-tabulated-chip-view", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, queryParamHandling: { classPropertyName: "queryParamHandling", publicName: "queryParamHandling", isSignal: true, isRequired: false, transformFunction: null }, saveLastActiveTab: { classPropertyName: "saveLastActiveTab", publicName: "saveLastActiveTab", isSignal: true, isRequired: false, transformFunction: null }, navBarLayoutClasses: { classPropertyName: "navBarLayoutClasses", publicName: "navBarLayoutClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\n    @for (tab of tabs(); track $index) {\n      @if (!tab.condition || (tab.condition | async)) {\n        <div\n          mat-tab-link\n          [active]=\"isActive(tab.route)\"\n          (click)=\"navigate(tab.route)\"\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\n          class=\"rounded mr-2 navigation-tab\"\n          [attr.data-test]=\"tab.name + '_tab'\"\n        >\n          @if (tab.icon) {\n            <mat-icon>{{ tab.icon }}</mat-icon>\n          }\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\n        </div>\n      }\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet/>\n  </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { 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: TabulatedChipViewComponent, decorators: [{
             type: Component,
@@ -6067,7 +6261,7 @@ class TabulatedViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs", queryParamHandling: "queryParamHandling", saveLastActiveTab: "saveLastActiveTab" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\n    <div\n      *ngFor=\"let tab of tabs\"\n      mat-tab-link\n      [active]=\"isActive(tab.route)\"\n      (click)=\"navigate(tab.route)\"\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n      [attr.data-test]=\"tab.name + '_tab'\"\n    >\n      <mat-icon *ngIf=\"tab.icon\">\n        {{ tab.icon }}\n      </mat-icon>\n      {{ tab.name | translate }}\n    </div>\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs", queryParamHandling: "queryParamHandling", saveLastActiveTab: "saveLastActiveTab" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\n    <div\n      *ngFor=\"let tab of tabs\"\n      mat-tab-link\n      [active]=\"isActive(tab.route)\"\n      (click)=\"navigate(tab.route)\"\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n      [attr.data-test]=\"tab.name + '_tab'\"\n    >\n      <mat-icon *ngIf=\"tab.icon\">\n        {{ tab.icon }}\n      </mat-icon>\n      {{ tab.name | translate }}\n    </div>\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, decorators: [{
             type: Component,