@wolkabout/commons 0.0.33 → 0.0.35

package/fesm2022/wolkabout-commons.mjs

@@ -148,77 +148,6 @@ var DataType;
     DataType["LINK"] = "LINK";
 })(DataType || (DataType = {}));
 
-var Permission;
-(function (Permission) {
-    // ACCESS
-    Permission["ACCESS_MODULE_PLATFORM_MANAGEMENT_FEATURE_APPLICATION"] = "ACCESS.MODULE_PLATFORM_MANAGEMENT.FEATURE_APPLICATION";
-    Permission["ACCESS_MODULE_PLATFORM_MANAGEMENT_FEATURE_PLATFORM_CONFIGURATION"] = "ACCESS.MODULE_PLATFORM_MANAGEMENT.FEATURE_PLATFORM_CONFIGURATION";
-    Permission["ACCESS_MODULE_PLATFORM_MANAGEMENT_FEATURE_TENANT_MANAGEMENT"] = "ACCESS.MODULE_PLATFORM_MANAGEMENT.FEATURE_TENANT_MANAGEMENT";
-    Permission["ACCESS_MODULE_USER_MANAGEMENT_FEATURE_APPLICATION"] = "ACCESS.MODULE_USER_MANAGEMENT.FEATURE_APPLICATION";
-    Permission["ACCESS_MODULE_USER_MANAGEMENT_FEATURE_USER_MANAGEMENT"] = "ACCESS.MODULE_USER_MANAGEMENT.FEATURE_USER_MANAGEMENT";
-    Permission["ACCESS_MODULE_USER_MANAGEMENT_FEATURE_USER_GROUPS_MANAGEMENT"] = "ACCESS.MODULE_USER_MANAGEMENT.FEATURE_USER_GROUPS_MANAGEMENT";
-    Permission["ACCESS_MODULE_USER_MANAGEMENT_FEATURE_GLOBAL_ROLES_MANAGEMENT"] = "ACCESS.MODULE_USER_MANAGEMENT.FEATURE_GLOBAL_ROLES_MANAGEMENT";
-    Permission["ACCESS_MODULE_USER_MANAGEMENT_FEATURE_INVENTORY_ROLES_MANAGEMENT"] = "ACCESS.MODULE_USER_MANAGEMENT.FEATURE_INVENTORY_ROLES_MANAGEMENT";
-    Permission["ACCESS_MODULE_TENANT_MANAGEMENT_FEATURE_APPLICATION"] = "ACCESS.MODULE_TENANT_MANAGEMENT.FEATURE_APPLICATION";
-    Permission["ACCESS_MODULE_TENANT_MANAGEMENT_FEATURE_READING_TYPES_MANAGEMENT"] = "ACCESS.MODULE_TENANT_MANAGEMENT.FEATURE_READING_TYPES_MANAGEMENT";
-    Permission["ACCESS_MODULE_TENANT_MANAGEMENT_FEATURE_INTEGRATIONS"] = "ACCESS.MODULE_TENANT_MANAGEMENT.FEATURE_INTEGRATIONS";
-    Permission["ACCESS_MODULE_TENANT_MANAGEMENT_FEATURE_ACCESS_KEYS"] = "ACCESS.MODULE_TENANT_MANAGEMENT.FEATURE_ACCESS_KEYS";
-    Permission["ACCESS_MODULE_TENANT_MANAGEMENT_FEATURE_AUDIT_LOG"] = "ACCESS.MODULE_TENANT_MANAGEMENT.FEATURE_AUDIT_LOG";
-    Permission["ACCESS_MODULE_DEVICES_AND_EDGE_FEATURE_APPLICATION"] = "ACCESS.MODULE_DEVICES_AND_EDGE.FEATURE_APPLICATION";
-    Permission["ACCESS_MODULE_DEVICES_AND_EDGE_FEATURE_DEVICES"] = "ACCESS.MODULE_DEVICES_AND_EDGE.FEATURE_DEVICES";
-    Permission["ACCESS_MODULE_DEVICES_AND_EDGE_FEATURE_TYPES"] = "ACCESS.MODULE_DEVICES_AND_EDGE.FEATURE_TYPES";
-    Permission["ACCESS_MODULE_DEVICES_AND_EDGE_FEATURE_GROUPS"] = "ACCESS.MODULE_DEVICES_AND_EDGE.FEATURE_GROUPS";
-    Permission["ACCESS_MODULE_DATA_MANAGEMENT_FEATURE_APPLICATION"] = "ACCESS.MODULE_DATA_MANAGEMENT.FEATURE_APPLICATION";
-    Permission["ACCESS_MODULE_DATA_MANAGEMENT_FEATURE_DATA_MANAGEMENT"] = "ACCESS.MODULE_DATA_MANAGEMENT.FEATURE_DATA_MANAGEMENT";
-    Permission["ACCESS_MODULE_DATA_MANAGEMENT_FEATURE_TYPES"] = "ACCESS.MODULE_DATA_MANAGEMENT.FEATURE_TYPES";
-    Permission["ACCESS_MODULE_RULE_ENGINE_FEATURE_APPLICATION"] = "ACCESS.MODULE_RULE_ENGINE.FEATURE_APPLICATION";
-    Permission["ACCESS_MODULE_DASHBOARDS_FEATURE_APPLICATION"] = "ACCESS.MODULE_DASHBOARDS.FEATURE_APPLICATION";
-    Permission["ACCESS_MODULE_MESSAGES_FEATURE_APPLICATION"] = "ACCESS.MODULE_MESSAGES.FEATURE_APPLICATION";
-    Permission["ACCESS_MODULE_MESSAGES_FEATURE_MESSAGE_TEMPLATES"] = "ACCESS.MODULE_MESSAGES.FEATURE_MESSAGE_TEMPLATES";
-    Permission["ACCESS_MODULE_MESSAGES_FEATURE_MESSAGES"] = "ACCESS.MODULE_MESSAGES.FEATURE_MESSAGES";
-    // PLATFORM_MANAGEMENT
-    Permission["PLATFORM_MANAGEMENT_SETTINGS_VIEW"] = "PLATFORM_MANAGEMENT.SETTINGS.VIEW";
-    Permission["PLATFORM_MANAGEMENT_SETTINGS_MANAGE"] = "PLATFORM_MANAGEMENT.SETTINGS.MANAGE";
-    Permission["PLATFORM_MANAGEMENT_TENANTS_VIEW"] = "PLATFORM_MANAGEMENT.TENANTS.VIEW";
-    Permission["PLATFORM_MANAGEMENT_TENANTS_MANAGE"] = "PLATFORM_MANAGEMENT.TENANTS.MANAGE";
-    // USER_MANAGEMENT
-    Permission["USER_MANAGEMENT_USERS_VIEW"] = "USER_MANAGEMENT.USERS.VIEW";
-    Permission["USER_MANAGEMENT_USERS_MANAGE"] = "USER_MANAGEMENT.USERS.MANAGE";
-    Permission["USER_MANAGEMENT_USER_GROUPS_VIEW"] = "USER_MANAGEMENT.USER_GROUPS.VIEW";
-    Permission["USER_MANAGEMENT_USER_GROUPS_MANAGE"] = "USER_MANAGEMENT.USER_GROUPS.MANAGE";
-    Permission["USER_MANAGEMENT_GLOBAL_ROLES_MANAGE"] = "USER_MANAGEMENT.GLOBAL_ROLES.MANAGE";
-    Permission["USER_MANAGEMENT_INVENTORY_ROLES_MANAGE"] = "USER_MANAGEMENT.INVENTORY_ROLES.MANAGE";
-    // TENANT_CONFIGURATION
-    Permission["TENANT_CONFIGURATION_READING_TYPE_MANAGEMENT_MANAGE"] = "TENANT_CONFIGURATION.READING_TYPE_MANAGEMENT.MANAGE";
-    Permission["TENANT_CONFIGURATION_INTEGRATIONS_VIEW"] = "TENANT_CONFIGURATION.INTEGRATIONS.VIEW";
-    Permission["TENANT_CONFIGURATION_INTEGRATIONS_MANAGE"] = "TENANT_CONFIGURATION.INTEGRATIONS.MANAGE";
-    Permission["TENANT_CONFIGURATION_ACCESS_KEYS_VIEW"] = "TENANT_CONFIGURATION.ACCESS_KEYS.VIEW";
-    Permission["TENANT_CONFIGURATION_ACCESS_KEYS_MANAGE"] = "TENANT_CONFIGURATION.ACCESS_KEYS.MANAGE";
-    Permission["TENANT_CONFIGURATION_SETTINGS_MANAGE"] = "TENANT_CONFIGURATION.SETTINGS.MANAGE";
-    // DEVICE_MANAGEMENT
-    Permission["DEVICE_MANAGEMENT_DEVICE_GROUPS_VIEW"] = "DEVICE_MANAGEMENT.DEVICE_GROUPS.VIEW";
-    Permission["DEVICE_MANAGEMENT_DEVICE_GROUPS_MANAGE"] = "DEVICE_MANAGEMENT.DEVICE_GROUPS.MANAGE";
-    Permission["DEVICE_MANAGEMENT_DEVICE_GROUPS_ACCESS_VIEW"] = "DEVICE_MANAGEMENT.DEVICE_GROUPS.ACCESS_VIEW";
-    Permission["DEVICE_MANAGEMENT_DEVICE_GROUPS_ACCESS_MANAGE"] = "DEVICE_MANAGEMENT.DEVICE_GROUPS.ACCESS_MANAGE";
-    // DATA_MANAGEMENT
-    Permission["DATA_MANAGEMENT_DATA_VIEW"] = "DATA_MANAGEMENT.DATA.VIEW";
-    Permission["DATA_MANAGEMENT_DATA_MANAGE"] = "DATA_MANAGEMENT.DATA.MANAGE";
-    Permission["DATA_MANAGEMENT_DATA_ACCESS_VIEW"] = "DATA_MANAGEMENT.DATA.ACCESS_VIEW";
-    Permission["DATA_MANAGEMENT_DATA_ACCESS_MANAGE"] = "DATA_MANAGEMENT.DATA.ACCESS_MANAGE";
-    Permission["DATA_MANAGEMENT_DATA_DASHBOARDS_VIEW"] = "DATA_MANAGEMENT.DATA.DASHBOARDS_VIEW";
-    Permission["DATA_MANAGEMENT_DATA_DASHBOARDS_MANAGE"] = "DATA_MANAGEMENT.DATA.DASHBOARDS_MANAGE";
-    Permission["DATA_MANAGEMENT_SEMANTIC_TYPES_VIEW"] = "DATA_MANAGEMENT.SEMANTIC_TYPES.VIEW";
-    Permission["DATA_MANAGEMENT_SEMANTIC_TYPES_MANAGE"] = "DATA_MANAGEMENT.SEMANTIC_TYPES.MANAGE";
-    Permission["DATA_MANAGEMENT_SEMANTIC_TYPES_ACCESS_VIEW"] = "DATA_MANAGEMENT.SEMANTIC_TYPES.ACCESS_VIEW";
-    Permission["DATA_MANAGEMENT_SEMANTIC_TYPES_ACCESS_MANAGE"] = "DATA_MANAGEMENT.SEMANTIC_TYPES.ACCESS_MANAGE";
-    // RULE_ENGINE
-    Permission["RULE_ENGINE_RULE_VIEW"] = "RULE_ENGINE.RULE.VIEW";
-    Permission["RULE_ENGINE_RULE_MANAGE"] = "RULE_ENGINE.RULE.MANAGE";
-    // MESSAGES
-    Permission["MESSAGES_TEMPLATES_VIEW"] = "MESSAGES.TEMPLATES.VIEW";
-    Permission["MESSAGES_TEMPLATES_MANAGE"] = "MESSAGES.TEMPLATES.MANAGE";
-})(Permission || (Permission = {}));
-
 const AUTHENTICATION_CLIENT = new InjectionToken('AUTHENTICATION_CLIENT');
 
 class AuthenticationService {
@@ -4633,25 +4562,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class DragDropFileUploadComponent {
     controlDir;
-    notificationService;
     dragDropZone;
     fileInput;
     accept = '.*';
-    multiple;
+    multiple = false;
     prompt = 'COMMON.DRAG_DROP_PROMPT';
-    highlight = false;
-    disabled = false;
+    highlight = signal(false, ...(ngDevMode ? [{ debugName: "highlight" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     files$ = new BehaviorSubject(null);
     TRUNCATE_NAME_LIMIT = 24;
     destroy$ = new Subject();
-    constructor(controlDir, notificationService) {
+    constructor(controlDir) {
         this.controlDir = controlDir;
-        this.notificationService = notificationService;
         controlDir.valueAccessor = this;
     }
     onTouched;
     onValidatorChange;
-    onChange = (value) => { };
+    onChange = (value) => {
+    };
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -4662,7 +4590,7 @@ class DragDropFileUploadComponent {
         this.onValidatorChange = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.disabled.set(isDisabled);
     }
     validate() {
         return this.controlDir.control?.valid ? null : { dragDropFileUploadControl: { valid: false } };
@@ -4681,41 +4609,25 @@ class DragDropFileUploadComponent {
         });
         ['dragenter', 'dragover'].forEach((eventName) => {
             this.dragDropZone.nativeElement.addEventListener(eventName, () => {
-                if (!this.disabled) {
-                    this.highlight = true;
+                if (!this.disabled()) {
+                    this.highlight.set(true);
                 }
             }, false);
         });
         ['dragleave', 'drop'].forEach((eventName) => {
             this.dragDropZone.nativeElement.addEventListener(eventName, () => {
-                if (!this.disabled) {
-                    this.highlight = false;
+                if (!this.disabled()) {
+                    this.highlight.set(false);
                 }
             }, false);
         });
         this.dragDropZone.nativeElement.addEventListener('click', (ev) => {
-            if (!this.disabled) {
-                this.onTouched();
+            if (!this.disabled()) {
                 this.fileInput.nativeElement.click();
             }
         }, false);
         this.dragDropZone.nativeElement.addEventListener('drop', (ev) => {
-            const dt = ev.dataTransfer;
-            const files = dt?.files;
-            if (files?.length && !this.disabled) {
-                this.onTouched();
-                const newFiles = Array.from(files);
-                const acceptedFileTypesToRegex = this.accept.replace(/,\s*/g, '|');
-                if (newFiles.filter((file) => !file.name.match(acceptedFileTypesToRegex)).length > 0) {
-                    this.notificationService.showError('COMMON.DRAG_DROP_FORMAT_ERROR');
-                }
-                else {
-                    const value = this.multiple ? [...(this.files$.value ?? []), ...newFiles] : [...newFiles];
-                    this.files$.next(value);
-                    this.onChange(value);
-                    this.fileInput.nativeElement.value = '';
-                }
-            }
+            this.handleFiles(ev.dataTransfer?.files);
         }, false);
     }
     getFileName(name) {
@@ -4733,8 +4645,24 @@ class DragDropFileUploadComponent {
         return { key: `COMMON.DRAG_DROP_${formattedError}_ERROR` };
     }
     onFileAdded({ target }) {
-        if (!this.disabled) {
-            const value = this.multiple ? [...(this.files$?.value ?? []), ...(target?.files ?? [])] : [...(target?.files ?? [])];
+        this.handleFiles(target?.files);
+    }
+    handleFiles(files) {
+        if (files?.length && !this.disabled()) {
+            this.onTouched();
+            const newFiles = Array.from(files);
+            const acceptedFileTypesToRegex = this.accept.replace(/,\s*/g, '|');
+            const value = this.multiple ?
+                [...(this.files$.value ?? []), ...newFiles].filter((file) => file.name.match(acceptedFileTypesToRegex)) :
+                [newFiles[0]];
+            if (!this.multiple && value.find((file) => !file.name.match(acceptedFileTypesToRegex))) {
+                if (this.controlDir.control?.setErrors) {
+                    this.controlDir.control?.setErrors({ wrongFormat: true });
+                    this.files$.next([]);
+                    this.fileInput.nativeElement.value = '';
+                    return;
+                }
+            }
             this.files$.next(value);
             this.onChange(value);
             this.fileInput.nativeElement.value = '';
@@ -4753,17 +4681,17 @@ class DragDropFileUploadComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DragDropFileUploadComponent, deps: [{ token: i30.NgControl, optional: true, self: true }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DragDropFileUploadComponent, isStandalone: true, selector: "application-drag-drop-file-upload", inputs: { accept: "accept", multiple: "multiple", prompt: "prompt" }, viewQueries: [{ propertyName: "dragDropZone", first: true, predicate: ["dragDropZone"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight, disabled: disabled }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n    <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n      @for (file of files; track $index) {\r\n        <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n          <mat-icon>description</mat-icon>\r\n          <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n          <mat-icon class=\"delete-button text-warning-color\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n        </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:#add8e6;border:1px solid var(--neutral-variant-color-60)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DragDropFileUploadComponent, deps: [{ token: i30.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DragDropFileUploadComponent, isStandalone: true, selector: "application-drag-drop-file-upload", inputs: { accept: "accept", multiple: "multiple", prompt: "prompt" }, viewQueries: [{ propertyName: "dragDropZone", first: true, predicate: ["dragDropZone"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n        @for (file of files; track $index) {\r\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n            <mat-icon>description</mat-icon>\r\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n            <mat-icon class=\"delete-button text-warning-color\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DragDropFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'application-drag-drop-file-upload', imports: [shared], template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight, disabled: disabled }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n    <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n      @for (file of files; track $index) {\r\n        <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n          <mat-icon>description</mat-icon>\r\n          <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n          <mat-icon class=\"delete-button text-warning-color\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n        </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:#add8e6;border:1px solid var(--neutral-variant-color-60)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"] }]
+            args: [{ selector: 'application-drag-drop-file-upload', imports: [shared], template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n        @for (file of files; track $index) {\r\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n            <mat-icon>description</mat-icon>\r\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n            <mat-icon class=\"delete-button text-warning-color\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i30.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: NotificationService }], propDecorators: { dragDropZone: [{
+                }] }], propDecorators: { dragDropZone: [{
                 type: ViewChild,
                 args: ['dragDropZone']
             }], fileInput: [{
@@ -5203,6 +5131,7 @@ class NestedListViewComponent {
         }
         return this.position() === 'outer' ? 'basis-1/4' : 'basis-1/2';
     }, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    selectionConfirmationAction = input(() => of(true), ...(ngDevMode ? [{ debugName: "selectionConfirmationAction" }] : []));
     loadingBreadcrumbs = signal(true, ...(ngDevMode ? [{ debugName: "loadingBreadcrumbs" }] : []));
     loadingChildren = signal(true, ...(ngDevMode ? [{ debugName: "loadingChildren" }] : []));
     selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
@@ -5319,19 +5248,24 @@ class NestedListViewComponent {
         });
     }
     selectBreadcrumb(item) {
-        if (this.selectedItem()?.id === item?.id) {
-            return;
-        }
-        if (item.isRoot) {
-            const index = this.breadcrumbs().findIndex((breadcrumb) => breadcrumb.id === item.id);
-            this.breadcrumbs.update(breadcrumbs => breadcrumbs.slice(index, breadcrumbs.indexOf(item) + 1));
-        }
-        else {
-            this.breadcrumbs.update(breadcrumbs => breadcrumbs.slice(0, breadcrumbs.indexOf(item) + 1));
-        }
-        this.nameSearchControl.setValue(null);
-        this.selectedItem.set(item);
-        this.itemSelected.emit(item.data);
+        const confirmationAction = this.selectionConfirmationAction();
+        confirmationAction().pipe(take(1)).subscribe((response) => {
+            if (response) {
+                if (this.selectedItem()?.id === item?.id) {
+                    return;
+                }
+                if (item.isRoot) {
+                    const index = this.breadcrumbs().findIndex((breadcrumb) => breadcrumb.id === item.id);
+                    this.breadcrumbs.update(breadcrumbs => breadcrumbs.slice(index, breadcrumbs.indexOf(item) + 1));
+                }
+                else {
+                    this.breadcrumbs.update(breadcrumbs => breadcrumbs.slice(0, breadcrumbs.indexOf(item) + 1));
+                }
+                this.nameSearchControl.setValue(null);
+                this.selectedItem.set(item);
+                this.itemSelected.emit(item.data);
+            }
+        });
     }
     selectChild(item) {
         if (this.selectedItem()?.id === item?.id) {
@@ -5374,12 +5308,12 @@ class NestedListViewComponent {
         return boundAction.action(params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }, { token: i14.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", 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 }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n          <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n            <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n            <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n            <mat-icon matSuffix>search</mat-icon>\r\n          </mat-form-field>\r\n          @if (defaultSearchAction(); as defaultAction) {\r\n            <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n              <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n              </button>\r\n            </div>\r\n          }\r\n          @for (action of otherSearchActions(); track $index) {\r\n            @if (action.condition() | async) {\r\n              <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                  <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon) {\r\n                          <div class=\"shrink-0 h-6\">\r\n                            @if (isAsyncIcon(item); as loadedIcon) {\r\n                              <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                            }\r\n                            @if (isSvgIcon(item); as svgIcon) {\r\n                              <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                            }\r\n                            @if (typeof item.icon === 'string') {\r\n                              <mat-icon>{{ item.icon }}</mat-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon) {\r\n                              <div class=\"shrink-0 h-6\">\r\n                                @if (isAsyncIcon(item); as loadedIcon) {\r\n                                  <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                                }\r\n                                @if (isSvgIcon(item); as svgIcon) {\r\n                                  <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                                }\r\n                                @if (typeof item.icon === 'string') {\r\n                                  <mat-icon>{{ item.icon }}</mat-icon>\r\n                                }\r\n                              </div>\r\n                            }\r\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.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: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.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: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }, { 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: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n          <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n            <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n            <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n            <mat-icon matSuffix>search</mat-icon>\r\n          </mat-form-field>\r\n          @if (defaultSearchAction(); as defaultAction) {\r\n            <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n              <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n              </button>\r\n            </div>\r\n          }\r\n          @for (action of otherSearchActions(); track $index) {\r\n            @if (action.condition() | async) {\r\n              <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                  <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon) {\r\n                          <div class=\"shrink-0 h-6\">\r\n                            @if (isAsyncIcon(item); as loadedIcon) {\r\n                              <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                            }\r\n                            @if (isSvgIcon(item); as svgIcon) {\r\n                              <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                            }\r\n                            @if (typeof item.icon === 'string') {\r\n                              <mat-icon>{{ item.icon }}</mat-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon) {\r\n                              <div class=\"shrink-0 h-6\">\r\n                                @if (isAsyncIcon(item); as loadedIcon) {\r\n                                  <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                                }\r\n                                @if (isSvgIcon(item); as svgIcon) {\r\n                                  <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                                }\r\n                                @if (typeof item.icon === 'string') {\r\n                                  <mat-icon>{{ item.icon }}</mat-icon>\r\n                                }\r\n                              </div>\r\n                            }\r\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.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: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.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: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }, { 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: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NestedListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nested-list-view', imports: [shared, ScrollIntoViewDirective, LoadedIconComponent, OverflowClassDirective, DndDraggableDirective], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n          <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n            <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n            <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n            <mat-icon matSuffix>search</mat-icon>\r\n          </mat-form-field>\r\n          @if (defaultSearchAction(); as defaultAction) {\r\n            <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n              <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n              </button>\r\n            </div>\r\n          }\r\n          @for (action of otherSearchActions(); track $index) {\r\n            @if (action.condition() | async) {\r\n              <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                  <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon) {\r\n                          <div class=\"shrink-0 h-6\">\r\n                            @if (isAsyncIcon(item); as loadedIcon) {\r\n                              <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                            }\r\n                            @if (isSvgIcon(item); as svgIcon) {\r\n                              <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                            }\r\n                            @if (typeof item.icon === 'string') {\r\n                              <mat-icon>{{ item.icon }}</mat-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon) {\r\n                              <div class=\"shrink-0 h-6\">\r\n                                @if (isAsyncIcon(item); as loadedIcon) {\r\n                                  <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                                }\r\n                                @if (isSvgIcon(item); as svgIcon) {\r\n                                  <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                                }\r\n                                @if (typeof item.icon === 'string') {\r\n                                  <mat-icon>{{ item.icon }}</mat-icon>\r\n                                }\r\n                              </div>\r\n                            }\r\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i14.MatDialog }], 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 }] }], disableThresholdId: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableThresholdId", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], searchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchActions", 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"] }] } });
+        }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i14.MatDialog }], 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 }] }], disableThresholdId: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableThresholdId", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", 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"] }] } });
 
 class NestedListDataControl {
     _changeSelection$ = new BehaviorSubject(null);
@@ -6953,5 +6887,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AUTHENTICATION_CLIENT, AssetManager, AuthenticationService, AutocompleteChipsComponent, AutocompleteComponent, BasicTimeSeriesGraphComponent, COLORS, CUSTOM_PERIOD, CardLabeledValueComponent, ConfirmationDialogComponent, DEFAULT_LOCALE, DEFAULT_TIMEZONES, DEFAULT_TIME_ZONE, DataType, DateRangeInputComponent, DateTimeFormFieldComponent, DragDropFileUploadComponent, DurationPipe, FeatureRegistry, GoogleMapComponent, ImageDisplayComponent, ImagePreviewComponent, LAST_ACTIVE_TAB_KEY, LOCALES, LabeledValueComponent, LoadedIconComponent, LoadingIndicatorDirective, LocalSortTableComponent, Locale, LocalizedNumberPipe, LocalizedNumericInputDirective, MILLISECONDS_IN_DAY, MapsLoaderService, MasterDetailsViewComponent, MessageTooltipDirective, MissingTranslationHelper, NestedListDataControl, NestedListDataSource, NestedListViewComponent, NgTemplateContentDirective, NotificationService, OverflowClassDirective, PdfViewerComponent, PeriodErrorStateMatcher, Permission, PermissionsService, RELATIVE_TIME_PERIODS, RelativeTimePeriod, RequiresAllGlobalOrAssetPermissionsDirective, RequiresAllPermissionDirective, RequiresGlobalOrAsserPermissionDirective, RequiresPermissionDirective, ScrollIntoViewDirective, SimpleDatePipe, SimpleDateTimePipe, SimpleTimePipe, SortPipe, StandardListDataControl, StandardListDataSource, StandardListViewComponent, TIMEZONES, TabulatedChipViewComponent, TabulatedViewComponent, TenantPropertiesService, ThemeService, TreeComponent, TreeNodeComponent, USERS_TIME_ZONE, ValueDisplayComponent, ValueInputBooleanComponent, ValueInputColorComponent, ValueInputComponent, ValueInputDateComponent, ValueInputDurationComponent, ValueInputEnumComponent, ValueInputHexadecimalComponent, ValueInputLinkComponent, ValueInputLocationComponent, ValueInputNumericComponent, ValueInputStringComponent, ValueInputVectorComponent, angularComponents, arrayToObject, chartThemeDark, chartThemeLight, createGlobalPermissionsGuard, daysAway, determineMagnitude, determineMinMaxValues, endOfPeriod, equalsByValue, fileSizeValidator, flatMap, flatten, format, formatDuration, generateRandomString, groupBy, hoursAway, isContextAccessible, lookUpPathPart, lookUpQueryParam, parseDateRangeInputPeriod, parseTimeInput, saveFile, scale, shared, startOfMonth, startOfPeriod, startOfTheDay, startOfWeek, startOfYear, toDate, toEndOfMonth, toEndOfYear, toJsDate, toOffset, toStartOfMonth, toStartOfTheDay, toStartOfWeek, toStartOfYear, toTime, uniqueBy, uniqueFrom, validateAssetName, validateTypeAssetName };
+export { AUTHENTICATION_CLIENT, AssetManager, AuthenticationService, AutocompleteChipsComponent, AutocompleteComponent, BasicTimeSeriesGraphComponent, COLORS, CUSTOM_PERIOD, CardLabeledValueComponent, ConfirmationDialogComponent, DEFAULT_LOCALE, DEFAULT_TIMEZONES, DEFAULT_TIME_ZONE, DataType, DateRangeInputComponent, DateTimeFormFieldComponent, DragDropFileUploadComponent, DurationPipe, FeatureRegistry, GoogleMapComponent, ImageDisplayComponent, ImagePreviewComponent, LAST_ACTIVE_TAB_KEY, LOCALES, LabeledValueComponent, LoadedIconComponent, LoadingIndicatorDirective, LocalSortTableComponent, Locale, LocalizedNumberPipe, LocalizedNumericInputDirective, MILLISECONDS_IN_DAY, MapsLoaderService, MasterDetailsViewComponent, MessageTooltipDirective, MissingTranslationHelper, NestedListDataControl, NestedListDataSource, NestedListViewComponent, NgTemplateContentDirective, NotificationService, OverflowClassDirective, PdfViewerComponent, PeriodErrorStateMatcher, PermissionsService, RELATIVE_TIME_PERIODS, RelativeTimePeriod, RequiresAllGlobalOrAssetPermissionsDirective, RequiresAllPermissionDirective, RequiresGlobalOrAsserPermissionDirective, RequiresPermissionDirective, ScrollIntoViewDirective, SimpleDatePipe, SimpleDateTimePipe, SimpleTimePipe, SortPipe, StandardListDataControl, StandardListDataSource, StandardListViewComponent, TIMEZONES, TabulatedChipViewComponent, TabulatedViewComponent, TenantPropertiesService, ThemeService, TreeComponent, TreeNodeComponent, USERS_TIME_ZONE, ValueDisplayComponent, ValueInputBooleanComponent, ValueInputColorComponent, ValueInputComponent, ValueInputDateComponent, ValueInputDurationComponent, ValueInputEnumComponent, ValueInputHexadecimalComponent, ValueInputLinkComponent, ValueInputLocationComponent, ValueInputNumericComponent, ValueInputStringComponent, ValueInputVectorComponent, angularComponents, arrayToObject, chartThemeDark, chartThemeLight, createGlobalPermissionsGuard, daysAway, determineMagnitude, determineMinMaxValues, endOfPeriod, equalsByValue, fileSizeValidator, flatMap, flatten, format, formatDuration, generateRandomString, groupBy, hoursAway, isContextAccessible, lookUpPathPart, lookUpQueryParam, parseDateRangeInputPeriod, parseTimeInput, saveFile, scale, shared, startOfMonth, startOfPeriod, startOfTheDay, startOfWeek, startOfYear, toDate, toEndOfMonth, toEndOfYear, toJsDate, toOffset, toStartOfMonth, toStartOfTheDay, toStartOfWeek, toStartOfYear, toTime, uniqueBy, uniqueFrom, validateAssetName, validateTypeAssetName };
 //# sourceMappingURL=wolkabout-commons.mjs.map