ngx-edu-sharing-ui 10.0.24 → 11.0.0

package/fesm2022/ngx-edu-sharing-ui.mjs

@@ -1,24 +1,24 @@
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, ViewChildren, InjectionToken, Optional, Inject, Input, Directive, signal, computed, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, Output, HostListener, HostBinding, CUSTOM_ELEMENTS_SCHEMA, NgModule, ContentChild, effect, ElementRef, SkipSelf } from '@angular/core';
-import * as i3 from '@angular/common';
-import { DatePipe, CommonModule } from '@angular/common';
+import { Injectable, ViewChildren, InjectionToken, Optional, Input, Directive, Pipe, signal, computed, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, Output, HostListener, HostBinding, CUSTOM_ELEMENTS_SCHEMA, NgModule, ContentChild, Inject, effect, ElementRef, SkipSelf } from '@angular/core';
 import * as i8 from '@angular/material/core';
 import { MatRipple, MatRippleModule } from '@angular/material/core';
-import { map, distinctUntilChanged, take, filter, first, switchMap, pairwise, takeUntil, tap, startWith, delay as delay$1, debounceTime, shareReplay, catchError, reduce } from 'rxjs/operators';
-import * as i2 from 'ngx-edu-sharing-api';
-import { RestConstants, HOME_REPOSITORY, SessionStorageService, LANGUAGES, ME, ConfigService, MdsService } from 'ngx-edu-sharing-api';
-import * as i1 from '@ngx-translate/core';
-import { TranslateModule, MissingTranslationHandler, TranslateLoader } from '@ngx-translate/core';
+import { map, distinctUntilChanged, take, filter, takeUntil, first, switchMap, pairwise, tap, startWith, delay as delay$1, debounceTime, shareReplay, skip, catchError, reduce } from 'rxjs/operators';
+import * as i1 from 'ngx-edu-sharing-api';
+import { RestConstants, ConfigService, HOME_REPOSITORY, SessionStorageService, LANGUAGES, ME, MdsService } from 'ngx-edu-sharing-api';
 import * as rxjs from 'rxjs';
-import { BehaviorSubject, of, combineLatest as combineLatest$1, firstValueFrom, Observable, ReplaySubject, Subject, merge, from, fromEvent, interval, forkJoin, concat } from 'rxjs';
-import * as i2$1 from '@angular/router';
-import { RouterModule } from '@angular/router';
+import { BehaviorSubject, of, combineLatest as combineLatest$1, firstValueFrom, Subject, Observable, ReplaySubject, merge, from, fromEvent, interval, forkJoin, concat } from 'rxjs';
+import * as i1$1 from '@ngx-translate/core';
+import { TranslateModule, MissingTranslationHandler, TranslateLoader } from '@ngx-translate/core';
+import * as i6 from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i3$1 from '@angular/platform-browser';
-import * as i1$2 from '@angular/material/progress-spinner';
+import * as i1$3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { transition, style, animate, state, trigger } from '@angular/animations';
 import { isArray as isArray$1, isString } from 'lodash-es';
@@ -32,15 +32,15 @@ import * as i8$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i9 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i2$3 from '@angular/cdk/overlay';
+import * as i2$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i2$2 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$3 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i5$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i8$2 from '@angular/material/paginator';
+import * as i9$1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -72,216 +72,6 @@ var OPEN_URL_MODE;
     OPEN_URL_MODE[OPEN_URL_MODE["BlankSystemBrowser"] = 2] = "BlankSystemBrowser";
 })(OPEN_URL_MODE || (OPEN_URL_MODE = {}));
 
-/**
- * Copy paste from rxjs/util/isNumeric since importing it from there will trigger a warning about
- * CommonJS or AMD dependencies and indeed increase the bundle size a bit.
- */
-// From https://github.com/ReactiveX/rxjs/blob/6.x/src/internal/util/isArray.ts
-const isArray = (() => Array.isArray || ((x) => x && typeof x.length === 'number'))();
-// From https://github.com/ReactiveX/rxjs/blob/6.x/src/internal/util/isNumeric.ts
-function isNumeric(val) {
-    return !isArray(val) && val - parseFloat(val) + 1 >= 0;
-}
-
-var RelativeMode;
-(function (RelativeMode) {
-    RelativeMode[RelativeMode["off"] = 0] = "off";
-    RelativeMode[RelativeMode["short"] = 1] = "short";
-    RelativeMode[RelativeMode["medium"] = 2] = "medium";
-    RelativeMode[RelativeMode["large"] = 3] = "large";
-    RelativeMode[RelativeMode["all"] = 4] = "all";
-})(RelativeMode || (RelativeMode = {}));
-class FormatOptions {
-    constructor() {
-        this.showDate = true;
-        this.showAlwaysTime = false;
-        this.showSeconds = false;
-        // @Deprecated
-        // this will be mapped to relativeLabels = MEDIUM
-        // use relativeLabels instead
-        this.useRelativeLabels = true;
-    }
-}
-class DateHelper {
-    /**
-     * Fill a date (day + month) string, e.g. 2 -> 02
-     * @param date
-     * @returns {string}
-     */
-    static fillDate(date) {
-        if (date < 10)
-            return '0' + date;
-        return date + '';
-    }
-    /**
-     * Convert date to a unix timestamp
-     * @param date
-     * @returns {number}
-     */
-    static convertDate(date) {
-        return new Date(date).getTime();
-    }
-    /**
-     * format a date with a given, fixed string
-     * For consistency, we use the patterns from
-     * https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html
-     * @param date
-     * @param {string} format
-     * @returns {string}
-     */
-    static formatDateByPattern(date, format) {
-        if (!isNumeric(date)) {
-            return date;
-        }
-        let dateObject = new Date(date * 1);
-        format = format.replace('y', '' + dateObject.getFullYear());
-        format = format.replace('M', '' + DateHelper.fillDate(dateObject.getMonth() + 1));
-        format = format.replace('d', '' + DateHelper.fillDate(dateObject.getDate()));
-        return format;
-    }
-    /**
-     * Format a date for the current language
-     */
-    static formatDate(translation, date, options = new FormatOptions()) {
-        try {
-            if (options.useRelativeLabels && !options.relativeLabels) {
-                options.relativeLabels = RelativeMode.medium;
-            }
-            if (date == null) {
-                return null;
-            }
-            if (!isNumeric(date)) {
-                date = Date.parse(date);
-            }
-            let dateObject = new Date(date * 1);
-            let dateToday = new Date();
-            let dateYesterday = new Date();
-            dateYesterday.setDate(dateYesterday.getDate() - 1);
-            let isToday = dateObject.toDateString() == dateToday.toDateString();
-            let isYesterday = dateObject.toDateString() == dateYesterday.toDateString();
-            let prefix = '';
-            let timeDiff = (dateToday.getTime() - dateObject.getTime()) / 1000;
-            let diffDays = Math.floor(timeDiff / (3600 * 24));
-            let diffMonths = new Date(timeDiff * 1000).getMonth();
-            let diffYears = new Date(timeDiff * 1000).getFullYear() - 1970;
-            let addDate = true;
-            let timeFormat = 'HH:mm';
-            if (options.showSeconds) {
-                timeFormat += ':ss';
-            }
-            if (timeDiff < 3600 * 6 && options.relativeLabels >= RelativeMode.short) {
-                if (timeDiff < 90) {
-                    prefix = translation.instant('JUST_NOW', { seconds: timeDiff });
-                }
-                else if (timeDiff < 60 * 100) {
-                    prefix = translation.instant('MINUTES_AGO', {
-                        minutes: Math.round(timeDiff / 60),
-                    });
-                }
-                else {
-                    prefix = translation.instant('HOURS_AGO', {
-                        hours: Math.round(timeDiff / (60 * 60)),
-                    });
-                }
-                addDate = false;
-                timeFormat = '';
-            }
-            else if (isToday && options.relativeLabels >= RelativeMode.short) {
-                prefix = translation.instant('TODAY');
-                addDate = false;
-            }
-            else if (isYesterday && options.relativeLabels >= RelativeMode.medium) {
-                prefix = translation.instant('YESTERDAY');
-                addDate = false;
-            }
-            else if ((diffDays < 6 && options.relativeLabels >= RelativeMode.medium) ||
-                (diffDays < 45 && options.relativeLabels >= RelativeMode.large)) {
-                prefix = translation.instant('DAYS_AGO', { days: diffDays });
-                addDate = false;
-                if (!options.showAlwaysTime)
-                    timeFormat = '';
-            }
-            else if (diffYears === 0 &&
-                diffMonths < 12 &&
-                options.relativeLabels >= RelativeMode.large) {
-                prefix = translation.instant('MONTHS_AGO', { months: diffMonths });
-                addDate = false;
-                if (!options.showAlwaysTime)
-                    timeFormat = '';
-            }
-            else if (options.relativeLabels === RelativeMode.all) {
-                prefix = translation.instant('YEARS_AGO', { years: diffYears });
-                addDate = false;
-                if (!options.showAlwaysTime)
-                    timeFormat = '';
-            }
-            else {
-                if (!options.showAlwaysTime)
-                    timeFormat = '';
-            }
-            // ng2's dateformatter is super slow, but it doesn't matter, we just iterate it once :)
-            //return dateFormat+time;
-            let str = prefix;
-            if (addDate) {
-                if (translation.currentLang === 'en') {
-                    str +=
-                        dateObject.getFullYear() +
-                            '-' +
-                            DateHelper.fillDate(dateObject.getMonth() + 1) +
-                            '-' +
-                            DateHelper.fillDate(dateObject.getDate());
-                }
-                else {
-                    str +=
-                        DateHelper.fillDate(dateObject.getDate()) +
-                            '.' +
-                            DateHelper.fillDate(dateObject.getMonth() + 1) +
-                            '.' +
-                            dateObject.getFullYear();
-                }
-                //str += DateFormatter.format(dateObject, Translation.getLanguage(), dateFormat).trim();
-            }
-            if (options.showDate == false) {
-                str = '';
-            }
-            // ie fixes, timeFormat not working
-            if (timeFormat) {
-                if (str)
-                    str += ', ';
-                //let timeValue=dateObject.toLocaleTimeString(Translation.getLanguage());
-                //let times=timeValue.split(":");
-                str += timeFormat
-                    .replace('HH', DateHelper.fillDate(dateObject.getHours()))
-                    .replace('mm', DateHelper.fillDate(dateObject.getMinutes()))
-                    .replace('ss', DateHelper.fillDate(dateObject.getSeconds()));
-            }
-            return str;
-            /*
-      let dateString=prefix+" ";
-      if(dateFormat!=""){
-        dateString+=dateObject.toLocaleDateString(Translation.getLanguage())+" ";
-      }
-      if(time!=""){
-        dateString+=dateObject.toLocaleTimeString(Translation.getLanguage());
-      }
-      return dateString;
-      */
-        }
-        catch (e) {
-            return date;
-        }
-    }
-    static getDateFromDatepicker(date) {
-        return new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
-    }
-    static getDateForNewFile() {
-        return DateHelper.formatDate(null, new Date().getTime(), {
-            showAlwaysTime: true,
-            useRelativeLabels: false,
-        });
-    }
-}
-
 /**
  * Different helper functions, may be used globally
  */
@@ -323,38 +113,6 @@ class RestHelper {
     }
 }
 
-class FormatSizePipe {
-    constructor(translate) {
-        this.translate = translate;
-    }
-    transform(value, args = null) {
-        let names = ['bytes', 'KB', 'MB', 'GB', 'TB'];
-        let i = 0;
-        if (isNaN(value))
-            return value;
-        if (value == null)
-            value = 0;
-        while (value >= 1024 && i < names.length) {
-            value /= 1024;
-            i++;
-        }
-        let options = {
-            maximumFractionDigits: i > 1 ? 1 : 0,
-        };
-        let numberFormat = new Intl.NumberFormat([], options);
-        return numberFormat.format(value) + ' ' + names[i];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatSizePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FormatSizePipe, isStandalone: false, name: "formatSize" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatSizePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'formatSize',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }] });
-
 class MdsEditorInstanceServiceAbstract {
     constructor() {
         /** Current values (if not in node mode) */
@@ -483,7 +241,9 @@ class UIService {
     filterToggleOptions(options, toggle, togglePosition = 'after') {
         let result = [];
         for (let option of options) {
-            if (option.isToggle === toggle && (!toggle || togglePosition === option.togglePosition))
+            if ((option.isToggle === toggle ||
+                (!toggle && !option.isToggle)) &&
+                (!toggle || togglePosition === option.togglePosition))
                 result.push(option);
         }
         return result;
@@ -677,6 +437,25 @@ class UIService {
             });
         });
     }
+    goToLogin(scope = null, next = window.location.href) {
+        void this.injector
+            .get(ConfigService)
+            .get('loginUrl')
+            .then((url) => {
+            if (url &&
+                !scope &&
+                !this.injector.get(ConfigService).instant('loginAllowLocal', false)) {
+                window.location.href = url;
+                return;
+            }
+            void this.injector.get(Router).navigate([UIConstants.ROUTER_PREFIX + 'login'], {
+                queryParams: {
+                    scope: scope,
+                    next: next,
+                },
+            });
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UIService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UIService, providedIn: 'root' }); }
 }
@@ -749,36 +528,6 @@ const WORKFLOW_STATUS_CHECKED = {
     next: null,
 };
 
-/**
- * A custom base path for the assets directory.
- *
- * This is useful when the application cannot be served from the base HREF set in index.html. This
- * is the case when it is embedded as a web component into another website.
- */
-const ASSETS_BASE_PATH = new InjectionToken('ASSETS_BASE_PATH');
-class I18nConfig {
-    constructor() {
-        /**
-         * shall the user profile be read
-         * If not set, defaults to true
-         */
-        this.obeyUserProfile = true;
-    }
-}
-/**
- * additional configuration options
- */
-const I18N_CONFIG = new InjectionToken('I18N_CONFIG');
-/**
- * custom additional uris to fetch language files from
- *
- * Might be used if additional angular modules require language data
- *
- * Example
- *{provide: ADDITIONAL_I18N_PROVIDER, useValue: (lang: string) => { return ['/edu-sharing/assets/i18n/myI18n/' + lang + '.json']}},
- */
-const ADDITIONAL_I18N_PROVIDER = new InjectionToken('ADDITIONAL_I18N_PROVIDER');
-
 var NodesRightMode;
 (function (NodesRightMode) {
     // rights on the current node, no matter if its a reference or origianl
@@ -811,20 +560,6 @@ class OptionItem {
          * @type {boolean}
          */
         this.showAsAction = false;
-        /**
-         * If true, this option will be shown as a toggle on the right side (provide iconToggle as a toggle icon)
-         * @type {boolean}
-         */
-        this.isToggle = false;
-        /**
-         * Only when @isToggle. is the toggle currently visible
-         */
-        this.isToggleVisible = true;
-        /**
-         * Only when @isToggle. Where to place the toggle, before or after all other actions
-         * @type {boolean}
-         */
-        this.togglePosition = 'after';
         /**
          * If true, shows a line at the top.
          *
@@ -872,6 +607,45 @@ class OptionItem {
         this.toolpermissionsMode = HideMode.Disable;
     }
 }
+class OptionItemToggle extends OptionItem {
+    constructor(
+    /**
+     * set individual names for a toggle based on its state
+     */
+    toggleNames, 
+    /**
+     * set individual icons for a toggle based on its state
+     */
+    toggleIcons, 
+    /**
+     * is toggle enabled or disabled?
+     */
+    toggleState, 
+    // TODO: Maybe switch to only providing the second parameter.
+    callback) {
+        const internalCallback = (object, objects) => {
+            this.toggleState = !this.toggleState;
+            callback?.(object, objects);
+        };
+        super(null, null, internalCallback);
+        this.toggleNames = toggleNames;
+        this.toggleIcons = toggleIcons;
+        this.toggleState = toggleState;
+        this.isToggle = true;
+        /**
+         * @Deprecated: please use the @OptionItemToggle class
+         * Only when @isToggle. is the toggle currently visible
+         */
+        this.isToggleVisible = true;
+        /**
+         * Where to place the toggle, before or after all other actions
+         * @type {boolean}
+         */
+        this.togglePosition = 'after';
+        this.group = DefaultGroups.Toggles;
+        this.isToggle = true;
+    }
+}
 class CustomOptions {
     constructor() {
         /**
@@ -903,6 +677,9 @@ var Scope;
     Scope["UserProfile"] = "UserProfile";
     Scope["Stream"] = "Stream";
     Scope["CreateMenu"] = "CreateMenu";
+    Scope["DashboardSwimlane"] = "DashboardSwimlane";
+    Scope["EditorialPage"] = "EditorialPage";
+    Scope["EditorialSidebar"] = "EditorialSidebar";
     Scope["MediacenterNodesList"] = "MediacenterNodesList";
     Scope["Admin"] = "Admin";
     Scope["DebugShowAll"] = "DebugShowAll";
@@ -919,7 +696,7 @@ var ElementType;
     ElementType[ElementType["Person"] = 7] = "Person";
     ElementType[ElementType["Group"] = 8] = "Group";
     ElementType[ElementType["SavedSearch"] = 9] = "SavedSearch";
-    ElementType[ElementType["Unknown"] = 10] = "Unknown";
+    ElementType[ElementType["NoneOrUnknown"] = 10] = "NoneOrUnknown";
 })(ElementType || (ElementType = {}));
 class OptionGroup {
     /**
@@ -958,10 +735,11 @@ var Constrain;
     Constrain[Constrain["ClipboardContent"] = 10] = "ClipboardContent";
     Constrain[Constrain["AddObjects"] = 11] = "AddObjects";
     Constrain[Constrain["HomeRepository"] = 12] = "HomeRepository";
-    Constrain[Constrain["User"] = 13] = "User";
-    Constrain[Constrain["NoScope"] = 14] = "NoScope";
-    Constrain[Constrain["ReurlMode"] = 15] = "ReurlMode";
-    Constrain[Constrain["LTIMode"] = 16] = "LTIMode";
+    Constrain[Constrain["GuestOrNotLoggedIn"] = 13] = "GuestOrNotLoggedIn";
+    Constrain[Constrain["User"] = 14] = "User";
+    Constrain[Constrain["NoScope"] = 15] = "NoScope";
+    Constrain[Constrain["ReurlMode"] = 16] = "ReurlMode";
+    Constrain[Constrain["LTIMode"] = 17] = "LTIMode";
 })(Constrain || (Constrain = {}));
 var Target;
 (function (Target) {
@@ -1052,7 +830,7 @@ class RepoUrlService {
         urlObject.protocol = window.location.protocol;
         return urlObject.href;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RepoUrlService, deps: [{ token: i2.NetworkService }, { token: EduSharingUiConfiguration }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RepoUrlService, deps: [{ token: i1.NetworkService }, { token: EduSharingUiConfiguration }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RepoUrlService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RepoUrlService, decorators: [{
@@ -1060,16 +838,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i2.NetworkService }, { type: EduSharingUiConfiguration }] });
+        }], ctorParameters: () => [{ type: i1.NetworkService }, { type: EduSharingUiConfiguration }] });
 
 class NodeHelperService {
-    constructor(translate, apiHelpersService, networkService, configService, repoUrlService, assetsBasePath) {
+    constructor(translate, apiHelpersService, networkService, configService, configuration, repoUrlService, platformLocation, router) {
         this.translate = translate;
         this.apiHelpersService = apiHelpersService;
         this.networkService = networkService;
         this.configService = configService;
+        this.configuration = configuration;
         this.repoUrlService = repoUrlService;
-        this.assetsBasePath = assetsBasePath;
+        this.platformLocation = platformLocation;
+        this.router = router;
         this.LICENSE_URLS = {
             CC_BY_ABOUT: 'https://creativecommons.org/licenses/list.{{language}}',
             CC_BY: 'https://creativecommons.org/licenses/by/{{version}}/{{locale}}deed.{{language}}',
@@ -1196,7 +976,8 @@ class NodeHelperService {
         return of(url
             .replace('{{version}}', licenseVersion)
             .replace('{{locale}}', locale)
-            .replace('{{language}}', this.translate.currentLang || 'en'));
+            // use base language for de- special variants
+            .replace('{{language}}', this.translate.currentLang?.split('-')?.[0] || 'en'));
     }
     getWorkflowStatusById(id) {
         const workflows = this.getWorkflows();
@@ -1238,6 +1019,17 @@ class NodeHelperService {
             WORKFLOW_STATUS_CHECKED,
         ]);
     }
+    getFilenameWithoutExtension(filename) {
+        if (filename === null) {
+            return null;
+        }
+        const components = filename.split('.');
+        if (components.length === 1) {
+            return filename;
+        }
+        components.splice(components.length - 1, 1);
+        return components.join('.');
+    }
     copyDataToNode(target, source) {
         target.properties = source.properties;
         target.name = source.name;
@@ -1252,7 +1044,10 @@ class NodeHelperService {
         return node.aspects?.includes(RestConstants.CCM_ASPECT_COLLECTION) || !!node.collection;
     }
     getSourceIconPath(src) {
-        return (this.assetsBasePath ?? '') + 'assets/images/sources/' + src.toLowerCase() + '.png';
+        return ((this.configuration.assetsBasePath ?? '') +
+            'assets/images/sources/' +
+            src.toLowerCase() +
+            '.png');
     }
     getNodeLink(mode, node) {
         if (!node?.ref) {
@@ -1312,6 +1107,11 @@ class NodeHelperService {
         if (mode === 'routerLink') {
             return '/' + data.routerLink;
         }
+        else if (mode === 'plain') {
+            const urlTree = this.router?.createUrlTree([data.routerLink], data);
+            return ((this.platformLocation.getBaseHrefFromDOM() ?? '') +
+                this.router?.serializeUrl(urlTree).substring(1));
+        }
         // enforce clearing of parameters which should only be consumed once
         data.queryParams.redirectFromSSO = null;
         return data.queryParams;
@@ -1366,7 +1166,10 @@ class NodeHelperService {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeHelperService, deps: [{ token: i1.TranslateService }, { token: i2.ApiHelpersService }, { token: i2.NetworkService }, { token: i2.ConfigService }, { token: RepoUrlService }, { token: ASSETS_BASE_PATH, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    isOerLicense(value) {
+        return ['CC_0', 'PDM', 'CC_BY', 'CC_BY_SA'].includes(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeHelperService, deps: [{ token: i1$1.TranslateService }, { token: i1.ApiHelpersService }, { token: i1.NetworkService }, { token: i1.ConfigService }, { token: EduSharingUiConfiguration }, { token: RepoUrlService }, { token: i3.PlatformLocation }, { token: i6.Router, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeHelperService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeHelperService, decorators: [{
@@ -1374,11 +1177,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i2.ApiHelpersService }, { type: i2.NetworkService }, { type: i2.ConfigService }, { type: RepoUrlService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i1.ApiHelpersService }, { type: i1.NetworkService }, { type: i1.ConfigService }, { type: EduSharingUiConfiguration }, { type: RepoUrlService }, { type: i3.PlatformLocation }, { type: i6.Router, decorators: [{
                     type: Optional
-                }, {
-                    type: Inject,
-                    args: [ASSETS_BASE_PATH]
                 }] }] });
 
 function notNull(value) {
@@ -1433,6 +1233,9 @@ class IconDirective {
     set esIcon(id) {
         this.originalId$.next(id);
     }
+    set esIconContext(context) {
+        this.iconContext$.next(context);
+    }
     constructor(element, http, translate, renderer, config) {
         this.element = element;
         this.http = http;
@@ -1440,10 +1243,15 @@ class IconDirective {
         this.renderer = renderer;
         this.config = config;
         this.originalId$ = new BehaviorSubject(null);
+        this.iconContext$ = new BehaviorSubject(null);
         this.isReady = false;
-        combineLatest$1([this.originalId$.pipe(filter(notNull)), this.config.get('icons', null)])
+        combineLatest$1([
+            this.originalId$.pipe(filter(notNull)),
+            this.iconContext$,
+            this.config.get('icons', null).catch((_) => Promise.resolve([])),
+        ])
             .pipe(takeUntilDestroyed())
-            .subscribe(([originalId, iconsConfig]) => this.setIcon(originalId, iconsConfig));
+            .subscribe(([originalId, iconContext, iconsConfig]) => this.setIcon(originalId, iconContext, iconsConfig));
     }
     async ngOnInit() {
         this.isReady = true;
@@ -1458,7 +1266,7 @@ class IconDirective {
             this.altTextSpan.remove();
         }
     }
-    async setIcon(id, iconsConfig) {
+    async setIcon(id, context, iconsConfig) {
         if (this._id) {
             this.element.nativeElement.classList.remove('edu-icons', 'custom-icons', 'material-icons');
             if (this.svg) {
@@ -1494,7 +1302,13 @@ class IconDirective {
             }
         }
         let customClass = null;
-        const mapping = iconsConfig?.filter((i) => i.original === id);
+        let mapping = null;
+        if (context) {
+            mapping = iconsConfig?.filter((i) => i.original === id && i.context === context);
+        }
+        if (!mapping?.length) {
+            mapping = iconsConfig?.filter((i) => i.original === id && !i.context);
+        }
         if (mapping?.length === 1) {
             id = mapping[0].replace || '';
             customClass = mapping[0].cssClass;
@@ -1550,8 +1364,8 @@ class IconDirective {
         this.altTextSpan.classList.add('cdk-visually-hidden');
         this.element.nativeElement.insertAdjacentElement('afterend', this.altTextSpan);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.HttpClient }, { token: i1.TranslateService }, { token: i0.Renderer2 }, { token: i2.ConfigService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: IconDirective, isStandalone: false, selector: "i[esIcon], i.material-icons", inputs: { altText: "altText", aria: "aria", esIcon: "esIcon" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconDirective, deps: [{ token: i0.ElementRef }, { token: i1$2.HttpClient }, { token: i1$1.TranslateService }, { token: i0.Renderer2 }, { token: i1.ConfigService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: IconDirective, isStandalone: false, selector: "i[esIcon], i.material-icons", inputs: { altText: "altText", aria: "aria", esIcon: "esIcon", esIconContext: "esIconContext" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconDirective, decorators: [{
             type: Directive,
@@ -1559,7 +1373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     selector: 'i[esIcon], i.material-icons',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.HttpClient }, { type: i1.TranslateService }, { type: i0.Renderer2 }, { type: i2.ConfigService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.HttpClient }, { type: i1$1.TranslateService }, { type: i0.Renderer2 }, { type: i1.ConfigService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { altText: [{
                 type: Input
@@ -1567,6 +1381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], esIcon: [{
                 type: Input
+            }], esIconContext: [{
+                type: Input
             }] } });
 
 class MdsDurationPipe {
@@ -1884,7 +1700,7 @@ class VCardNamePipe {
         }
         return authority ? new VCard(authority).getDisplayName() : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VCardNamePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VCardNamePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: VCardNamePipe, isStandalone: false, name: "vcardName" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VCardNamePipe, decorators: [{
@@ -1893,7 +1709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'vcardName',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 var MdsType;
 (function (MdsType) {
@@ -1970,6 +1786,8 @@ class MdsWidgetComponent {
         this.injector = injector;
         this.nodeHelper = nodeHelper;
         this.ROUTER_PREFIX = UIConstants.ROUTER_PREFIX;
+        this.focusTrigger = new Subject();
+        this.destroyed$ = new Subject();
         this.valueType = ValueType.String;
         this.showCaption = true;
         /**
@@ -1988,58 +1806,31 @@ class MdsWidgetComponent {
         this.temporaryValue = undefined;
         // super(toast, null, translate);
     }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
     async ngOnChanges(changes) {
         this.value.set(await this.getNodeValue());
     }
     async ngOnInit() {
+        this.widget.focusTrigger.pipe(takeUntil(this.destroyed$)).subscribe(async () => {
+            await this.focus();
+            this.startEdit();
+        });
         this.value.set(await this.getNodeValue());
         this.widget
             .getInitialDisplayValues()
-            .pipe(filter((v) => !!v))
+            .pipe(filter((v) => !!v?.values))
             .subscribe(async (value) => {
             this.value.set(value.values.map((v) => v.displayString));
         });
-        this.basicType.set(this.getBasicType());
+        this.basicType.set(this.widget.getBasicType(this.viewInstance.treeDisplay === 'flat'));
         this.rawValue = await this.getRawValue().toPromise();
     }
     getDefinition() {
         return this.widget?.definition || this.definition;
     }
-    getBasicType() {
-        switch (this.getDefinition().id) {
-            case 'license':
-                return 'license';
-        }
-        switch (this.getDefinition().type) {
-            case 'text':
-            case 'email':
-            case 'month':
-            case 'color':
-            case 'textarea':
-            case 'singleoption':
-                return 'text';
-            case 'number':
-                return 'number';
-            case 'date':
-                return 'date';
-            case 'vcard':
-                return 'vcard';
-            case 'multivalueFixedBadges':
-            case 'multivalueSuggestBadges':
-            case 'singlevalueSuggestBadges':
-            case 'multivalueBadges':
-            case 'singlevalueTree':
-            case 'multivalueTree':
-                return this.viewInstance.treeDisplay === 'flat' ? 'array' : 'tree';
-            case 'slider':
-                return 'slider';
-            case 'duration':
-                return 'duration';
-            case 'range':
-                return 'range';
-        }
-        return 'unknown';
-    }
     supportsInlineEditing() {
         return MdsWidgetComponent.inlineEditing.includes(this.widget?.definition.type);
     }
@@ -2058,7 +1849,7 @@ class MdsWidgetComponent {
         }
         const id = this.getDefinition().id;
         const values = this.getNodeValues();
-        if (this.getBasicType() === 'license') {
+        if (this.widget.getBasicType(this.viewInstance.treeDisplay === 'flat') === 'license') {
             this.license$.next({
                 icon: await this.nodeHelper.getLicenseIcon({
                     properties: this.getNodeValues(),
@@ -2100,50 +1891,17 @@ class MdsWidgetComponent {
     }
     click() {
         if (this.getDefinition().link === '_BLANK') {
-            window.open(this.formatText()[0]);
+            window.open(this.widget.getFormattedValue(this.value(), 'text', this.translate)[0]);
         }
         else if (this.getDefinition().link === '_SELF') {
-            window.location.href = this.formatText()[0];
+            window.location.href = this.widget.getFormattedValue(this.value(), 'text', this.translate)[0];
+        }
+        else {
+            console.warn('Unsupported link type ' + this.getDefinition().link);
         }
-        else {
-            console.warn('Unsupported link type ' + this.getDefinition().link);
-        }
-    }
-    formatDate() {
-        return this.value().map((v) => {
-            if (this.getDefinition().format) {
-                try {
-                    return new DatePipe('en').transform(v, this.getDefinition().format);
-                }
-                catch (e) {
-                    console.warn('Could not format date', e, this.getDefinition());
-                    return DateHelper.formatDate(this.translate, v, {
-                        showAlwaysTime: true,
-                    });
-                }
-            }
-            else {
-                return DateHelper.formatDate(this.translate, v, {
-                    showAlwaysTime: true,
-                });
-            }
-        });
-    }
-    formatNumber() {
-        return this.value().map((v) => {
-            if (this.widget.definition.format === 'bytes') {
-                return new FormatSizePipe(this.translate).transform(v);
-            }
-            return v;
-        });
     }
-    formatText() {
-        return this.value().map((v) => {
-            if (this.widget.definition.format) {
-                return this.widget.definition.format.replace('${value}', v);
-            }
-            return v;
-        });
+    formatValue() {
+        return this.widget.getFormattedValue(this.value(), this.widget.getBasicType(this.viewInstance.treeDisplay === 'flat'), this.translate);
     }
     // instance: MdsEditorWidgetBase
     async finishEdit(instance, store = false) {
@@ -2153,7 +1911,7 @@ class MdsWidgetComponent {
         this.temporaryValue = instance.widget.getValue();
         this.value.set(await this.getNodeValue());
         this.editWrapper.nativeElement.children[0].innerHTML = null;
-        await this.mdsEditorInstance.fetchDisplayValues(this.widget);
+        await this.mdsEditorInstance.fetchDisplayValues(this.widget, this.value());
     }
     isEditable() {
         if (!this.mdsEditorInstance) {
@@ -2225,18 +1983,18 @@ class MdsWidgetComponent {
         return params;
     }
     startEdit(event) {
-        event.stopPropagation();
+        event?.stopPropagation();
         void this.view.injectEditField(this, this.editWrapper.nativeElement.children[0]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsWidgetComponent, deps: [{ token: MdsEditorInstanceServiceAbstract, optional: true }, { token: i1.TranslateService }, { token: UIService }, { token: ViewInstanceService }, { token: MdsViewerService }, { token: i0.Injector }, { token: NodeHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MdsWidgetComponent, isStandalone: false, selector: "es-mds-widget", inputs: { widget: "widget", showCaption: "showCaption", inlineEditing: "inlineEditing", definition: "definition", view: "view" }, viewQueries: [{ propertyName: "editWrapper", first: true, predicate: ["editWrapper"], descendants: true }, { propertyName: "matRipple", first: true, predicate: MatRipple, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-mds-editor-widget-container\n  *ngIf=\"!editWrapper.innerText.trim()\"\n  [injectedView]=\"this\"\n  [widget]=\"widget\"\n  [label]=\"false\"\n  [wrapInFormField]=\"false\"\n  [wrapInGroup]=\"false\"\n  [valueType]=\"valueType\"\n  matRipple\n  [matRippleDisabled]=\"true\"\n>\n  <div class=\"edit-wrapper\">\n    <div\n      *ngIf=\"!isEmpty() || !widget.definition.hideIfEmpty || isEditable()\"\n      class=\"widget-wrapper\"\n    >\n      <div\n        class=\"widget-label\"\n        [attr.role]=\"headingLevel ? 'heading' : null\"\n        [attr.aria-level]=\"headingLevel\"\n        *ngIf=\"widget.definition.caption && showCaption\"\n      >\n        {{ widget.definition.caption\n        }}<span *ngIf=\"!headingLevel\" class=\"cdk-visually-hidden\">: </span>\n      </div>\n      <div\n        class=\"value-wrapper\"\n        [class.value-wrapper-edit]=\"isEditable()\"\n        (click)=\"isEditable() ? startEdit($event) : null\"\n      >\n        <div *ngIf=\"isEmpty()\" class=\"widget-data widget-no-data widget-type-{{ basicType() }}\">\n          -\n        </div>\n        <div\n          *ngIf=\"!isEmpty()\"\n          class=\"widget-data widget-type-{{ basicType() }} {{\n            widget.definition.link ? 'widget-link' : ''\n          }}\"\n          (click)=\"click()\"\n        >\n          <div *ngIf=\"basicType() === 'text'\">{{ formatText() }}</div>\n          <div *ngIf=\"basicType() === 'number'\">{{ formatNumber() }}</div>\n          <div *ngIf=\"basicType() === 'date'\">{{ formatDate() }}</div>\n          <div *ngIf=\"basicType() === 'license' && (license$ | async) as license\">\n            <img alt=\"\" [src]=\"license.icon\" /> {{ license.name }}\n          </div>\n          <div *ngIf=\"basicType() === 'array'\">\n            <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v }}</div>\n          </div>\n          <div *ngIf=\"basicType() === 'tree'\">\n            <div class=\"tree-entry\" *ngFor=\"let v of rawValue\">\n              <ng-container *ngTemplateOutlet=\"treeEntry; context: { path: v.path }\"></ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"basicType() === 'vcard'\">\n            <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v | vcardName }}</div>\n          </div>\n          <div *ngIf=\"basicType() === 'slider'\">\n            <span class=\"slider-value\">{{ value() }}</span\n            ><span> / </span><span class=\"slider-max\">{{ widget.definition.max }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'duration'\">\n            <span class=\"duration-value\">{{ value()[0] | appMdsDuration }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'range'\">\n            <span class=\"slider-value\">{{ value()[0] }}</span\n            >-<span class=\"slider-value\">{{ value()[1] }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'unknown'\">\n            The widget type {{ widget.definition.type }} is currently not supported via angular\n            rendering\n          </div>\n        </div>\n      </div>\n    </div>\n    <!--<button mat-icon-button\n            *ngIf=\"mdsEditorInstance.editorMode === 'inline' && widget.definition.interactionType === 'Input'\"\n            (click)=\"view.injectEditField(this, edit)\"\n            class=\"btn-edit\">\n      <i esIcon=\"edit\"></i>\n    </button>-->\n  </div>\n</es-mds-editor-widget-container>\n<div class=\"edit-wrapper\">\n  <div #editWrapper><div #edit></div></div>\n  <!--<button *ngIf=\"!!editWrapper.innerText.trim()\" mat-icon-button><i esIcon=\"save\"></i></button>-->\n</div>\n<ng-template #treeEntry let-path=\"path\">\n  <ng-container *ngFor=\"let t of path; let first = first\">\n    <ng-container *ngIf=\"!first\">\n      <span class=\"cdk-visually-hidden\">{{ 'SUB_CATEGORY_ARIA' | translate }}</span>\n      <i esIcon=\"keyboard_arrow_right\" [aria]=\"false\"></i>\n    </ng-container>\n    <a\n      [routerLink]=\"'/' + ROUTER_PREFIX + 'search'\"\n      [queryParams]=\"getSearchParams(t)\"\n      *ngIf=\"widget.definition.isSearchable\"\n      >{{ t.caption }}</a\n    >\n    <span *ngIf=\"!widget.definition.isSearchable\">{{ t.caption }}</span>\n  </ng-container>\n</ng-template>\n", styles: [".widget-label{font-size:90%;opacity:.8}.edit-wrapper{display:flex;align-items:center;transition:var(--transitionNormal) all}.edit-wrapper>div:first-child{flex-grow:1}.edit-wrapper>button{margin-left:10px}.edit-wrapper .widget-wrapper{padding:2px 5px}.edit-wrapper .value-wrapper-edit:hover{outline:1px solid #ccc;cursor:text}.widget-data{padding:4px 0 10px;word-break:break-word}.widget-data.widget-type-slider{opacity:.8}.widget-data.widget-type-slider .slider-value{opacity:.9;font-weight:700}.widget-data.widget-type-array .array-entry,.widget-data.widget-type-vcard .array-entry{display:inline}.widget-data.widget-type-array .array-entry:not(:last-child):after,.widget-data.widget-type-vcard .array-entry:not(:last-child):after{content:\", \";padding-right:.3em;display:inline;align-items:flex-end}.widget-data.widget-type-tree>div{display:flex;flex-wrap:wrap;gap:10px}.widget-data.widget-type-tree .tree-entry{display:inline-block;border-radius:5px;padding:5px 10px;background-color:#f9f9f9}.widget-data.widget-type-tree .tree-entry>a{color:var(--palette-primary-800);text-decoration:none}.widget-data.widget-type-tree .tree-entry>*{vertical-align:middle}.widget-data.widget-type-tree .tree-entry>i{font-size:18px}.widget-data.widget-link{text-decoration:underline;cursor:pointer}.widget-type-text>div{white-space:pre-line}:host ::ng-deep .edit-wrapper .widget-container mat-form-field{margin-top:.5em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MdsDurationPipe, name: "appMdsDuration" }, { kind: "pipe", type: VCardNamePipe, name: "vcardName" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsWidgetComponent, deps: [{ token: MdsEditorInstanceServiceAbstract, optional: true }, { token: i1$1.TranslateService }, { token: UIService }, { token: ViewInstanceService }, { token: MdsViewerService }, { token: i0.Injector }, { token: NodeHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MdsWidgetComponent, isStandalone: false, selector: "es-mds-widget", inputs: { widget: "widget", showCaption: "showCaption", inlineEditing: "inlineEditing", definition: "definition", view: "view" }, viewQueries: [{ propertyName: "editWrapper", first: true, predicate: ["editWrapper"], descendants: true }, { propertyName: "matRipple", first: true, predicate: MatRipple, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-mds-editor-widget-container\n  *ngIf=\"!editWrapper.innerText.trim()\"\n  [injectedView]=\"this\"\n  [widget]=\"widget\"\n  [label]=\"false\"\n  [wrapInFormField]=\"false\"\n  [wrapInGroup]=\"false\"\n  [valueType]=\"valueType\"\n  matRipple\n  [matRippleDisabled]=\"true\"\n>\n  <div class=\"edit-wrapper\">\n    <div\n      *ngIf=\"!isEmpty() || !widget.definition.hideIfEmpty || isEditable()\"\n      class=\"widget-wrapper\"\n    >\n      <div\n        class=\"widget-label\"\n        [attr.role]=\"headingLevel ? 'heading' : null\"\n        [attr.aria-level]=\"headingLevel\"\n        *ngIf=\"widget.definition.caption && showCaption\"\n      >\n        {{ widget.definition.caption\n        }}<span *ngIf=\"!headingLevel\" class=\"cdk-visually-hidden\">: </span>\n      </div>\n      <div\n        class=\"value-wrapper\"\n        [class.value-wrapper-edit]=\"isEditable()\"\n        (click)=\"isEditable() ? startEdit($event) : null\"\n      >\n        <div *ngIf=\"isEmpty()\" class=\"widget-data widget-no-data widget-type-{{ basicType() }}\">\n          -\n        </div>\n        <div\n          *ngIf=\"!isEmpty()\"\n          class=\"widget-data widget-type-{{ basicType() }} {{\n            widget.definition.link ? 'widget-link' : ''\n          }}\"\n          (click)=\"click()\"\n        >\n          <div *ngIf=\"['text', 'number', 'date'].includes(basicType())\">{{ formatValue() }}</div>\n          <div *ngIf=\"basicType() === 'license' && (license$ | async) as license\">\n            <img alt=\"\" [src]=\"license.icon\" /> {{ license.name }}\n          </div>\n          <div *ngIf=\"basicType() === 'array'\">\n            <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v }}</div>\n          </div>\n          <div *ngIf=\"basicType() === 'tree'\">\n            <div class=\"tree-entry\" *ngFor=\"let v of rawValue\">\n              <ng-container *ngTemplateOutlet=\"treeEntry; context: { path: v.path }\"></ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"basicType() === 'vcard'\">\n            <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v | vcardName }}</div>\n          </div>\n          <div *ngIf=\"basicType() === 'slider'\">\n            <span class=\"slider-value\">{{ value() }}</span\n            ><span> / </span><span class=\"slider-max\">{{ widget.definition.max }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'duration'\">\n            <span class=\"duration-value\">{{ value()[0] | appMdsDuration }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'range'\">\n            <span class=\"slider-value\">{{ value()[0] }}</span\n            >-<span class=\"slider-value\">{{ value()[1] }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'unknown'\">\n            The widget type {{ widget.definition.type }} is currently not supported via angular\n            rendering\n          </div>\n        </div>\n      </div>\n    </div>\n    <!--<button mat-icon-button\n            *ngIf=\"mdsEditorInstance.editorMode === 'inline' && widget.definition.interactionType === 'Input'\"\n            (click)=\"view.injectEditField(this, edit)\"\n            class=\"btn-edit\">\n      <i esIcon=\"edit\"></i>\n    </button>-->\n  </div>\n</es-mds-editor-widget-container>\n<div class=\"edit-wrapper\">\n  <div #editWrapper><div #edit></div></div>\n  <!--<button *ngIf=\"!!editWrapper.innerText.trim()\" mat-icon-button><i esIcon=\"save\"></i></button>-->\n</div>\n<ng-template #treeEntry let-path=\"path\">\n  <ng-container *ngFor=\"let t of path; let first = first\">\n    <ng-container *ngIf=\"!first\">\n      <span class=\"cdk-visually-hidden\">{{ 'SUB_CATEGORY_ARIA' | translate }}</span>\n      <i esIcon=\"keyboard_arrow_right\" [aria]=\"false\"></i>\n    </ng-container>\n    <a\n      [routerLink]=\"'/' + ROUTER_PREFIX + 'search'\"\n      [queryParams]=\"getSearchParams(t)\"\n      *ngIf=\"widget.definition.isSearchable\"\n      >{{ t.caption }}</a\n    >\n    <span *ngIf=\"!widget.definition.isSearchable\">{{ t.caption }}</span>\n  </ng-container>\n</ng-template>\n", styles: [".widget-label{font-size:90%;opacity:.8}.edit-wrapper{display:flex;align-items:center;transition:var(--transitionNormal) all}.edit-wrapper>div:first-child{flex-grow:1}.edit-wrapper>button{margin-left:10px}.edit-wrapper .widget-wrapper{padding:2px 5px}.edit-wrapper .value-wrapper-edit:hover{outline:1px solid #ccc;cursor:text}.widget-data{padding:4px 0 10px;word-break:break-word}.widget-data.widget-type-slider{opacity:.8}.widget-data.widget-type-slider .slider-value{opacity:.9;font-weight:700}.widget-data.widget-type-array .array-entry,.widget-data.widget-type-vcard .array-entry{display:inline}.widget-data.widget-type-array .array-entry:not(:last-child):after,.widget-data.widget-type-vcard .array-entry:not(:last-child):after{content:\", \";padding-right:.3em;display:inline;align-items:flex-end}.widget-data.widget-type-tree>div{display:flex;flex-wrap:wrap;gap:10px}.widget-data.widget-type-tree .tree-entry{display:inline-block;border-radius:5px;padding:5px 10px;background-color:#f9f9f9}.widget-data.widget-type-tree .tree-entry>a{color:var(--palette-primary-800);text-decoration:none}.widget-data.widget-type-tree .tree-entry>*{vertical-align:middle}.widget-data.widget-type-tree .tree-entry>i{font-size:18px}.widget-data.widget-link{text-decoration:underline;cursor:pointer}.widget-type-text>div{white-space:pre-line}:host ::ng-deep .edit-wrapper .widget-container mat-form-field{margin-top:.5em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MdsDurationPipe, name: "appMdsDuration" }, { kind: "pipe", type: VCardNamePipe, name: "vcardName" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-mds-widget', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "<es-mds-editor-widget-container\n  *ngIf=\"!editWrapper.innerText.trim()\"\n  [injectedView]=\"this\"\n  [widget]=\"widget\"\n  [label]=\"false\"\n  [wrapInFormField]=\"false\"\n  [wrapInGroup]=\"false\"\n  [valueType]=\"valueType\"\n  matRipple\n  [matRippleDisabled]=\"true\"\n>\n  <div class=\"edit-wrapper\">\n    <div\n      *ngIf=\"!isEmpty() || !widget.definition.hideIfEmpty || isEditable()\"\n      class=\"widget-wrapper\"\n    >\n      <div\n        class=\"widget-label\"\n        [attr.role]=\"headingLevel ? 'heading' : null\"\n        [attr.aria-level]=\"headingLevel\"\n        *ngIf=\"widget.definition.caption && showCaption\"\n      >\n        {{ widget.definition.caption\n        }}<span *ngIf=\"!headingLevel\" class=\"cdk-visually-hidden\">: </span>\n      </div>\n      <div\n        class=\"value-wrapper\"\n        [class.value-wrapper-edit]=\"isEditable()\"\n        (click)=\"isEditable() ? startEdit($event) : null\"\n      >\n        <div *ngIf=\"isEmpty()\" class=\"widget-data widget-no-data widget-type-{{ basicType() }}\">\n          -\n        </div>\n        <div\n          *ngIf=\"!isEmpty()\"\n          class=\"widget-data widget-type-{{ basicType() }} {{\n            widget.definition.link ? 'widget-link' : ''\n          }}\"\n          (click)=\"click()\"\n        >\n          <div *ngIf=\"basicType() === 'text'\">{{ formatText() }}</div>\n          <div *ngIf=\"basicType() === 'number'\">{{ formatNumber() }}</div>\n          <div *ngIf=\"basicType() === 'date'\">{{ formatDate() }}</div>\n          <div *ngIf=\"basicType() === 'license' && (license$ | async) as license\">\n            <img alt=\"\" [src]=\"license.icon\" /> {{ license.name }}\n          </div>\n          <div *ngIf=\"basicType() === 'array'\">\n            <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v }}</div>\n          </div>\n          <div *ngIf=\"basicType() === 'tree'\">\n            <div class=\"tree-entry\" *ngFor=\"let v of rawValue\">\n              <ng-container *ngTemplateOutlet=\"treeEntry; context: { path: v.path }\"></ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"basicType() === 'vcard'\">\n            <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v | vcardName }}</div>\n          </div>\n          <div *ngIf=\"basicType() === 'slider'\">\n            <span class=\"slider-value\">{{ value() }}</span\n            ><span> / </span><span class=\"slider-max\">{{ widget.definition.max }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'duration'\">\n            <span class=\"duration-value\">{{ value()[0] | appMdsDuration }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'range'\">\n            <span class=\"slider-value\">{{ value()[0] }}</span\n            >-<span class=\"slider-value\">{{ value()[1] }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'unknown'\">\n            The widget type {{ widget.definition.type }} is currently not supported via angular\n            rendering\n          </div>\n        </div>\n      </div>\n    </div>\n    <!--<button mat-icon-button\n            *ngIf=\"mdsEditorInstance.editorMode === 'inline' && widget.definition.interactionType === 'Input'\"\n            (click)=\"view.injectEditField(this, edit)\"\n            class=\"btn-edit\">\n      <i esIcon=\"edit\"></i>\n    </button>-->\n  </div>\n</es-mds-editor-widget-container>\n<div class=\"edit-wrapper\">\n  <div #editWrapper><div #edit></div></div>\n  <!--<button *ngIf=\"!!editWrapper.innerText.trim()\" mat-icon-button><i esIcon=\"save\"></i></button>-->\n</div>\n<ng-template #treeEntry let-path=\"path\">\n  <ng-container *ngFor=\"let t of path; let first = first\">\n    <ng-container *ngIf=\"!first\">\n      <span class=\"cdk-visually-hidden\">{{ 'SUB_CATEGORY_ARIA' | translate }}</span>\n      <i esIcon=\"keyboard_arrow_right\" [aria]=\"false\"></i>\n    </ng-container>\n    <a\n      [routerLink]=\"'/' + ROUTER_PREFIX + 'search'\"\n      [queryParams]=\"getSearchParams(t)\"\n      *ngIf=\"widget.definition.isSearchable\"\n      >{{ t.caption }}</a\n    >\n    <span *ngIf=\"!widget.definition.isSearchable\">{{ t.caption }}</span>\n  </ng-container>\n</ng-template>\n", styles: [".widget-label{font-size:90%;opacity:.8}.edit-wrapper{display:flex;align-items:center;transition:var(--transitionNormal) all}.edit-wrapper>div:first-child{flex-grow:1}.edit-wrapper>button{margin-left:10px}.edit-wrapper .widget-wrapper{padding:2px 5px}.edit-wrapper .value-wrapper-edit:hover{outline:1px solid #ccc;cursor:text}.widget-data{padding:4px 0 10px;word-break:break-word}.widget-data.widget-type-slider{opacity:.8}.widget-data.widget-type-slider .slider-value{opacity:.9;font-weight:700}.widget-data.widget-type-array .array-entry,.widget-data.widget-type-vcard .array-entry{display:inline}.widget-data.widget-type-array .array-entry:not(:last-child):after,.widget-data.widget-type-vcard .array-entry:not(:last-child):after{content:\", \";padding-right:.3em;display:inline;align-items:flex-end}.widget-data.widget-type-tree>div{display:flex;flex-wrap:wrap;gap:10px}.widget-data.widget-type-tree .tree-entry{display:inline-block;border-radius:5px;padding:5px 10px;background-color:#f9f9f9}.widget-data.widget-type-tree .tree-entry>a{color:var(--palette-primary-800);text-decoration:none}.widget-data.widget-type-tree .tree-entry>*{vertical-align:middle}.widget-data.widget-type-tree .tree-entry>i{font-size:18px}.widget-data.widget-link{text-decoration:underline;cursor:pointer}.widget-type-text>div{white-space:pre-line}:host ::ng-deep .edit-wrapper .widget-container mat-form-field{margin-top:.5em}\n"] }]
+            args: [{ selector: 'es-mds-widget', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "<es-mds-editor-widget-container\n  *ngIf=\"!editWrapper.innerText.trim()\"\n  [injectedView]=\"this\"\n  [widget]=\"widget\"\n  [label]=\"false\"\n  [wrapInFormField]=\"false\"\n  [wrapInGroup]=\"false\"\n  [valueType]=\"valueType\"\n  matRipple\n  [matRippleDisabled]=\"true\"\n>\n  <div class=\"edit-wrapper\">\n    <div\n      *ngIf=\"!isEmpty() || !widget.definition.hideIfEmpty || isEditable()\"\n      class=\"widget-wrapper\"\n    >\n      <div\n        class=\"widget-label\"\n        [attr.role]=\"headingLevel ? 'heading' : null\"\n        [attr.aria-level]=\"headingLevel\"\n        *ngIf=\"widget.definition.caption && showCaption\"\n      >\n        {{ widget.definition.caption\n        }}<span *ngIf=\"!headingLevel\" class=\"cdk-visually-hidden\">: </span>\n      </div>\n      <div\n        class=\"value-wrapper\"\n        [class.value-wrapper-edit]=\"isEditable()\"\n        (click)=\"isEditable() ? startEdit($event) : null\"\n      >\n        <div *ngIf=\"isEmpty()\" class=\"widget-data widget-no-data widget-type-{{ basicType() }}\">\n          -\n        </div>\n        <div\n          *ngIf=\"!isEmpty()\"\n          class=\"widget-data widget-type-{{ basicType() }} {{\n            widget.definition.link ? 'widget-link' : ''\n          }}\"\n          (click)=\"click()\"\n        >\n          <div *ngIf=\"['text', 'number', 'date'].includes(basicType())\">{{ formatValue() }}</div>\n          <div *ngIf=\"basicType() === 'license' && (license$ | async) as license\">\n            <img alt=\"\" [src]=\"license.icon\" /> {{ license.name }}\n          </div>\n          <div *ngIf=\"basicType() === 'array'\">\n            <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v }}</div>\n          </div>\n          <div *ngIf=\"basicType() === 'tree'\">\n            <div class=\"tree-entry\" *ngFor=\"let v of rawValue\">\n              <ng-container *ngTemplateOutlet=\"treeEntry; context: { path: v.path }\"></ng-container>\n            </div>\n          </div>\n          <div *ngIf=\"basicType() === 'vcard'\">\n            <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v | vcardName }}</div>\n          </div>\n          <div *ngIf=\"basicType() === 'slider'\">\n            <span class=\"slider-value\">{{ value() }}</span\n            ><span> / </span><span class=\"slider-max\">{{ widget.definition.max }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'duration'\">\n            <span class=\"duration-value\">{{ value()[0] | appMdsDuration }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'range'\">\n            <span class=\"slider-value\">{{ value()[0] }}</span\n            >-<span class=\"slider-value\">{{ value()[1] }}</span>\n          </div>\n          <div *ngIf=\"basicType() === 'unknown'\">\n            The widget type {{ widget.definition.type }} is currently not supported via angular\n            rendering\n          </div>\n        </div>\n      </div>\n    </div>\n    <!--<button mat-icon-button\n            *ngIf=\"mdsEditorInstance.editorMode === 'inline' && widget.definition.interactionType === 'Input'\"\n            (click)=\"view.injectEditField(this, edit)\"\n            class=\"btn-edit\">\n      <i esIcon=\"edit\"></i>\n    </button>-->\n  </div>\n</es-mds-editor-widget-container>\n<div class=\"edit-wrapper\">\n  <div #editWrapper><div #edit></div></div>\n  <!--<button *ngIf=\"!!editWrapper.innerText.trim()\" mat-icon-button><i esIcon=\"save\"></i></button>-->\n</div>\n<ng-template #treeEntry let-path=\"path\">\n  <ng-container *ngFor=\"let t of path; let first = first\">\n    <ng-container *ngIf=\"!first\">\n      <span class=\"cdk-visually-hidden\">{{ 'SUB_CATEGORY_ARIA' | translate }}</span>\n      <i esIcon=\"keyboard_arrow_right\" [aria]=\"false\"></i>\n    </ng-container>\n    <a\n      [routerLink]=\"'/' + ROUTER_PREFIX + 'search'\"\n      [queryParams]=\"getSearchParams(t)\"\n      *ngIf=\"widget.definition.isSearchable\"\n      >{{ t.caption }}</a\n    >\n    <span *ngIf=\"!widget.definition.isSearchable\">{{ t.caption }}</span>\n  </ng-container>\n</ng-template>\n", styles: [".widget-label{font-size:90%;opacity:.8}.edit-wrapper{display:flex;align-items:center;transition:var(--transitionNormal) all}.edit-wrapper>div:first-child{flex-grow:1}.edit-wrapper>button{margin-left:10px}.edit-wrapper .widget-wrapper{padding:2px 5px}.edit-wrapper .value-wrapper-edit:hover{outline:1px solid #ccc;cursor:text}.widget-data{padding:4px 0 10px;word-break:break-word}.widget-data.widget-type-slider{opacity:.8}.widget-data.widget-type-slider .slider-value{opacity:.9;font-weight:700}.widget-data.widget-type-array .array-entry,.widget-data.widget-type-vcard .array-entry{display:inline}.widget-data.widget-type-array .array-entry:not(:last-child):after,.widget-data.widget-type-vcard .array-entry:not(:last-child):after{content:\", \";padding-right:.3em;display:inline;align-items:flex-end}.widget-data.widget-type-tree>div{display:flex;flex-wrap:wrap;gap:10px}.widget-data.widget-type-tree .tree-entry{display:inline-block;border-radius:5px;padding:5px 10px;background-color:#f9f9f9}.widget-data.widget-type-tree .tree-entry>a{color:var(--palette-primary-800);text-decoration:none}.widget-data.widget-type-tree .tree-entry>*{vertical-align:middle}.widget-data.widget-type-tree .tree-entry>i{font-size:18px}.widget-data.widget-link{text-decoration:underline;cursor:pointer}.widget-type-text>div{white-space:pre-line}:host ::ng-deep .edit-wrapper .widget-container mat-form-field{margin-top:.5em}\n"] }]
         }], ctorParameters: () => [{ type: MdsEditorInstanceServiceAbstract, decorators: [{
                     type: Optional
-                }] }, { type: i1.TranslateService }, { type: UIService }, { type: ViewInstanceService }, { type: MdsViewerService }, { type: i0.Injector }, { type: NodeHelperService }], propDecorators: { widget: [{
+                }] }, { type: i1$1.TranslateService }, { type: UIService }, { type: ViewInstanceService }, { type: MdsViewerService }, { type: i0.Injector }, { type: NodeHelperService }], propDecorators: { widget: [{
                 type: Input
             }], showCaption: [{
                 type: Input
@@ -2306,7 +2064,7 @@ class SpinnerSmallComponent {
         this.diameter = 20;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SpinnerSmallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SpinnerSmallComponent, isStandalone: true, selector: "es-spinner-small", inputs: { diameter: "diameter" }, ngImport: i0, template: "<mat-progress-spinner\n  color=\"primary\"\n  mode=\"indeterminate\"\n  [diameter]=\"diameter\"\n></mat-progress-spinner>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SpinnerSmallComponent, isStandalone: true, selector: "es-spinner-small", inputs: { diameter: "diameter" }, ngImport: i0, template: "<mat-progress-spinner\n  color=\"primary\"\n  mode=\"indeterminate\"\n  [diameter]=\"diameter\"\n></mat-progress-spinner>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SpinnerSmallComponent, decorators: [{
             type: Component,
@@ -2446,13 +2204,13 @@ class MdsViewerComponent {
             void this.inflate();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsViewerComponent, deps: [{ token: i2.MdsService }, { token: MdsViewerService }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i3$1.DomSanitizer }, { token: ViewInstanceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MdsViewerComponent, isStandalone: false, selector: "es-mds-viewer", inputs: { mdsEditorInstanceService: "mdsEditorInstanceService", groupId: "groupId", setId: "setId", data: "data", showGroupHeadings: "showGroupHeadings", headingLevel: "headingLevel" }, providers: [MdsViewerService, ViewInstanceService], viewQueries: [{ propertyName: "container", predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-spinner-small *ngIf=\"!templates()\"></es-spinner-small>\n<div *ngFor=\"let t of templates()\" #container class=\"mds-viewer\">\n  <div *ngIf=\"showGroupHeadings && t.view.caption\" class=\"card-title-element group-heading\">\n    <i [esIcon]=\"t.view.icon\" *ngIf=\"t.view.icon\"></i><span>{{ t.view.caption }}</span>\n  </div>\n  <div class=\"template\" [innerHTML]=\"t.html\"></div>\n</div>\n", styles: [":host ::ng-deep es-mds-editor-widget-container{margin-bottom:0}:host ::ng-deep .mdsContributorGroup{padding:5px}:host ::ng-deep .mdsContributorGroup .mdsContributorTitle{font-weight:700;padding-bottom:3px}:host{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(450px,max(200px,100%)),1fr));grid-gap:10px}.mds-viewer{display:flex;flex-direction:column;gap:10px}es-spinner-small{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.card-title-element{font-size:140%;font-weight:700;border-bottom:1px solid #888;padding:10px;background-color:#f7f7f7}.card-title-element i{margin-left:10px;margin-right:10px;color:#666;position:relative;top:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpinnerSmallComponent, selector: "es-spinner-small", inputs: ["diameter"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsViewerComponent, deps: [{ token: i1.MdsService }, { token: MdsViewerService }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i3$1.DomSanitizer }, { token: ViewInstanceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MdsViewerComponent, isStandalone: false, selector: "es-mds-viewer", inputs: { mdsEditorInstanceService: "mdsEditorInstanceService", groupId: "groupId", setId: "setId", data: "data", mds: "mds", showGroupHeadings: "showGroupHeadings", headingLevel: "headingLevel" }, providers: [MdsViewerService, ViewInstanceService], viewQueries: [{ propertyName: "container", predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-spinner-small *ngIf=\"!templates()\"></es-spinner-small>\n<div *ngFor=\"let t of templates()\" #container class=\"mds-viewer\">\n  <div *ngIf=\"showGroupHeadings && t.view.caption\" class=\"card-title-element group-heading\">\n    <i [esIcon]=\"t.view.icon\" *ngIf=\"t.view.icon\"></i><span>{{ t.view.caption }}</span>\n  </div>\n  <div class=\"template\" [innerHTML]=\"t.html\"></div>\n</div>\n", styles: [":host ::ng-deep es-mds-editor-widget-container{margin-bottom:0}:host ::ng-deep .mdsContributorGroup{padding:5px}:host ::ng-deep .mdsContributorGroup .mdsContributorTitle{font-weight:700;padding-bottom:3px}:host{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(450px,max(200px,100%)),1fr));grid-gap:10px}.mds-viewer{display:flex;flex-direction:column;gap:10px}es-spinner-small{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.card-title-element{font-size:140%;font-weight:700;border-bottom:1px solid #888;padding:10px;background-color:#f7f7f7}.card-title-element i{margin-left:10px;margin-right:10px;color:#666;position:relative;top:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpinnerSmallComponent, selector: "es-spinner-small", inputs: ["diameter"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-mds-viewer', providers: [MdsViewerService, ViewInstanceService], standalone: false, template: "<es-spinner-small *ngIf=\"!templates()\"></es-spinner-small>\n<div *ngFor=\"let t of templates()\" #container class=\"mds-viewer\">\n  <div *ngIf=\"showGroupHeadings && t.view.caption\" class=\"card-title-element group-heading\">\n    <i [esIcon]=\"t.view.icon\" *ngIf=\"t.view.icon\"></i><span>{{ t.view.caption }}</span>\n  </div>\n  <div class=\"template\" [innerHTML]=\"t.html\"></div>\n</div>\n", styles: [":host ::ng-deep es-mds-editor-widget-container{margin-bottom:0}:host ::ng-deep .mdsContributorGroup{padding:5px}:host ::ng-deep .mdsContributorGroup .mdsContributorTitle{font-weight:700;padding-bottom:3px}:host{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(450px,max(200px,100%)),1fr));grid-gap:10px}.mds-viewer{display:flex;flex-direction:column;gap:10px}es-spinner-small{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.card-title-element{font-size:140%;font-weight:700;border-bottom:1px solid #888;padding:10px;background-color:#f7f7f7}.card-title-element i{margin-left:10px;margin-right:10px;color:#666;position:relative;top:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i2.MdsService }, { type: MdsViewerService }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i3$1.DomSanitizer }, { type: ViewInstanceService }], propDecorators: { container: [{
+        }], ctorParameters: () => [{ type: i1.MdsService }, { type: MdsViewerService }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i3$1.DomSanitizer }, { type: ViewInstanceService }], propDecorators: { container: [{
                 type: ViewChildren,
                 args: ['container']
             }], mdsEditorInstanceService: [{
@@ -2463,6 +2221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], data: [{
                 type: Input
+            }], mds: [{
+                type: Input
             }], showGroupHeadings: [{
                 type: Input
             }], headingLevel: [{
@@ -2614,6 +2374,17 @@ class UIAnimation {
     }
 }
 
+/**
+ * Copy paste from rxjs/util/isNumeric since importing it from there will trigger a warning about
+ * CommonJS or AMD dependencies and indeed increase the bundle size a bit.
+ */
+// From https://github.com/ReactiveX/rxjs/blob/6.x/src/internal/util/isArray.ts
+const isArray = (() => Array.isArray || ((x) => x && typeof x.length === 'number'))();
+// From https://github.com/ReactiveX/rxjs/blob/6.x/src/internal/util/isNumeric.ts
+function isNumeric(val) {
+    return !isArray(val) && val - parseFloat(val) + 1 >= 0;
+}
+
 class Helper {
     static deepCopy(data) {
         if (data == null)
@@ -2698,7 +2469,7 @@ class OptionTooltipPipe {
         return ((modifiers.length ? modifiers.join(' + ') + ' + ' : '') +
             option.keyboardShortcut.keyCode.replace('Key', ''));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OptionTooltipPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OptionTooltipPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: OptionTooltipPipe, isStandalone: false, name: "optionTooltip" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OptionTooltipPipe, decorators: [{
@@ -2707,7 +2478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'optionTooltip',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 class ReplaceCharsPipe {
     transform(value, args) {
@@ -2727,7 +2498,7 @@ class ReplaceCharsPipe {
     constructor(translate) {
         this.translate = translate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReplaceCharsPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReplaceCharsPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ReplaceCharsPipe, isStandalone: false, name: "replaceChars" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReplaceCharsPipe, decorators: [{
@@ -2736,7 +2507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'replaceChars',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 /**
  * The dropdown is one base component of the action bar (showing more actions),
@@ -2786,11 +2557,11 @@ class DropdownComponent {
         return this.options$.value?.some((o) => o.isEnabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownComponent, deps: [{ token: UIService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropdownComponent, isStandalone: false, selector: "es-dropdown", inputs: { position: "position", options: "options", callbackObjects: "callbackObjects", showDisabled: "showDisabled", menuClass: "menuClass" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-menu\n  #dropdown=\"matMenu\"\n  class=\"mat-dropdown-menu\"\n  [class]=\"menuClass\"\n  backdropClass=\"mat-dropdown-menu\"\n  [xPosition]=\"position === 'right' ? 'after' : 'before'\"\n>\n  <!-- MatMenu has role=\"menu\", so the only meaningful role of descendants is \"menuitem\" -->\n  <ul role=\"none\">\n    <ng-container *ngFor=\"let option of options$ | async; let i = index\">\n      <li *ngIf=\"option.isEnabled || showDisabled\" role=\"none\">\n        <button\n          mat-menu-item\n          class=\"mat-menu-item collection-item-{{\n            option.name | replaceChars : { search: '.', replace: '-' }\n          }}\"\n          matTooltip=\"{{ option | optionTooltip | async }}\"\n          matTooltipPosition=\"right\"\n          matTooltipTouchGestures=\"off\"\n          [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n          [class.mat-menu-item-separate]=\"option.isSeparate || isNewGroup(i)\"\n          [class.mat-menu-item-selected]=\"option.isSelected\"\n          [disabled]=\"!option.isEnabled\"\n          (click)=\"click(option)\"\n          attr.data-test=\"menu-item-{{ option.name }}\"\n        >\n          <i [esIcon]=\"option.icon\"></i> {{ option.name | translate }}\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</mat-menu>\n<div #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"display-none\"></div>\n", styles: ["::ng-deep .mat-dropdown-menu .mat-mdc-menu-content{min-width:200px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button{display:flex;align-items:center}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button:not(:disabled)>span{color:var(--primary)}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>i{width:35px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content:not(:empty){padding:0!important}::ng-deep .mat-dropdown-menu ul{margin:0;list-style:none;padding-left:0}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text i{margin-right:10px}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item:hover:not([disabled]),::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-focused{color:var(--itemSelectedTextColor);background-color:var(--listItemSelectedBackground)}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}::ng-deep .mat-dropdown-menu ul li .mat-menu-item-separate{border-top:1px solid #ccc}@media screen and (max-width: 600px){::ng-deep .mat-dropdown-menu.cdk-overlay-backdrop{background:#000c}::ng-deep .mat-dropdown-menu.mat-mdc-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius:0;max-height:calc(100vh - 150px);overflow-y:auto}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OptionTooltipPipe, name: "optionTooltip" }, { kind: "pipe", type: ReplaceCharsPipe, name: "replaceChars" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropdownComponent, isStandalone: false, selector: "es-dropdown", inputs: { position: "position", options: "options", callbackObjects: "callbackObjects", showDisabled: "showDisabled", menuClass: "menuClass" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-menu\n  #dropdown=\"matMenu\"\n  class=\"mat-dropdown-menu\"\n  [class]=\"menuClass\"\n  backdropClass=\"mat-dropdown-menu\"\n  [xPosition]=\"position === 'right' ? 'after' : 'before'\"\n>\n  <!-- MatMenu has role=\"menu\", so the only meaningful role of descendants is \"menuitem\" -->\n  <ul role=\"none\">\n    <ng-container *ngFor=\"let option of options$ | async; let i = index\">\n      <li *ngIf=\"option.isEnabled || showDisabled\" role=\"none\">\n        <button\n          mat-menu-item\n          class=\"mat-menu-item collection-item-{{\n            option.name | replaceChars : { search: '.', replace: '-' }\n          }}\"\n          matTooltip=\"{{ option | optionTooltip | async }}\"\n          matTooltipPosition=\"right\"\n          matTooltipTouchGestures=\"off\"\n          [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n          [class.mat-menu-item-separate]=\"option.isSeparate || isNewGroup(i)\"\n          [class.mat-menu-item-selected]=\"option.isSelected\"\n          [disabled]=\"!option.isEnabled\"\n          (click)=\"click(option)\"\n          attr.data-test=\"menu-item-{{ option.name }}\"\n        >\n          <i [esIcon]=\"option.icon\" esIconContext=\"option\"></i> {{ option.name | translate }}\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</mat-menu>\n<div #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"display-none\"></div>\n", styles: ["::ng-deep .mat-dropdown-menu .mat-mdc-menu-content{min-width:200px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button{display:flex;align-items:center}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button:not(:disabled)>span{color:var(--primary)}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>i{width:35px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>span{word-break:break-all}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content:not(:empty){padding:0!important}::ng-deep .mat-dropdown-menu ul{margin:0;list-style:none;padding-left:0}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text i{margin-right:10px}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item:hover:not([disabled]),::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-focused{color:var(--itemSelectedTextColor);background-color:var(--listItemSelectedBackground)}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}::ng-deep .mat-dropdown-menu ul li .mat-menu-item-separate{border-top:1px solid #ccc}@media screen and (max-width: 600px){::ng-deep .mat-dropdown-menu.cdk-overlay-backdrop{background:#000c}::ng-deep .mat-dropdown-menu.mat-mdc-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius:0;max-height:calc(100vh - 150px);overflow-y:auto}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OptionTooltipPipe, name: "optionTooltip" }, { kind: "pipe", type: ReplaceCharsPipe, name: "replaceChars" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-dropdown', standalone: false, template: "<mat-menu\n  #dropdown=\"matMenu\"\n  class=\"mat-dropdown-menu\"\n  [class]=\"menuClass\"\n  backdropClass=\"mat-dropdown-menu\"\n  [xPosition]=\"position === 'right' ? 'after' : 'before'\"\n>\n  <!-- MatMenu has role=\"menu\", so the only meaningful role of descendants is \"menuitem\" -->\n  <ul role=\"none\">\n    <ng-container *ngFor=\"let option of options$ | async; let i = index\">\n      <li *ngIf=\"option.isEnabled || showDisabled\" role=\"none\">\n        <button\n          mat-menu-item\n          class=\"mat-menu-item collection-item-{{\n            option.name | replaceChars : { search: '.', replace: '-' }\n          }}\"\n          matTooltip=\"{{ option | optionTooltip | async }}\"\n          matTooltipPosition=\"right\"\n          matTooltipTouchGestures=\"off\"\n          [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n          [class.mat-menu-item-separate]=\"option.isSeparate || isNewGroup(i)\"\n          [class.mat-menu-item-selected]=\"option.isSelected\"\n          [disabled]=\"!option.isEnabled\"\n          (click)=\"click(option)\"\n          attr.data-test=\"menu-item-{{ option.name }}\"\n        >\n          <i [esIcon]=\"option.icon\"></i> {{ option.name | translate }}\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</mat-menu>\n<div #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"display-none\"></div>\n", styles: ["::ng-deep .mat-dropdown-menu .mat-mdc-menu-content{min-width:200px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button{display:flex;align-items:center}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button:not(:disabled)>span{color:var(--primary)}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>i{width:35px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content:not(:empty){padding:0!important}::ng-deep .mat-dropdown-menu ul{margin:0;list-style:none;padding-left:0}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text i{margin-right:10px}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item:hover:not([disabled]),::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-focused{color:var(--itemSelectedTextColor);background-color:var(--listItemSelectedBackground)}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}::ng-deep .mat-dropdown-menu ul li .mat-menu-item-separate{border-top:1px solid #ccc}@media screen and (max-width: 600px){::ng-deep .mat-dropdown-menu.cdk-overlay-backdrop{background:#000c}::ng-deep .mat-dropdown-menu.mat-mdc-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius:0;max-height:calc(100vh - 150px);overflow-y:auto}}\n"] }]
+            args: [{ selector: 'es-dropdown', standalone: false, template: "<mat-menu\n  #dropdown=\"matMenu\"\n  class=\"mat-dropdown-menu\"\n  [class]=\"menuClass\"\n  backdropClass=\"mat-dropdown-menu\"\n  [xPosition]=\"position === 'right' ? 'after' : 'before'\"\n>\n  <!-- MatMenu has role=\"menu\", so the only meaningful role of descendants is \"menuitem\" -->\n  <ul role=\"none\">\n    <ng-container *ngFor=\"let option of options$ | async; let i = index\">\n      <li *ngIf=\"option.isEnabled || showDisabled\" role=\"none\">\n        <button\n          mat-menu-item\n          class=\"mat-menu-item collection-item-{{\n            option.name | replaceChars : { search: '.', replace: '-' }\n          }}\"\n          matTooltip=\"{{ option | optionTooltip | async }}\"\n          matTooltipPosition=\"right\"\n          matTooltipTouchGestures=\"off\"\n          [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n          [class.mat-menu-item-separate]=\"option.isSeparate || isNewGroup(i)\"\n          [class.mat-menu-item-selected]=\"option.isSelected\"\n          [disabled]=\"!option.isEnabled\"\n          (click)=\"click(option)\"\n          attr.data-test=\"menu-item-{{ option.name }}\"\n        >\n          <i [esIcon]=\"option.icon\" esIconContext=\"option\"></i> {{ option.name | translate }}\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</mat-menu>\n<div #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"display-none\"></div>\n", styles: ["::ng-deep .mat-dropdown-menu .mat-mdc-menu-content{min-width:200px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button{display:flex;align-items:center}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button:not(:disabled)>span{color:var(--primary)}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>i{width:35px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>span{word-break:break-all}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content:not(:empty){padding:0!important}::ng-deep .mat-dropdown-menu ul{margin:0;list-style:none;padding-left:0}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text i{margin-right:10px}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item:hover:not([disabled]),::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-focused{color:var(--itemSelectedTextColor);background-color:var(--listItemSelectedBackground)}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}::ng-deep .mat-dropdown-menu ul li .mat-menu-item-separate{border-top:1px solid #ccc}@media screen and (max-width: 600px){::ng-deep .mat-dropdown-menu.cdk-overlay-backdrop{background:#000c}::ng-deep .mat-dropdown-menu.mat-mdc-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius:0;max-height:calc(100vh - 150px);overflow-y:auto}}\n"] }]
         }], ctorParameters: () => [{ type: UIService }], propDecorators: { menu: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
@@ -2968,13 +2739,13 @@ class ActionbarComponent {
     ngOnChanges(changes) {
         this.invalidate();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionbarComponent, deps: [{ token: UIService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ActionbarComponent, isStandalone: false, selector: "es-actionbar", inputs: { numberOfAlwaysVisibleOptions: "numberOfAlwaysVisibleOptions", numberOfAlwaysVisibleOptionsMobile: "numberOfAlwaysVisibleOptionsMobile", appearance: "appearance", dropdownPosition: "dropdownPosition", backgroundType: "backgroundType", style: "style", highlight: "highlight", showDisabled: "showDisabled", tooltipPosition: "tooltipPosition", options: "options", mobileBreakpoint: "mobileBreakpoint" }, usesOnChanges: true, ngImport: i0, template: "<es-dropdown\n  #dropdownRef\n  [options]=\"optionsMenu$ | async\"\n  [showDisabled]=\"showDisabled\"\n  [position]=\"dropdownPosition\"\n></es-dropdown>\n<div\n  class=\"actionbar\"\n  [class.actionbar-all-flat]=\"style === 'flat'\"\n  [class.actionbar-background-dark]=\"backgroundType === 'dark'\"\n  [class.actionbar-background-primary]=\"backgroundType === 'primary'\"\n  [class.actionbar-round]=\"appearance === 'round'\"\n  [class.actionbar-icon-button]=\"appearance === 'icon-button'\"\n>\n  <div\n    *ngIf=\"optionsToggleBefore.length\"\n    class=\"actionToggle before\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"toggle; context: { optionsToggle: optionsToggleBefore }\"\n    ></ng-container>\n  </div>\n  <ng-container *ngFor=\"let option of optionsAlways$ | async; let i = index\">\n    <button\n      *ngIf=\"shouldHighlight(i, option)\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!option.isEnabled\"\n      [class.display-none]=\"!option.isEnabled && !showDisabled\"\n      matTooltip=\"{{ option | optionTooltip | async }}\"\n      [matTooltipPosition]=\"tooltipPosition\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n    >\n      <i [esIcon]=\"option.icon\"></i>\n      <span class=\"action-always-caption\" *ngIf=\"option.showName && appearance === 'button'\">\n        {{ option.name | translate }}</span\n      >\n    </button>\n    <button\n      *ngIf=\"!shouldHighlight(i, option)\"\n      mat-button\n      color=\"primary\"\n      [disabled]=\"!option.isEnabled\"\n      [class.display-none]=\"!option.isEnabled && !showDisabled\"\n      matTooltip=\"{{ option | optionTooltip | async }}\"\n      [matTooltipPosition]=\"tooltipPosition\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n    >\n      <i [esIcon]=\"option.icon\"></i>\n      <span class=\"action-always-caption\" *ngIf=\"option.showName && appearance === 'button'\">\n        {{ option.name | translate }}</span\n      >\n    </button>\n  </ng-container>\n  <button\n    mat-button\n    color=\"primary\"\n    class=\"more\"\n    [attr.aria-label]=\"'OPTIONS.SHOW_ALL_OPTIONS' | translate\"\n    [matMenuTriggerFor]=\"dropdownRef.menu\"\n    *ngIf=\"canShowDropdown()\"\n    data-test=\"more-actions-button\"\n  >\n    <i esIcon=\"more_vert\" [aria]=\"false\"></i>\n  </button>\n  <div\n    *ngIf=\"optionsToggleAfter.length\"\n    class=\"actionToggle after\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"toggle; context: { optionsToggle: optionsToggleAfter }\"\n    ></ng-container>\n  </div>\n</div>\n<ng-template #toggle let-optionsToggle=\"optionsToggle\">\n  <ng-container *ngFor=\"let option of optionsToggle\">\n    <button\n      *ngIf=\"option.isToggleVisible\"\n      mat-icon-button\n      matTooltip=\"{{ option.name | translate }}\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n      [class]=\"\n        'toggle-' +\n        (option.name | replaceChars : { search: '.', replace: '-' }) +\n        (option.isEnabled ? '' : ' disabled')\n      \"\n      attr.data-test=\"toggle-{{ option.name }}\"\n    >\n      <i [esIcon]=\"option.icon\" [aria]=\"false\"></i>\n    </button>\n  </ng-container>\n</ng-template>\n", styles: [".actionbar{display:flex;align-items:center;gap:10px}.actionToggle>button{color:var(--textLight)}button{min-width:unset}.light{color:#fff;background:transparent}.disabled{pointer-events:all}.light a{color:#fff}.actionToggle.after.actionToggleDivider{padding-left:10px;border-left:1px solid #ddd}.actionToggle.before.actionToggleDivider{padding-right:10px;margin-right:10px;border-right:1px solid #ddd}.more{color:var(--primary);background-color:transparent}.actionbar-background-dark .mat-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-dark .mat-button:disabled{color:rgba(var(--palette-foreground-text-dark),.75)}.actionbar-background-primary .mdc-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-primary .mat-mdc-unelevated-button{background-color:#fff;color:var(--primary)}.actionbar-background-primary .mat-mdc-unelevated-button:disabled{color:#00000080;background-color:#eee}.actionbar-round button{width:45px;height:45px;justify-content:center}.actionbar-round button{border-radius:50%;box-shadow:0 0 5px #0000004d}.actionbar-round.actionbar-background-primary .mat-button{background-color:#fff;color:var(--primary)}.actionbar-round.actionbar-all-flat button{background:#fff;color:var(--primary)!important}.actionbar-round.actionbar-all-flat button:disabled{color:var(--textLight)!important}.actionbar-round .more,.actionbar-round .actionAlways{background:#fff;color:var(--primary);display:flex;width:45px;height:45px;line-height:45px;text-align:center;align-items:center}.actionbar-round .more .edu-icons,.actionbar-round .more .material-icons,.actionbar-round .actionAlways .edu-icons,.actionbar-round .actionAlways .material-icons{position:relative;font-size:24px}.actionbar-round .more span,.actionbar-round .actionAlways span{display:none}.actionbar-round .action-always .edu-icons,.actionbar-round .action-always .material-icons{right:4px!important}@media screen and (max-width: 1100px){.action-always-caption{display:none}.action-always{padding:0 1rem}::ng-deep .action-always-caption{display:none}.mat-flat-button{padding:5px}}.actionbar-icon-button .action-always{padding:0 1rem}.actionbar-icon-button ::ng-deep .action-always-caption{display:none}.actionbar-icon-button .mat-flat-button{padding:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObjects", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OptionTooltipPipe, name: "optionTooltip" }, { kind: "pipe", type: ReplaceCharsPipe, name: "replaceChars" }], animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionbarComponent, deps: [{ token: UIService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ActionbarComponent, isStandalone: false, selector: "es-actionbar", inputs: { numberOfAlwaysVisibleOptions: "numberOfAlwaysVisibleOptions", numberOfAlwaysVisibleOptionsMobile: "numberOfAlwaysVisibleOptionsMobile", appearance: "appearance", dropdownPosition: "dropdownPosition", backgroundType: "backgroundType", style: "style", highlight: "highlight", showDisabled: "showDisabled", tooltipPosition: "tooltipPosition", options: "options", mobileBreakpoint: "mobileBreakpoint" }, usesOnChanges: true, ngImport: i0, template: "<es-dropdown\n  #dropdownRef\n  [options]=\"optionsMenu$ | async\"\n  [showDisabled]=\"showDisabled\"\n  [position]=\"dropdownPosition\"\n></es-dropdown>\n<div\n  class=\"actionbar\"\n  [class.actionbar-all-flat]=\"style === 'flat'\"\n  [class.actionbar-background-dark]=\"backgroundType === 'dark'\"\n  [class.actionbar-background-primary]=\"backgroundType === 'primary'\"\n  [class.actionbar-round]=\"appearance === 'round'\"\n  [class.actionbar-icon-button]=\"appearance === 'icon-button'\"\n>\n  <div\n    *ngIf=\"optionsToggleBefore.length\"\n    class=\"actionToggle before\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"toggle; context: { optionsToggle: optionsToggleBefore }\"\n    ></ng-container>\n  </div>\n  <ng-container *ngFor=\"let option of optionsAlways$ | async; let i = index\">\n    <button\n      *ngIf=\"shouldHighlight(i, option)\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!option.isEnabled\"\n      [class.display-none]=\"!option.isEnabled && !showDisabled\"\n      matTooltip=\"{{ option | optionTooltip | async }}\"\n      [matTooltipPosition]=\"tooltipPosition\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n    >\n      <i [esIcon]=\"option.icon\"></i>\n      <span class=\"action-always-caption\" *ngIf=\"option.showName && appearance === 'button'\">\n        {{ option.name | translate }}</span\n      >\n    </button>\n    <button\n      *ngIf=\"!shouldHighlight(i, option)\"\n      mat-button\n      color=\"primary\"\n      [disabled]=\"!option.isEnabled\"\n      [class.display-none]=\"!option.isEnabled && !showDisabled\"\n      matTooltip=\"{{ option | optionTooltip | async }}\"\n      [matTooltipPosition]=\"tooltipPosition\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n    >\n      <i [esIcon]=\"option.icon\"></i>\n      <span class=\"action-always-caption\" *ngIf=\"option.showName && appearance === 'button'\">\n        {{ option.name | translate }}</span\n      >\n    </button>\n  </ng-container>\n  <button\n    mat-button\n    color=\"primary\"\n    class=\"more\"\n    [attr.aria-label]=\"'OPTIONS.SHOW_ALL_OPTIONS' | translate\"\n    [matMenuTriggerFor]=\"dropdownRef.menu\"\n    *ngIf=\"canShowDropdown()\"\n    data-test=\"more-actions-button\"\n  >\n    <i esIcon=\"more_vert\" [aria]=\"false\"></i>\n  </button>\n  <div\n    *ngIf=\"optionsToggleAfter.length\"\n    class=\"actionToggle after\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"toggle; context: { optionsToggle: optionsToggleAfter }\"\n    ></ng-container>\n  </div>\n</div>\n<ng-template #toggle let-optionsToggle=\"optionsToggle\">\n  <ng-container *ngFor=\"let option of optionsToggle\">\n    <button\n      *ngIf=\"option.isToggleVisible\"\n      mat-icon-button\n      matTooltip=\"{{\n        ($any(option).toggleNames\n          ? $any(option).toggleNames[option.toggleState ? 'enabled' : 'disabled']\n          : option.name\n        ) | translate\n      }}\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n      [class]=\"\n        'toggle-' +\n        (($any(option).toggleNames\n          ? $any(option).toggleNames[option.toggleState ? 'enabled' : 'disabled']\n          : option.name\n        ) | replaceChars : { search: '.', replace: '-' }) +\n        (option.isEnabled ? '' : ' disabled')\n      \"\n      attr.data-test=\"toggle-{{ option.name }}\"\n    >\n      <i\n        [esIcon]=\"\n          $any(option).toggleIcons\n            ? $any(option).toggleIcons[option.toggleState ? 'enabled' : 'disabled']\n            : option.icon\n        \"\n        [aria]=\"false\"\n      ></i>\n    </button>\n  </ng-container>\n</ng-template>\n", styles: [".actionbar{display:flex;align-items:center;gap:10px}.actionToggle>button{color:var(--textLight)}button{min-width:unset}.light{color:#fff;background:transparent}.disabled{pointer-events:all}.light a{color:#fff}.actionToggle.after.actionToggleDivider{padding-left:10px;border-left:1px solid #ddd}.actionToggle.before.actionToggleDivider{padding-right:10px;margin-right:10px;border-right:1px solid #ddd}.more{color:var(--primary);background-color:transparent}.actionbar-background-dark .mat-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-dark .mat-button:disabled{color:rgba(var(--palette-foreground-text-dark),.75)}.actionbar-background-primary .mdc-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-primary .mat-mdc-unelevated-button{background-color:#fff;color:var(--primary)}.actionbar-background-primary .mat-mdc-unelevated-button:disabled{color:#00000080;background-color:#eee}.actionbar-round button{width:45px;height:45px;justify-content:center}.actionbar-round button{border-radius:50%;box-shadow:0 0 5px #0000004d}.actionbar-round.actionbar-background-primary .mat-button{background-color:#fff;color:var(--primary)}.actionbar-round.actionbar-all-flat button{background:#fff;color:var(--primary)!important}.actionbar-round.actionbar-all-flat button:disabled{color:var(--textLight)!important}.actionbar-round .more,.actionbar-round .actionAlways{background:#fff;color:var(--primary);display:flex;width:45px;height:45px;line-height:45px;text-align:center;align-items:center}.actionbar-round .more .edu-icons,.actionbar-round .more .material-icons,.actionbar-round .actionAlways .edu-icons,.actionbar-round .actionAlways .material-icons{position:relative;font-size:24px}.actionbar-round .more span,.actionbar-round .actionAlways span{display:none}.actionbar-round .action-always .edu-icons,.actionbar-round .action-always .material-icons{right:4px!important}@media screen and (max-width: 1100px){.action-always-caption{display:none}.action-always{padding:0 1rem}::ng-deep .action-always-caption{display:none}.mat-flat-button{padding:5px}}.actionbar-icon-button .action-always{padding:0 1rem}.actionbar-icon-button ::ng-deep .action-always-caption{display:none}.actionbar-icon-button .mat-flat-button{padding:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObjects", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OptionTooltipPipe, name: "optionTooltip" }, { kind: "pipe", type: ReplaceCharsPipe, name: "replaceChars" }], animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-actionbar', animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))], standalone: false, template: "<es-dropdown\n  #dropdownRef\n  [options]=\"optionsMenu$ | async\"\n  [showDisabled]=\"showDisabled\"\n  [position]=\"dropdownPosition\"\n></es-dropdown>\n<div\n  class=\"actionbar\"\n  [class.actionbar-all-flat]=\"style === 'flat'\"\n  [class.actionbar-background-dark]=\"backgroundType === 'dark'\"\n  [class.actionbar-background-primary]=\"backgroundType === 'primary'\"\n  [class.actionbar-round]=\"appearance === 'round'\"\n  [class.actionbar-icon-button]=\"appearance === 'icon-button'\"\n>\n  <div\n    *ngIf=\"optionsToggleBefore.length\"\n    class=\"actionToggle before\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"toggle; context: { optionsToggle: optionsToggleBefore }\"\n    ></ng-container>\n  </div>\n  <ng-container *ngFor=\"let option of optionsAlways$ | async; let i = index\">\n    <button\n      *ngIf=\"shouldHighlight(i, option)\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!option.isEnabled\"\n      [class.display-none]=\"!option.isEnabled && !showDisabled\"\n      matTooltip=\"{{ option | optionTooltip | async }}\"\n      [matTooltipPosition]=\"tooltipPosition\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n    >\n      <i [esIcon]=\"option.icon\"></i>\n      <span class=\"action-always-caption\" *ngIf=\"option.showName && appearance === 'button'\">\n        {{ option.name | translate }}</span\n      >\n    </button>\n    <button\n      *ngIf=\"!shouldHighlight(i, option)\"\n      mat-button\n      color=\"primary\"\n      [disabled]=\"!option.isEnabled\"\n      [class.display-none]=\"!option.isEnabled && !showDisabled\"\n      matTooltip=\"{{ option | optionTooltip | async }}\"\n      [matTooltipPosition]=\"tooltipPosition\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n    >\n      <i [esIcon]=\"option.icon\"></i>\n      <span class=\"action-always-caption\" *ngIf=\"option.showName && appearance === 'button'\">\n        {{ option.name | translate }}</span\n      >\n    </button>\n  </ng-container>\n  <button\n    mat-button\n    color=\"primary\"\n    class=\"more\"\n    [attr.aria-label]=\"'OPTIONS.SHOW_ALL_OPTIONS' | translate\"\n    [matMenuTriggerFor]=\"dropdownRef.menu\"\n    *ngIf=\"canShowDropdown()\"\n    data-test=\"more-actions-button\"\n  >\n    <i esIcon=\"more_vert\" [aria]=\"false\"></i>\n  </button>\n  <div\n    *ngIf=\"optionsToggleAfter.length\"\n    class=\"actionToggle after\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"toggle; context: { optionsToggle: optionsToggleAfter }\"\n    ></ng-container>\n  </div>\n</div>\n<ng-template #toggle let-optionsToggle=\"optionsToggle\">\n  <ng-container *ngFor=\"let option of optionsToggle\">\n    <button\n      *ngIf=\"option.isToggleVisible\"\n      mat-icon-button\n      matTooltip=\"{{ option.name | translate }}\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n      [class]=\"\n        'toggle-' +\n        (option.name | replaceChars : { search: '.', replace: '-' }) +\n        (option.isEnabled ? '' : ' disabled')\n      \"\n      attr.data-test=\"toggle-{{ option.name }}\"\n    >\n      <i [esIcon]=\"option.icon\" [aria]=\"false\"></i>\n    </button>\n  </ng-container>\n</ng-template>\n", styles: [".actionbar{display:flex;align-items:center;gap:10px}.actionToggle>button{color:var(--textLight)}button{min-width:unset}.light{color:#fff;background:transparent}.disabled{pointer-events:all}.light a{color:#fff}.actionToggle.after.actionToggleDivider{padding-left:10px;border-left:1px solid #ddd}.actionToggle.before.actionToggleDivider{padding-right:10px;margin-right:10px;border-right:1px solid #ddd}.more{color:var(--primary);background-color:transparent}.actionbar-background-dark .mat-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-dark .mat-button:disabled{color:rgba(var(--palette-foreground-text-dark),.75)}.actionbar-background-primary .mdc-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-primary .mat-mdc-unelevated-button{background-color:#fff;color:var(--primary)}.actionbar-background-primary .mat-mdc-unelevated-button:disabled{color:#00000080;background-color:#eee}.actionbar-round button{width:45px;height:45px;justify-content:center}.actionbar-round button{border-radius:50%;box-shadow:0 0 5px #0000004d}.actionbar-round.actionbar-background-primary .mat-button{background-color:#fff;color:var(--primary)}.actionbar-round.actionbar-all-flat button{background:#fff;color:var(--primary)!important}.actionbar-round.actionbar-all-flat button:disabled{color:var(--textLight)!important}.actionbar-round .more,.actionbar-round .actionAlways{background:#fff;color:var(--primary);display:flex;width:45px;height:45px;line-height:45px;text-align:center;align-items:center}.actionbar-round .more .edu-icons,.actionbar-round .more .material-icons,.actionbar-round .actionAlways .edu-icons,.actionbar-round .actionAlways .material-icons{position:relative;font-size:24px}.actionbar-round .more span,.actionbar-round .actionAlways span{display:none}.actionbar-round .action-always .edu-icons,.actionbar-round .action-always .material-icons{right:4px!important}@media screen and (max-width: 1100px){.action-always-caption{display:none}.action-always{padding:0 1rem}::ng-deep .action-always-caption{display:none}.mat-flat-button{padding:5px}}.actionbar-icon-button .action-always{padding:0 1rem}.actionbar-icon-button ::ng-deep .action-always-caption{display:none}.actionbar-icon-button .mat-flat-button{padding:5px}\n"] }]
-        }], ctorParameters: () => [{ type: UIService }, { type: i1.TranslateService }], propDecorators: { numberOfAlwaysVisibleOptions: [{
+            args: [{ selector: 'es-actionbar', animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))], standalone: false, template: "<es-dropdown\n  #dropdownRef\n  [options]=\"optionsMenu$ | async\"\n  [showDisabled]=\"showDisabled\"\n  [position]=\"dropdownPosition\"\n></es-dropdown>\n<div\n  class=\"actionbar\"\n  [class.actionbar-all-flat]=\"style === 'flat'\"\n  [class.actionbar-background-dark]=\"backgroundType === 'dark'\"\n  [class.actionbar-background-primary]=\"backgroundType === 'primary'\"\n  [class.actionbar-round]=\"appearance === 'round'\"\n  [class.actionbar-icon-button]=\"appearance === 'icon-button'\"\n>\n  <div\n    *ngIf=\"optionsToggleBefore.length\"\n    class=\"actionToggle before\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"toggle; context: { optionsToggle: optionsToggleBefore }\"\n    ></ng-container>\n  </div>\n  <ng-container *ngFor=\"let option of optionsAlways$ | async; let i = index\">\n    <button\n      *ngIf=\"shouldHighlight(i, option)\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!option.isEnabled\"\n      [class.display-none]=\"!option.isEnabled && !showDisabled\"\n      matTooltip=\"{{ option | optionTooltip | async }}\"\n      [matTooltipPosition]=\"tooltipPosition\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n    >\n      <i [esIcon]=\"option.icon\"></i>\n      <span class=\"action-always-caption\" *ngIf=\"option.showName && appearance === 'button'\">\n        {{ option.name | translate }}</span\n      >\n    </button>\n    <button\n      *ngIf=\"!shouldHighlight(i, option)\"\n      mat-button\n      color=\"primary\"\n      [disabled]=\"!option.isEnabled\"\n      [class.display-none]=\"!option.isEnabled && !showDisabled\"\n      matTooltip=\"{{ option | optionTooltip | async }}\"\n      [matTooltipPosition]=\"tooltipPosition\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n    >\n      <i [esIcon]=\"option.icon\"></i>\n      <span class=\"action-always-caption\" *ngIf=\"option.showName && appearance === 'button'\">\n        {{ option.name | translate }}</span\n      >\n    </button>\n  </ng-container>\n  <button\n    mat-button\n    color=\"primary\"\n    class=\"more\"\n    [attr.aria-label]=\"'OPTIONS.SHOW_ALL_OPTIONS' | translate\"\n    [matMenuTriggerFor]=\"dropdownRef.menu\"\n    *ngIf=\"canShowDropdown()\"\n    data-test=\"more-actions-button\"\n  >\n    <i esIcon=\"more_vert\" [aria]=\"false\"></i>\n  </button>\n  <div\n    *ngIf=\"optionsToggleAfter.length\"\n    class=\"actionToggle after\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"toggle; context: { optionsToggle: optionsToggleAfter }\"\n    ></ng-container>\n  </div>\n</div>\n<ng-template #toggle let-optionsToggle=\"optionsToggle\">\n  <ng-container *ngFor=\"let option of optionsToggle\">\n    <button\n      *ngIf=\"option.isToggleVisible\"\n      mat-icon-button\n      matTooltip=\"{{\n        ($any(option).toggleNames\n          ? $any(option).toggleNames[option.toggleState ? 'enabled' : 'disabled']\n          : option.name\n        ) | translate\n      }}\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n      [class]=\"\n        'toggle-' +\n        (($any(option).toggleNames\n          ? $any(option).toggleNames[option.toggleState ? 'enabled' : 'disabled']\n          : option.name\n        ) | replaceChars : { search: '.', replace: '-' }) +\n        (option.isEnabled ? '' : ' disabled')\n      \"\n      attr.data-test=\"toggle-{{ option.name }}\"\n    >\n      <i\n        [esIcon]=\"\n          $any(option).toggleIcons\n            ? $any(option).toggleIcons[option.toggleState ? 'enabled' : 'disabled']\n            : option.icon\n        \"\n        [aria]=\"false\"\n      ></i>\n    </button>\n  </ng-container>\n</ng-template>\n", styles: [".actionbar{display:flex;align-items:center;gap:10px}.actionToggle>button{color:var(--textLight)}button{min-width:unset}.light{color:#fff;background:transparent}.disabled{pointer-events:all}.light a{color:#fff}.actionToggle.after.actionToggleDivider{padding-left:10px;border-left:1px solid #ddd}.actionToggle.before.actionToggleDivider{padding-right:10px;margin-right:10px;border-right:1px solid #ddd}.more{color:var(--primary);background-color:transparent}.actionbar-background-dark .mat-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-dark .mat-button:disabled{color:rgba(var(--palette-foreground-text-dark),.75)}.actionbar-background-primary .mdc-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-primary .mat-mdc-unelevated-button{background-color:#fff;color:var(--primary)}.actionbar-background-primary .mat-mdc-unelevated-button:disabled{color:#00000080;background-color:#eee}.actionbar-round button{width:45px;height:45px;justify-content:center}.actionbar-round button{border-radius:50%;box-shadow:0 0 5px #0000004d}.actionbar-round.actionbar-background-primary .mat-button{background-color:#fff;color:var(--primary)}.actionbar-round.actionbar-all-flat button{background:#fff;color:var(--primary)!important}.actionbar-round.actionbar-all-flat button:disabled{color:var(--textLight)!important}.actionbar-round .more,.actionbar-round .actionAlways{background:#fff;color:var(--primary);display:flex;width:45px;height:45px;line-height:45px;text-align:center;align-items:center}.actionbar-round .more .edu-icons,.actionbar-round .more .material-icons,.actionbar-round .actionAlways .edu-icons,.actionbar-round .actionAlways .material-icons{position:relative;font-size:24px}.actionbar-round .more span,.actionbar-round .actionAlways span{display:none}.actionbar-round .action-always .edu-icons,.actionbar-round .action-always .material-icons{right:4px!important}@media screen and (max-width: 1100px){.action-always-caption{display:none}.action-always{padding:0 1rem}::ng-deep .action-always-caption{display:none}.mat-flat-button{padding:5px}}.actionbar-icon-button .action-always{padding:0 1rem}.actionbar-icon-button ::ng-deep .action-always-caption{display:none}.actionbar-icon-button .mat-flat-button{padding:5px}\n"] }]
+        }], ctorParameters: () => [{ type: UIService }, { type: i1$1.TranslateService }], propDecorators: { numberOfAlwaysVisibleOptions: [{
                 type: Input
             }], numberOfAlwaysVisibleOptionsMobile: [{
                 type: Input
@@ -3326,6 +3097,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class InfoMessageComponent {
+    constructor() {
+        this.mode = 'info';
+        this.ICONS = {
+            info: 'info',
+            warning: 'warning',
+            error: 'error',
+        };
+    }
+    getIcon() {
+        return this.ICONS[this.mode];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InfoMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InfoMessageComponent, isStandalone: false, selector: "es-info-message", inputs: { message: "message", mode: "mode" }, ngImport: i0, template: "<div class=\"block {{ mode }}\">\n  <div>\n    <i [esIcon]=\"getIcon()\"></i>\n  </div>\n  <div class=\"message-container\">\n    <div class=\"message\">{{ message | translate }}</div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".block{display:flex;flex-grow:1;align-items:center;border-radius:2px;padding:15px 20px}.block .message-container{display:flex;flex-direction:column;width:100%}.block.warning{background-color:#fdf6ec;border:1px solid rgb(190.608,112.86,18.392);color:#623a09}.block.error{background-color:#fdf3f6;border:1px solid rgb(118.2365145228,20.7634854772,50.1784232365);color:#4b0d20}.block.info{background-color:var(--palette-primary-50);border:1px solid var(--primary);color:var(--palette-primary-900)}.block>div:first-child{display:flex;align-items:center;padding-right:20px}.block>.text{white-space:pre-line}.block>.link{color:var(--primary);text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InfoMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'es-info-message', standalone: false, template: "<div class=\"block {{ mode }}\">\n  <div>\n    <i [esIcon]=\"getIcon()\"></i>\n  </div>\n  <div class=\"message-container\">\n    <div class=\"message\">{{ message | translate }}</div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".block{display:flex;flex-grow:1;align-items:center;border-radius:2px;padding:15px 20px}.block .message-container{display:flex;flex-direction:column;width:100%}.block.warning{background-color:#fdf6ec;border:1px solid rgb(190.608,112.86,18.392);color:#623a09}.block.error{background-color:#fdf3f6;border:1px solid rgb(118.2365145228,20.7634854772,50.1784232365);color:#4b0d20}.block.info{background-color:var(--palette-primary-50);border:1px solid var(--primary);color:var(--palette-primary-900)}.block>div:first-child{display:flex;align-items:center;padding-right:20px}.block>.text{white-space:pre-line}.block>.link{color:var(--primary);text-transform:uppercase}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }] } });
+
 // TODO: Decide if providing focus highlights and ripples with this component is a good idea. When
 // using `app-node-url` for cards, we might need highlights and ripples for the whole card while
 // `app-node-url` should only wrap the title since links with lots of content confuse screen
@@ -3374,82 +3169,313 @@ class NodeUrlComponent {
             if (mode === 'queryParams') {
                 Object.keys(this.queryParams).forEach((k) => (result[k] = this.queryParams[k]));
             }
-        }
-        return result;
-    }
-    focus() {
-        this.link.nativeElement.focus();
-    }
-    clickWrapper(event) {
-        const eventCopy = copyClickEvent(event);
-        this.link.nativeElement.dispatchEvent(eventCopy);
-        event.preventDefault();
-    }
-    getIsNested() {
-        let ancestor = this.elementRef.nativeElement.parentElement;
-        while (ancestor) {
-            if (ancestor.tagName === NODE_URL_TAG_NAME.toUpperCase()) {
-                return true;
+        }
+        return result;
+    }
+    focus() {
+        this.link.nativeElement.focus();
+    }
+    clickWrapper(event) {
+        const eventCopy = copyClickEvent(event);
+        this.link.nativeElement.dispatchEvent(eventCopy);
+        event.preventDefault();
+    }
+    getIsNested() {
+        let ancestor = this.elementRef.nativeElement.parentElement;
+        while (ancestor) {
+            if (ancestor.tagName === NODE_URL_TAG_NAME.toUpperCase()) {
+                return true;
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeUrlComponent, deps: [{ token: NodeHelperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeUrlComponent, isStandalone: false, selector: "es-node-url", inputs: { node: "node", nodes: "nodes", target: "target", scope: "scope", queryParams: "queryParams", mode: "mode", disabled: "disabled", alwaysRipple: "alwaysRipple", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }], ngImport: i0, template: "<ng-template #content><ng-content></ng-content></ng-template>\n<ng-container *ngIf=\"mode === 'link'\">\n  <a\n    *ngIf=\"!disabled\"\n    #link\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"isNested\"\n    [routerLink]=\"get('routerLink')\"\n    [state]=\"getState()\"\n    [target]=\"target\"\n    [queryParams]=\"get('queryParams')\"\n    queryParamsHandling=\"merge\"\n    cdkMonitorElementFocus\n    [attr.aria-label]=\"ariaLabel ? node.name : null\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert\n  `div` elements into this component's content. However, this will lead to invalid HTML for \"button\"\n  mode. So really, users of this component should only insert flow content. -->\n  <div *ngIf=\"disabled && !alwaysRipple\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n  <div *ngIf=\"disabled && alwaysRipple\" matRipple matRippleColor=\"primary\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'wrapper'\">\n  <div\n    class=\"node-url-wrapper\"\n    #wrapper\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"disabled && !alwaysRipple\"\n    (click)=\"clickWrapper($event)\"\n    (auxclick)=\"clickWrapper($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n  <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->\n  <a\n    #link\n    [routerLink]=\"get('routerLink')\"\n    [state]=\"getState()\"\n    [queryParams]=\"get('queryParams')\"\n    queryParamsHandling=\"merge\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    class=\"cdk-visually-hidden\"\n  ></a>\n</ng-container>\n<ng-container *ngIf=\"mode === 'button'\">\n  <button\n    [disabled]=\"disabled\"\n    #link\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"disabled && !alwaysRipple\"\n    (click)=\"buttonClick.emit($event)\"\n    cdkMonitorElementFocus\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}:host>*{flex-grow:1}:host>a{text-decoration:none}.cdk-keyboard-focused{outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}button{background-color:unset;border:unset;padding:unset;text-align:unset}div.node-url-wrapper{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeUrlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: NODE_URL_TAG_NAME, standalone: false, template: "<ng-template #content><ng-content></ng-content></ng-template>\n<ng-container *ngIf=\"mode === 'link'\">\n  <a\n    *ngIf=\"!disabled\"\n    #link\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"isNested\"\n    [routerLink]=\"get('routerLink')\"\n    [state]=\"getState()\"\n    [target]=\"target\"\n    [queryParams]=\"get('queryParams')\"\n    queryParamsHandling=\"merge\"\n    cdkMonitorElementFocus\n    [attr.aria-label]=\"ariaLabel ? node.name : null\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert\n  `div` elements into this component's content. However, this will lead to invalid HTML for \"button\"\n  mode. So really, users of this component should only insert flow content. -->\n  <div *ngIf=\"disabled && !alwaysRipple\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n  <div *ngIf=\"disabled && alwaysRipple\" matRipple matRippleColor=\"primary\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'wrapper'\">\n  <div\n    class=\"node-url-wrapper\"\n    #wrapper\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"disabled && !alwaysRipple\"\n    (click)=\"clickWrapper($event)\"\n    (auxclick)=\"clickWrapper($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n  <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->\n  <a\n    #link\n    [routerLink]=\"get('routerLink')\"\n    [state]=\"getState()\"\n    [queryParams]=\"get('queryParams')\"\n    queryParamsHandling=\"merge\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    class=\"cdk-visually-hidden\"\n  ></a>\n</ng-container>\n<ng-container *ngIf=\"mode === 'button'\">\n  <button\n    [disabled]=\"disabled\"\n    #link\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"disabled && !alwaysRipple\"\n    (click)=\"buttonClick.emit($event)\"\n    cdkMonitorElementFocus\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}:host>*{flex-grow:1}:host>a{text-decoration:none}.cdk-keyboard-focused{outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}button{background-color:unset;border:unset;padding:unset;text-align:unset}div.node-url-wrapper{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: NodeHelperService }, { type: i0.ElementRef }], propDecorators: { link: [{
+                type: ViewChild,
+                args: ['link']
+            }], node: [{
+                type: Input
+            }], nodes: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], scope: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], alwaysRipple: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], buttonClick: [{
+                type: Output
+            }] } });
+function copyClickEvent(event) {
+    // On Firefox, a middle click via neither the 'click', nor the 'auxclick' event cause a new tab
+    // to be opened when triggered programmatically. As a workaround, we simulate a ctrl click
+    // instead of a middle click. This matches Firefox's defaults, but we cannot account for
+    // changed middle-click behavior.
+    if (event.type === 'auxclick' && event.button === 1 && isFirefox()) {
+        return copyClickEvent({ ...event, type: 'click', ctrlKey: true, button: 0 });
+    }
+    // It would seem better to use `event.type` instead of hard-coding 'click', but that doesn't
+    // have the desired effect for non-click events when dispatched.
+    return new MouseEvent('click', {
+        cancelable: true,
+        button: event.button,
+        ctrlKey: event.ctrlKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+    });
+}
+function isFirefox() {
+    return navigator.userAgent.includes('Firefox');
+}
+
+class FormatSizePipe {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    transform(value, args = null) {
+        let names = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+        let i = 0;
+        if (isNaN(value))
+            return value;
+        if (value == null)
+            value = 0;
+        while (value >= 1024 && i < names.length) {
+            value /= 1024;
+            i++;
+        }
+        let options = {
+            maximumFractionDigits: i > 1 ? 1 : 0,
+        };
+        let numberFormat = new Intl.NumberFormat([], options);
+        return numberFormat.format(value) + ' ' + names[i];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatSizePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FormatSizePipe, isStandalone: false, name: "formatSize" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'formatSize',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
+
+var RelativeMode;
+(function (RelativeMode) {
+    RelativeMode[RelativeMode["off"] = 0] = "off";
+    RelativeMode[RelativeMode["short"] = 1] = "short";
+    RelativeMode[RelativeMode["medium"] = 2] = "medium";
+    RelativeMode[RelativeMode["large"] = 3] = "large";
+    RelativeMode[RelativeMode["all"] = 4] = "all";
+})(RelativeMode || (RelativeMode = {}));
+class FormatOptions {
+    constructor() {
+        this.showDate = true;
+        this.showAlwaysTime = false;
+        this.showSeconds = false;
+        // @Deprecated
+        // this will be mapped to relativeLabels = MEDIUM
+        // use relativeLabels instead
+        this.useRelativeLabels = true;
+    }
+}
+class DateHelper {
+    /**
+     * Fill a date (day + month) string, e.g. 2 -> 02
+     * @param date
+     * @returns {string}
+     */
+    static fillDate(date) {
+        if (date < 10)
+            return '0' + date;
+        return date + '';
+    }
+    /**
+     * Convert date to a unix timestamp
+     * @param date
+     * @returns {number}
+     */
+    static convertDate(date) {
+        return new Date(date).getTime();
+    }
+    /**
+     * format a date with a given, fixed string
+     * For consistency, we use the patterns from
+     * https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html
+     * @param date
+     * @param {string} format
+     * @returns {string}
+     */
+    static formatDateByPattern(date, format) {
+        if (!isNumeric(date)) {
+            return date;
+        }
+        let dateObject = new Date(date * 1);
+        format = format.replace('y', '' + dateObject.getFullYear());
+        format = format.replace('M', '' + DateHelper.fillDate(dateObject.getMonth() + 1));
+        format = format.replace('d', '' + DateHelper.fillDate(dateObject.getDate()));
+        return format;
+    }
+    /**
+     * Format a date for the current language
+     */
+    static formatDate(translation, date, options = new FormatOptions()) {
+        try {
+            if (options.useRelativeLabels && !options.relativeLabels) {
+                options.relativeLabels = RelativeMode.medium;
+            }
+            if (date == null) {
+                return null;
+            }
+            if (!isNumeric(date)) {
+                date = Date.parse(date);
+            }
+            let dateObject = new Date(date * 1);
+            let dateToday = new Date();
+            let dateYesterday = new Date();
+            dateYesterday.setDate(dateYesterday.getDate() - 1);
+            let isToday = dateObject.toDateString() == dateToday.toDateString();
+            let isYesterday = dateObject.toDateString() == dateYesterday.toDateString();
+            let prefix = '';
+            let timeDiff = (dateToday.getTime() - dateObject.getTime()) / 1000;
+            let diffDays = Math.floor(timeDiff / (3600 * 24));
+            let diffMonths = new Date(timeDiff * 1000).getMonth();
+            let diffYears = new Date(timeDiff * 1000).getFullYear() - 1970;
+            let addDate = true;
+            let timeFormat = 'HH:mm';
+            if (options.showSeconds) {
+                timeFormat += ':ss';
+            }
+            if (timeDiff < 3600 * 6 && options.relativeLabels >= RelativeMode.short) {
+                if (timeDiff < 90) {
+                    prefix = translation.instant('JUST_NOW', { seconds: timeDiff });
+                }
+                else if (timeDiff < 60 * 100) {
+                    prefix = translation.instant('MINUTES_AGO', {
+                        minutes: Math.round(timeDiff / 60),
+                    });
+                }
+                else {
+                    prefix = translation.instant('HOURS_AGO', {
+                        hours: Math.round(timeDiff / (60 * 60)),
+                    });
+                }
+                addDate = false;
+                timeFormat = '';
+            }
+            else if (isToday && options.relativeLabels >= RelativeMode.short) {
+                prefix = translation.instant('TODAY');
+                addDate = false;
+            }
+            else if (isYesterday && options.relativeLabels >= RelativeMode.medium) {
+                prefix = translation.instant('YESTERDAY');
+                addDate = false;
+            }
+            else if ((diffDays < 6 && options.relativeLabels >= RelativeMode.medium) ||
+                (diffDays < 45 && options.relativeLabels >= RelativeMode.large)) {
+                prefix = translation.instant('DAYS_AGO', { days: diffDays });
+                addDate = false;
+                if (!options.showAlwaysTime)
+                    timeFormat = '';
+            }
+            else if (diffYears === 0 &&
+                diffMonths < 12 &&
+                options.relativeLabels >= RelativeMode.large) {
+                prefix = translation.instant('MONTHS_AGO', { months: diffMonths });
+                addDate = false;
+                if (!options.showAlwaysTime)
+                    timeFormat = '';
+            }
+            else if (options.relativeLabels === RelativeMode.all) {
+                prefix = translation.instant('YEARS_AGO', { years: diffYears });
+                addDate = false;
+                if (!options.showAlwaysTime)
+                    timeFormat = '';
             }
-            ancestor = ancestor.parentElement;
+            else {
+                if (!options.showAlwaysTime)
+                    timeFormat = '';
+            }
+            // ng2's dateformatter is super slow, but it doesn't matter, we just iterate it once :)
+            //return dateFormat+time;
+            let str = prefix;
+            if (addDate) {
+                if (translation.currentLang === 'en') {
+                    str +=
+                        dateObject.getFullYear() +
+                            '-' +
+                            DateHelper.fillDate(dateObject.getMonth() + 1) +
+                            '-' +
+                            DateHelper.fillDate(dateObject.getDate());
+                }
+                else {
+                    str +=
+                        DateHelper.fillDate(dateObject.getDate()) +
+                            '.' +
+                            DateHelper.fillDate(dateObject.getMonth() + 1) +
+                            '.' +
+                            dateObject.getFullYear();
+                }
+                //str += DateFormatter.format(dateObject, Translation.getLanguage(), dateFormat).trim();
+            }
+            if (options.showDate == false) {
+                str = prefix;
+            }
+            // ie fixes, timeFormat not working
+            if (timeFormat) {
+                if (str)
+                    str += ', ';
+                //let timeValue=dateObject.toLocaleTimeString(Translation.getLanguage());
+                //let times=timeValue.split(":");
+                str += timeFormat
+                    .replace('HH', DateHelper.fillDate(dateObject.getHours()))
+                    .replace('mm', DateHelper.fillDate(dateObject.getMinutes()))
+                    .replace('ss', DateHelper.fillDate(dateObject.getSeconds()));
+            }
+            return str;
+            /*
+      let dateString=prefix+" ";
+      if(dateFormat!=""){
+        dateString+=dateObject.toLocaleDateString(Translation.getLanguage())+" ";
+      }
+      if(time!=""){
+        dateString+=dateObject.toLocaleTimeString(Translation.getLanguage());
+      }
+      return dateString;
+      */
+        }
+        catch (e) {
+            return date;
         }
-        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeUrlComponent, deps: [{ token: NodeHelperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeUrlComponent, isStandalone: false, selector: "es-node-url", inputs: { node: "node", nodes: "nodes", target: "target", scope: "scope", queryParams: "queryParams", mode: "mode", disabled: "disabled", alwaysRipple: "alwaysRipple", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }], ngImport: i0, template: "<ng-template #content><ng-content></ng-content></ng-template>\n<ng-container *ngIf=\"mode === 'link'\">\n  <a\n    *ngIf=\"!disabled\"\n    #link\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"isNested\"\n    [routerLink]=\"get('routerLink')\"\n    [state]=\"getState()\"\n    [target]=\"target\"\n    [queryParams]=\"get('queryParams')\"\n    queryParamsHandling=\"merge\"\n    cdkMonitorElementFocus\n    [attr.aria-label]=\"ariaLabel ? node.name : null\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert\n  `div` elements into this component's content. However, this will lead to invalid HTML for \"button\"\n  mode. So really, users of this component should only insert flow content. -->\n  <div *ngIf=\"disabled && !alwaysRipple\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n  <div *ngIf=\"disabled && alwaysRipple\" matRipple matRippleColor=\"primary\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'wrapper'\">\n  <div\n    class=\"node-url-wrapper\"\n    #wrapper\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"disabled && !alwaysRipple\"\n    (click)=\"clickWrapper($event)\"\n    (auxclick)=\"clickWrapper($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n  <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->\n  <a\n    #link\n    [routerLink]=\"get('routerLink')\"\n    [state]=\"getState()\"\n    [queryParams]=\"get('queryParams')\"\n    queryParamsHandling=\"merge\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    class=\"cdk-visually-hidden\"\n  ></a>\n</ng-container>\n<ng-container *ngIf=\"mode === 'button'\">\n  <button\n    [disabled]=\"disabled\"\n    #link\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"disabled && !alwaysRipple\"\n    (click)=\"buttonClick.emit($event)\"\n    cdkMonitorElementFocus\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}:host>*{flex-grow:1}:host>a{text-decoration:none}.cdk-keyboard-focused{outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}button{background-color:unset;border:unset;padding:unset;text-align:unset}div.node-url-wrapper{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeUrlComponent, decorators: [{
-            type: Component,
-            args: [{ selector: NODE_URL_TAG_NAME, standalone: false, template: "<ng-template #content><ng-content></ng-content></ng-template>\n<ng-container *ngIf=\"mode === 'link'\">\n  <a\n    *ngIf=\"!disabled\"\n    #link\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"isNested\"\n    [routerLink]=\"get('routerLink')\"\n    [state]=\"getState()\"\n    [target]=\"target\"\n    [queryParams]=\"get('queryParams')\"\n    queryParamsHandling=\"merge\"\n    cdkMonitorElementFocus\n    [attr.aria-label]=\"ariaLabel ? node.name : null\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert\n  `div` elements into this component's content. However, this will lead to invalid HTML for \"button\"\n  mode. So really, users of this component should only insert flow content. -->\n  <div *ngIf=\"disabled && !alwaysRipple\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n  <div *ngIf=\"disabled && alwaysRipple\" matRipple matRippleColor=\"primary\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'wrapper'\">\n  <div\n    class=\"node-url-wrapper\"\n    #wrapper\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"disabled && !alwaysRipple\"\n    (click)=\"clickWrapper($event)\"\n    (auxclick)=\"clickWrapper($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n  <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->\n  <a\n    #link\n    [routerLink]=\"get('routerLink')\"\n    [state]=\"getState()\"\n    [queryParams]=\"get('queryParams')\"\n    queryParamsHandling=\"merge\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    class=\"cdk-visually-hidden\"\n  ></a>\n</ng-container>\n<ng-container *ngIf=\"mode === 'button'\">\n  <button\n    [disabled]=\"disabled\"\n    #link\n    matRipple\n    matRippleColor=\"primary\"\n    [matRippleDisabled]=\"disabled && !alwaysRipple\"\n    (click)=\"buttonClick.emit($event)\"\n    cdkMonitorElementFocus\n  >\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}:host>*{flex-grow:1}:host>a{text-decoration:none}.cdk-keyboard-focused{outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}button{background-color:unset;border:unset;padding:unset;text-align:unset}div.node-url-wrapper{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: NodeHelperService }, { type: i0.ElementRef }], propDecorators: { link: [{
-                type: ViewChild,
-                args: ['link']
-            }], node: [{
-                type: Input
-            }], nodes: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], scope: [{
-                type: Input
-            }], queryParams: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], alwaysRipple: [{
-                type: Input
-            }], ariaDescribedby: [{
-                type: Input,
-                args: ['aria-describedby']
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], buttonClick: [{
-                type: Output
-            }] } });
-function copyClickEvent(event) {
-    // On Firefox, a middle click via neither the 'click', nor the 'auxclick' event cause a new tab
-    // to be opened when triggered programmatically. As a workaround, we simulate a ctrl click
-    // instead of a middle click. This matches Firefox's defaults, but we cannot account for
-    // changed middle-click behavior.
-    if (event.type === 'auxclick' && event.button === 1 && isFirefox()) {
-        return copyClickEvent({ ...event, type: 'click', ctrlKey: true, button: 0 });
+    static getDateFromDatepicker(date) {
+        return new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
+    }
+    static getDateForNewFile() {
+        return DateHelper.formatDate(null, new Date().getTime(), {
+            showAlwaysTime: true,
+            useRelativeLabels: false,
+        });
     }
-    // It would seem better to use `event.type` instead of hard-coding 'click', but that doesn't
-    // have the desired effect for non-click events when dispatched.
-    return new MouseEvent('click', {
-        cancelable: true,
-        button: event.button,
-        ctrlKey: event.ctrlKey,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-        metaKey: event.metaKey,
-    });
-}
-function isFirefox() {
-    return navigator.userAgent.includes('Firefox');
 }
 
 class FormatDatePipe {
@@ -3476,7 +3502,7 @@ class FormatDatePipe {
             return DateHelper.formatDate(this.translate, value, options);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatDatePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatDatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FormatDatePipe, isStandalone: false, name: "formatDate" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatDatePipe, decorators: [{
@@ -3485,7 +3511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'formatDate',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 class NodeIconPipe {
     constructor(repoUrlService) {
@@ -3536,7 +3562,7 @@ class NodeImagePipe {
         this.repoUrlService = repoUrlService;
         this.networkApi = networkApi;
     }
-    transform(node, preferences) {
+    transform(node, preferences = {}) {
         if (this.nodeHelper.isNodeCollection(node) && node.preview.isIcon) {
             return null;
         }
@@ -3567,7 +3593,7 @@ class NodeImagePipe {
             .pipe(map(([isFromHomeRepository, repository]) => isFromHomeRepository ||
             repository?.repositoryType === RestConstants.REPOSITORY_TYPE_ALFRESCO));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeImagePipe, deps: [{ token: NodeHelperService }, { token: i3$1.DomSanitizer }, { token: RepoUrlService }, { token: i2.NetworkService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeImagePipe, deps: [{ token: NodeHelperService }, { token: i3$1.DomSanitizer }, { token: RepoUrlService }, { token: i1.NetworkService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NodeImagePipe, isStandalone: false, name: "esNodeImage" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeImagePipe, decorators: [{
@@ -3576,7 +3602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'esNodeImage',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: NodeHelperService }, { type: i3$1.DomSanitizer }, { type: RepoUrlService }, { type: i2.NetworkService }] });
+        }], ctorParameters: () => [{ type: NodeHelperService }, { type: i3$1.DomSanitizer }, { type: RepoUrlService }, { type: i1.NetworkService }] });
 
 class NodePersonNamePipe {
     constructor(config) {
@@ -3617,7 +3643,7 @@ class NodePersonNamePipe {
         }
         return person[field];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodePersonNamePipe, deps: [{ token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodePersonNamePipe, deps: [{ token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NodePersonNamePipe, isStandalone: false, name: "nodePersonName" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodePersonNamePipe, decorators: [{
@@ -3626,7 +3652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'nodePersonName',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i2.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.ConfigService }] });
 
 class NodeTitlePipe {
     transform(node, args) {
@@ -3649,7 +3675,7 @@ class NodeTitlePipe {
     constructor(translate) {
         this.translate = translate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeTitlePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeTitlePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NodeTitlePipe, isStandalone: false, name: "nodeTitle" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeTitlePipe, decorators: [{
@@ -3658,7 +3684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'nodeTitle',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 class SortDropdownComponent {
     constructor() {
@@ -3684,11 +3710,11 @@ class SortDropdownComponent {
         this.sort.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SortDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SortDropdownComponent, isStandalone: false, selector: "es-sort-dropdown", inputs: { columns: "columns", sortBy: "sortBy", sortAscending: "sortAscending" }, outputs: { sort: "sort" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"sort-dropdown-menu\">\n  <div class=\"collection-item-title\">{{ 'SORT_BY' | translate }}</div>\n  <button\n    *ngFor=\"let item of columns\"\n    mat-menu-item\n    (click)=\"setSort(item)\"\n    class=\"collection-item\"\n    [class.active]=\"sortBy === item.name\"\n  >\n    <span class=\"title\" *ngIf=\"item.label\">{{ item.label }}</span>\n    <span class=\"title\" *ngIf=\"!item.label\">{{ item.type + '.' + item.name | translate }}</span>\n    <ng-container *ngIf=\"sortBy === item.name && item.name !== 'ccm:collection_ordered_position'\">\n      <i class=\"material-icons\" *ngIf=\"sortAscending\" [altText]=\"'ASCENDING' | translate\">\n        arrow_upward\n      </i>\n      <i class=\"material-icons\" *ngIf=\"!sortAscending\" [altText]=\"'DESCENDING' | translate\">\n        arrow_downward\n      </i>\n      <span class=\"cdk-visually-hidden\">{{ 'SELECTED' | translate }}</span>\n    </ng-container>\n  </button>\n</mat-menu>\n", styles: ["::ng-deep .sort-dropdown-menu{width:240px}.collection-item-title{color:var(--textLight);font-size:80%;font-weight:700;padding:5px 16px}.collection-item{display:flex;color:var(--primary);text-align:left;border:none;width:100%}.collection-item ::ng-deep .mat-mdc-menu-item-text{flex-grow:1;display:flex;align-items:center}.collection-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}.collection-item.active{--mat-menu-item-label-text-weight: bold}.collection-item.active:after{content:\"\";position:absolute;left:0;width:100%;height:100%;background:linear-gradient(to right,var(--primary) 0,var(--primary) 5px,transparent 5px,transparent 5%)}.collection-item .title{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SortDropdownComponent, isStandalone: false, selector: "es-sort-dropdown", inputs: { columns: "columns", sortBy: "sortBy", sortAscending: "sortAscending" }, outputs: { sort: "sort" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"sort-dropdown-menu\">\n  <div class=\"collection-item-title\">{{ 'SORT_BY' | translate }}</div>\n  <button\n    *ngFor=\"let item of columns\"\n    mat-menu-item\n    (click)=\"setSort(item)\"\n    class=\"collection-item\"\n    [class.active]=\"sortBy === item.name\"\n  >\n    <span class=\"title\" *ngIf=\"item.label\">{{ item.label }}</span>\n    <span class=\"title\" *ngIf=\"!item.label\">{{\n      item.type + '_SORT.' + item.name\n        | translate : { fallback: (item.type + '.' + item.name | translate) }\n    }}</span>\n    <ng-container *ngIf=\"sortBy === item.name && item.name !== 'ccm:collection_ordered_position'\">\n      <i class=\"material-icons\" *ngIf=\"sortAscending\" [altText]=\"'ASCENDING' | translate\">\n        arrow_upward\n      </i>\n      <i class=\"material-icons\" *ngIf=\"!sortAscending\" [altText]=\"'DESCENDING' | translate\">\n        arrow_downward\n      </i>\n      <span class=\"cdk-visually-hidden\">{{ 'SELECTED' | translate }}</span>\n    </ng-container>\n  </button>\n</mat-menu>\n", styles: ["::ng-deep .sort-dropdown-menu{width:240px}.collection-item-title{color:var(--textLight);font-size:80%;font-weight:700;padding:5px 16px}.collection-item{display:flex;color:var(--primary);text-align:left;border:none;width:100%}.collection-item ::ng-deep .mat-mdc-menu-item-text{flex-grow:1;display:flex;align-items:center}.collection-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}.collection-item.active{--mat-menu-item-label-text-weight: bold}.collection-item.active:after{content:\"\";position:absolute;left:0;width:100%;height:100%;background:linear-gradient(to right,var(--primary) 0,var(--primary) 5px,transparent 5px,transparent 5%)}.collection-item .title{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SortDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-sort-dropdown', animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))], standalone: false, template: "<mat-menu #menu=\"matMenu\" class=\"sort-dropdown-menu\">\n  <div class=\"collection-item-title\">{{ 'SORT_BY' | translate }}</div>\n  <button\n    *ngFor=\"let item of columns\"\n    mat-menu-item\n    (click)=\"setSort(item)\"\n    class=\"collection-item\"\n    [class.active]=\"sortBy === item.name\"\n  >\n    <span class=\"title\" *ngIf=\"item.label\">{{ item.label }}</span>\n    <span class=\"title\" *ngIf=\"!item.label\">{{ item.type + '.' + item.name | translate }}</span>\n    <ng-container *ngIf=\"sortBy === item.name && item.name !== 'ccm:collection_ordered_position'\">\n      <i class=\"material-icons\" *ngIf=\"sortAscending\" [altText]=\"'ASCENDING' | translate\">\n        arrow_upward\n      </i>\n      <i class=\"material-icons\" *ngIf=\"!sortAscending\" [altText]=\"'DESCENDING' | translate\">\n        arrow_downward\n      </i>\n      <span class=\"cdk-visually-hidden\">{{ 'SELECTED' | translate }}</span>\n    </ng-container>\n  </button>\n</mat-menu>\n", styles: ["::ng-deep .sort-dropdown-menu{width:240px}.collection-item-title{color:var(--textLight);font-size:80%;font-weight:700;padding:5px 16px}.collection-item{display:flex;color:var(--primary);text-align:left;border:none;width:100%}.collection-item ::ng-deep .mat-mdc-menu-item-text{flex-grow:1;display:flex;align-items:center}.collection-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}.collection-item.active{--mat-menu-item-label-text-weight: bold}.collection-item.active:after{content:\"\";position:absolute;left:0;width:100%;height:100%;background:linear-gradient(to right,var(--primary) 0,var(--primary) 5px,transparent 5px,transparent 5%)}.collection-item .title{flex-grow:1}\n"] }]
+            args: [{ selector: 'es-sort-dropdown', animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))], standalone: false, template: "<mat-menu #menu=\"matMenu\" class=\"sort-dropdown-menu\">\n  <div class=\"collection-item-title\">{{ 'SORT_BY' | translate }}</div>\n  <button\n    *ngFor=\"let item of columns\"\n    mat-menu-item\n    (click)=\"setSort(item)\"\n    class=\"collection-item\"\n    [class.active]=\"sortBy === item.name\"\n  >\n    <span class=\"title\" *ngIf=\"item.label\">{{ item.label }}</span>\n    <span class=\"title\" *ngIf=\"!item.label\">{{\n      item.type + '_SORT.' + item.name\n        | translate : { fallback: (item.type + '.' + item.name | translate) }\n    }}</span>\n    <ng-container *ngIf=\"sortBy === item.name && item.name !== 'ccm:collection_ordered_position'\">\n      <i class=\"material-icons\" *ngIf=\"sortAscending\" [altText]=\"'ASCENDING' | translate\">\n        arrow_upward\n      </i>\n      <i class=\"material-icons\" *ngIf=\"!sortAscending\" [altText]=\"'DESCENDING' | translate\">\n        arrow_downward\n      </i>\n      <span class=\"cdk-visually-hidden\">{{ 'SELECTED' | translate }}</span>\n    </ng-container>\n  </button>\n</mat-menu>\n", styles: ["::ng-deep .sort-dropdown-menu{width:240px}.collection-item-title{color:var(--textLight);font-size:80%;font-weight:700;padding:5px 16px}.collection-item{display:flex;color:var(--primary);text-align:left;border:none;width:100%}.collection-item ::ng-deep .mat-mdc-menu-item-text{flex-grow:1;display:flex;align-items:center}.collection-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}.collection-item.active{--mat-menu-item-label-text-weight: bold}.collection-item.active:after{content:\"\";position:absolute;left:0;width:100%;height:100%;background:linear-gradient(to right,var(--primary) 0,var(--primary) 5px,transparent 5px,transparent 5%)}.collection-item .title{flex-grow:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menu: [{
                 type: ViewChild,
                 args: ['menu', { static: true }]
@@ -3707,7 +3733,7 @@ class SpinnerComponent {
         this.dataTest = 'loading-spinner';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SpinnerComponent, isStandalone: true, selector: "es-spinner", host: { properties: { "attr.data-test": "this.dataTest" } }, ngImport: i0, template: "<div class=\"spinner\">\n  <span aria-live=\"polite\" class=\"cdk-visually-hidden\">{{ 'LOADING' | translate }}</span>\n  <div class=\"spinnercontainer\">\n    <div class=\"inner\">\n      <div class=\"spinner1\"></div>\n    </div>\n    <div class=\"inner\">\n      <div class=\"spinner2\"></div>\n    </div>\n    <div class=\"inner\">\n      <div class=\"spinner3\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".spinner{margin:0 auto}.spinnercontainer{margin:20px auto auto;height:54px;color:#0000;text-align:center;float:left;width:100%}.inner{width:30px;height:50px;display:inline-block}.spinner1{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNTE0NDgpICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19zdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTwhRU5USVRZIG5zX3hsaW5rICJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KXT4KPHN2ZyAgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9IiZuc19zdmc7IiB4bWxuczp4bGluaz0iJm5zX3hsaW5rOyIgd2lkdGg9IjE1LjY1NyIgaGVpZ2h0PSIxMy41NTkiCgkgdmlld0JveD0iMCAwIDE1LjY1NyAxMy41NTkiIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNS42NTcgMTMuNTU5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gb3BhY2l0eT0iMC42IiBmaWxsPSIjYzFjNmUzIiBwb2ludHM9IjMuOTE0LDEzLjU1OSAwLDYuNzggMy45MTQsMCAxMS43NDMsMCAxNS42NTcsNi43OCAxMS43NDMsMTMuNTU5ICIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;background-size:50px;width:50px;height:50px;-webkit-animation:spin 2s infinite ease-in;-moz-animation:spin 2s infinite ease-in;-ms-animation:spin 2s infinite ease-in;-o-animation:spin 2s infinite ease-in;animation:spin 2s infinite ease-in;-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.spinner2{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNTE0NDgpICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19zdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTwhRU5USVRZIG5zX3hsaW5rICJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KXT4KPHN2ZyAgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9IiZuc19zdmc7IiB4bWxuczp4bGluaz0iJm5zX3hsaW5rOyIgd2lkdGg9IjE1LjY1NyIgaGVpZ2h0PSIxMy41NTkiCgkgdmlld0JveD0iMCAwIDE1LjY1NyAxMy41NTkiIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNS42NTcgMTMuNTU5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gb3BhY2l0eT0iMC42IiBmaWxsPSIjN2Y5MWMzIiBwb2ludHM9IjMuOTE0LDEzLjU1OSAwLDYuNzggMy45MTQsMCAxMS43NDMsMCAxNS42NTcsNi43OCAxMS43NDMsMTMuNTU5ICIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;background-size:50px;width:50px;height:50px;-webkit-animation:spin 2s infinite ease-in;-moz-animation:spin 2s infinite ease-in;-ms-animation:spin 2s infinite ease-in;-o-animation:spin 2s infinite ease-in;animation:spin 2s infinite ease-in;-webkit-animation-delay:.25s;-moz-animation-delay:.25s;animation-delay:.25s}.spinner3{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNTE0NDgpICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19zdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTwhRU5USVRZIG5zX3hsaW5rICJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KXT4KPHN2ZyAgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9IiZuc19zdmc7IiB4bWxuczp4bGluaz0iJm5zX3hsaW5rOyIgd2lkdGg9IjE1LjY1NyIgaGVpZ2h0PSIxMy41NTkiCgkgdmlld0JveD0iMCAwIDE1LjY1NyAxMy41NTkiIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNS42NTcgMTMuNTU5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gb3BhY2l0eT0iMC42IiBmaWxsPSIjMzE2MmE3IiBwb2ludHM9IjMuOTE0LDEzLjU1OSAwLDYuNzggMy45MTQsMCAxMS43NDMsMCAxNS42NTcsNi43OCAxMS43NDMsMTMuNTU5ICIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;background-size:50px;width:50px;height:50px;-webkit-animation:spin 2s infinite ease-in;-moz-animation:spin 2s infinite ease-in;-ms-animation:spin 2s infinite ease-in;-o-animation:spin 2s infinite ease-in;animation:spin 2s infinite ease-in;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@-moz-keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@-ms-keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@-o-keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5) rotate(90deg)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SpinnerComponent, isStandalone: true, selector: "es-spinner", host: { properties: { "attr.data-test": "this.dataTest" } }, ngImport: i0, template: "<div class=\"spinner\">\n  <span aria-live=\"polite\" class=\"cdk-visually-hidden\">{{ 'LOADING' | translate }}</span>\n  <div class=\"spinnercontainer\">\n    <div class=\"inner\">\n      <div class=\"spinner1\"></div>\n    </div>\n    <div class=\"inner\">\n      <div class=\"spinner2\"></div>\n    </div>\n    <div class=\"inner\">\n      <div class=\"spinner3\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".spinner{margin:0 auto}.spinnercontainer{margin:20px auto auto;height:54px;color:#0000;text-align:center;float:left;width:100%}.inner{width:30px;height:50px;display:inline-block}.spinner1{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNTE0NDgpICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19zdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTwhRU5USVRZIG5zX3hsaW5rICJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KXT4KPHN2ZyAgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9IiZuc19zdmc7IiB4bWxuczp4bGluaz0iJm5zX3hsaW5rOyIgd2lkdGg9IjE1LjY1NyIgaGVpZ2h0PSIxMy41NTkiCgkgdmlld0JveD0iMCAwIDE1LjY1NyAxMy41NTkiIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNS42NTcgMTMuNTU5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gb3BhY2l0eT0iMC42IiBmaWxsPSIjYzFjNmUzIiBwb2ludHM9IjMuOTE0LDEzLjU1OSAwLDYuNzggMy45MTQsMCAxMS43NDMsMCAxNS42NTcsNi43OCAxMS43NDMsMTMuNTU5ICIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;background-size:50px;width:50px;height:50px;-webkit-animation:spin 2s infinite ease-in;-moz-animation:spin 2s infinite ease-in;-ms-animation:spin 2s infinite ease-in;-o-animation:spin 2s infinite ease-in;animation:spin 2s infinite ease-in;-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}.spinner2{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNTE0NDgpICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19zdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTwhRU5USVRZIG5zX3hsaW5rICJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KXT4KPHN2ZyAgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9IiZuc19zdmc7IiB4bWxuczp4bGluaz0iJm5zX3hsaW5rOyIgd2lkdGg9IjE1LjY1NyIgaGVpZ2h0PSIxMy41NTkiCgkgdmlld0JveD0iMCAwIDE1LjY1NyAxMy41NTkiIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNS42NTcgMTMuNTU5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gb3BhY2l0eT0iMC42IiBmaWxsPSIjN2Y5MWMzIiBwb2ludHM9IjMuOTE0LDEzLjU1OSAwLDYuNzggMy45MTQsMCAxMS43NDMsMCAxNS42NTcsNi43OCAxMS43NDMsMTMuNTU5ICIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;background-size:50px;width:50px;height:50px;-webkit-animation:spin 2s infinite ease-in;-moz-animation:spin 2s infinite ease-in;-ms-animation:spin 2s infinite ease-in;-o-animation:spin 2s infinite ease-in;animation:spin 2s infinite ease-in;-webkit-animation-delay:.25s;-moz-animation-delay:.25s;animation-delay:.25s}.spinner3{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNTE0NDgpICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19zdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTwhRU5USVRZIG5zX3hsaW5rICJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KXT4KPHN2ZyAgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9IiZuc19zdmc7IiB4bWxuczp4bGluaz0iJm5zX3hsaW5rOyIgd2lkdGg9IjE1LjY1NyIgaGVpZ2h0PSIxMy41NTkiCgkgdmlld0JveD0iMCAwIDE1LjY1NyAxMy41NTkiIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNS42NTcgMTMuNTU5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gb3BhY2l0eT0iMC42IiBmaWxsPSIjMzE2MmE3IiBwb2ludHM9IjMuOTE0LDEzLjU1OSAwLDYuNzggMy45MTQsMCAxMS43NDMsMCAxNS42NTcsNi43OCAxMS43NDMsMTMuNTU5ICIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;background-size:50px;width:50px;height:50px;-webkit-animation:spin 2s infinite ease-in;-moz-animation:spin 2s infinite ease-in;-ms-animation:spin 2s infinite ease-in;-o-animation:spin 2s infinite ease-in;animation:spin 2s infinite ease-in;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@-moz-keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@-ms-keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@-o-keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@keyframes spin{0%{transform:scale(1)}50%{transform:scale(.5) rotate(90deg)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
@@ -3742,9 +3768,12 @@ class NodeLicensePipe {
                 return this.translate.get('LICENSE.NAMES.' + node.properties[RestConstants.CCM_PROP_LICENSE]?.[0]);
             }
         }
-        return null;
+        if (args?.type === 'name') {
+            return this.translate.get('LICENSE.NAMES.NONE');
+        }
+        return of(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeLicensePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeLicensePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NodeLicensePipe, isStandalone: false, name: "esNodeLicense" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeLicensePipe, decorators: [{
@@ -3753,7 +3782,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'esNodeLicense',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
+
+class NodeUrlPipe {
+    constructor(nodeHelperService) {
+        this.nodeHelperService = nodeHelperService;
+    }
+    transform(node, mode = 'plain') {
+        return this.nodeHelperService.getNodeLink(mode, node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeUrlPipe, deps: [{ token: NodeHelperService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NodeUrlPipe, isStandalone: false, name: "esNodeUrl" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'esNodeUrl',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: NodeHelperService }] });
+
+class ToolpermissionPipe {
+    constructor(authenticationService) {
+        this.authenticationService = authenticationService;
+    }
+    transform(toolpermission) {
+        return this.authenticationService.hasToolpermission(toolpermission);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToolpermissionPipe, deps: [{ token: i1.AuthenticationService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ToolpermissionPipe, isStandalone: true, name: "esToolpermission" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToolpermissionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'esToolpermission',
+                }]
+        }], ctorParameters: () => [{ type: i1.AuthenticationService }] });
 
 class EduSharingUiCommonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EduSharingUiCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3767,10 +3831,12 @@ class EduSharingUiCommonModule {
             FormatDatePipe,
             FormatSizePipe,
             IconDirective,
+            InfoMessageComponent,
             MdsDurationPipe,
             InfiniteScrollDirective,
             PropertySlugPipe,
             NodeIconPipe,
+            NodeUrlPipe,
             NodeImagePipe,
             NodeImageSizePipe,
             NodeLicensePipe,
@@ -3784,6 +3850,7 @@ class EduSharingUiCommonModule {
             MatMenuModule,
             SpinnerComponent,
             SpinnerSmallComponent,
+            ToolpermissionPipe,
             MatButtonModule,
             MatTooltipModule,
             MatRippleModule,
@@ -3800,13 +3867,16 @@ class EduSharingUiCommonModule {
             MdsDurationPipe,
             IconDirective,
             InfiniteScrollDirective,
+            InfoMessageComponent,
             PropertySlugPipe,
             NodeIconPipe,
+            NodeUrlPipe,
             NodeImagePipe,
             NodeImageSizePipe,
             NodePersonNamePipe,
             NodeTitlePipe,
             NodeUrlComponent,
+            ToolpermissionPipe,
             SortDropdownComponent,
             SpinnerComponent,
             SpinnerSmallComponent,
@@ -3836,10 +3906,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormatDatePipe,
                         FormatSizePipe,
                         IconDirective,
+                        InfoMessageComponent,
                         MdsDurationPipe,
                         InfiniteScrollDirective,
                         PropertySlugPipe,
                         NodeIconPipe,
+                        NodeUrlPipe,
                         NodeImagePipe,
                         NodeImageSizePipe,
                         NodeLicensePipe,
@@ -3856,6 +3928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatMenuModule,
                         SpinnerComponent,
                         SpinnerSmallComponent,
+                        ToolpermissionPipe,
                         MatButtonModule,
                         MatTooltipModule,
                         MatRippleModule,
@@ -3875,13 +3948,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MdsDurationPipe,
                         IconDirective,
                         InfiniteScrollDirective,
+                        InfoMessageComponent,
                         PropertySlugPipe,
                         NodeIconPipe,
+                        NodeUrlPipe,
                         NodeImagePipe,
                         NodeImageSizePipe,
                         NodePersonNamePipe,
                         NodeTitlePipe,
                         NodeUrlComponent,
+                        ToolpermissionPipe,
                         SortDropdownComponent,
                         SpinnerComponent,
                         SpinnerSmallComponent,
@@ -3945,12 +4021,18 @@ class MdsHelperService {
         }
         return null;
     }
-    static getColumns(translate, mdsSet, name) {
-        let columns = [];
+    /**
+     *
+     * get columns as an object structure
+     * There are always Columns in the result.Default but there can also be further types
+     * See @ColumnType
+     */
+    getColumns(mdsSet, name) {
+        let columns = {};
         if (mdsSet) {
             for (const list of mdsSet.lists) {
                 if (list.id === name) {
-                    for (const column of list.columns) {
+                    for (const column of Object.entries(list.columns)) {
                         let type = 'NODE';
                         if (name === 'mediacenterGroups') {
                             type = 'GROUP';
@@ -3958,52 +4040,57 @@ class MdsHelperService {
                         else if (name === 'searchCollections') {
                             type = 'COLLECTION';
                         }
-                        // in this case, the type is included
-                        if (column.id.includes('.')) {
-                            const split = column.id.split('.');
-                            type = split[0];
-                            column.id = split[1];
-                        }
-                        const item = new ListItem(type, column.id);
-                        item.format = column.format;
-                        columns.push(item);
+                        columns[column[0]] = column[1].map((c) => {
+                            if (c.id.includes('.')) {
+                                const split = c.id.split('.');
+                                type = split[0];
+                                c.id = split.slice(1).join('.');
+                            }
+                            const item = new ListItem(type, c.id);
+                            item.format = c.format;
+                            const key = item.type + '.' + item.name;
+                            if (item.type === 'NODE' && this.translate.instant(key) === key) {
+                                item.label = mdsSet.widgets.filter((w) => w.id === item.name)?.[0]?.caption;
+                            }
+                            return item;
+                        });
                     }
                     break;
                 }
             }
         }
-        if (!columns.length) {
+        if (!columns?.Default?.length) {
+            const defaultColumns = [];
             if (mdsSet !== null) {
                 console.warn('mds does not define columns for ' + name + ', invalid configuration!');
             }
-            if (name === 'search' || name === 'collectionReferences') {
-                columns.push(new ListItem('NODE', RestConstants.LOM_PROP_TITLE));
-                columns.push(new ListItem('NODE', RestConstants.CM_MODIFIED_DATE));
-                columns.push(new ListItem('NODE', RestConstants.CCM_PROP_LICENSE));
-                columns.push(new ListItem('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCE));
+            if (name === 'searchCollections' || name === 'swimlane_collections') {
+                defaultColumns.push(new ListItem('COLLECTION', 'title'));
+                defaultColumns.push(new ListItem('COLLECTION', 'info'));
+                defaultColumns.push(new ListItem('COLLECTION', 'scope'));
+            }
+            else if (name === 'search' ||
+                name === 'collectionReferences' ||
+                name.startsWith('swimlane_')) {
+                defaultColumns.push(new ListItem('NODE', RestConstants.LOM_PROP_TITLE));
+                defaultColumns.push(new ListItem('NODE', RestConstants.CM_MODIFIED_DATE));
+                defaultColumns.push(new ListItem('NODE', RestConstants.CCM_PROP_LICENSE));
+                defaultColumns.push(new ListItem('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCE));
             }
             else if (name === 'mediacenterManaged') {
-                columns.push(new ListItem('NODE', RestConstants.LOM_PROP_TITLE));
-                columns.push(new ListItem('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCEID));
-                columns.push(new ListItem('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCE));
+                defaultColumns.push(new ListItem('NODE', RestConstants.LOM_PROP_TITLE));
+                defaultColumns.push(new ListItem('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCEID));
+                defaultColumns.push(new ListItem('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCE));
             }
             else if (name === 'mediacenterGroups') {
-                columns.push(new ListItem('GROUP', RestConstants.AUTHORITY_DISPLAYNAME));
-                columns.push(new ListItem('GROUP', RestConstants.AUTHORITY_GROUPTYPE));
+                defaultColumns.push(new ListItem('GROUP', RestConstants.AUTHORITY_DISPLAYNAME));
+                defaultColumns.push(new ListItem('GROUP', RestConstants.AUTHORITY_GROUPTYPE));
             }
             else if (name === 'searchCollections') {
-                columns.push(new ListItem('COLLECTION', 'title'));
-                columns.push(new ListItem('COLLECTION', 'info'));
-                columns.push(new ListItem('COLLECTION', 'scope'));
+                defaultColumns.push(...ListItem.getCollectionDefaults());
             }
+            columns['Default'] = defaultColumns;
         }
-        columns.map((c) => {
-            const key = c.type + '.' + c.name;
-            if (c.type === 'NODE' && translate.instant(key) === key) {
-                c.label = mdsSet.widgets.filter((w) => w.id === c.name)?.[0]?.caption;
-            }
-            return c;
-        });
         return columns;
     }
     /**
@@ -4026,8 +4113,10 @@ class MdsHelperService {
         }
         return null;
     }
-    constructor(authentication) {
+    constructor(authentication, mdsService, translate) {
         this.authentication = authentication;
+        this.mdsService = mdsService;
+        this.translate = translate;
     }
     /**
      * Same as getWidget, but will also check the widget conditions
@@ -4086,12 +4175,18 @@ class MdsHelperService {
         }
         return used;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsHelperService, deps: [{ token: i2.AuthenticationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /**
+     * Same as getColumns, but you don't need to fetch the mds yourself
+     */
+    async getColumnsByMdsId(name, mds) {
+        return this.getColumns(await firstValueFrom(this.mdsService.getMetadataSet(mds)), name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsHelperService, deps: [{ token: i1.AuthenticationService }, { token: i1.MdsService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsHelperService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsHelperService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2.AuthenticationService }] });
+        }], ctorParameters: () => [{ type: i1.AuthenticationService }, { type: i1.MdsService }, { type: i1$1.TranslateService }] });
 
 class MdsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MdsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4666,6 +4761,7 @@ class AccessibilitySettings {
         this.toastDuration = ToastDuration.Seconds_5;
         this.contrastMode = false;
         this.indicatorIcons = true;
+        this.dragAndDropOptions = false;
     }
 }
 var ToastDuration;
@@ -4723,7 +4819,7 @@ class AccessibilityService {
     observeAll() {
         return this.observeMultiple(Object.keys(new AccessibilitySettings()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccessibilityService, deps: [{ token: i2.SessionStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccessibilityService, deps: [{ token: i1.SessionStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccessibilityService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccessibilityService, decorators: [{
@@ -4731,7 +4827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i2.SessionStorageService }] });
+        }], ctorParameters: () => [{ type: i1.SessionStorageService }] });
 /**
  * Rxjs.combineLatest on objects instead of arrays.
  *
@@ -4758,11 +4854,11 @@ class ListCollectionInfoComponent extends ListWidget {
         this.indicatorIcons$ = this.accessibility.observe('indicatorIcons');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListCollectionInfoComponent, deps: [{ token: AccessibilityService }, { token: NodeHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListCollectionInfoComponent, isStandalone: false, selector: "es-list-collection-info", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"item.name\">\n  <ng-container *ngSwitchCase=\"'info'\">\n    <ng-container *ngIf=\"indicatorIcons$ | async; else textRepresentation\">\n      <i\n        esIcon=\"layers\"\n        [altText]=\"'COLLECTION.INFO_REFERENCES_MULTI' | translate\"\n        [matTooltip]=\"'COLLECTION.INFO_REFERENCES_MULTI' | translate\"\n      ></i>\n      {{ $any(node).collection?.childCollectionsCount }}\n      <i\n        esIcon=\"insert_drive_file\"\n        [altText]=\"'collections_content' | translate\"\n        [matTooltip]=\"'collections_content' | translate\"\n      ></i>\n      {{ $any(node).collection?.childReferencesCount }}\n    </ng-container>\n    <ng-template #textRepresentation>\n      <div class=\"rows\">\n        <p>\n          {{ 'COLLECTION.INFO_REFERENCES_MULTI' | translate }}:\n          {{ $any(node).collection?.childCollectionsCount }}\n        </p>\n        <p>\n          {{ 'collections_content' | translate }}:\n          {{ $any(node).collection?.childReferencesCount }}\n        </p>\n      </div>\n    </ng-template>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'scope'\">\n    <i\n      *ngIf=\"indicatorIcons$ | async; else textRepresentation\"\n      class=\"collectionScope\"\n      [esIcon]=\"nodeHelper.getCollectionScopeInfo($any(node)).icon\"\n      [matTooltip]=\"\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      \"\n      [altText]=\"\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      \"\n    ></i>\n    <ng-template #textRepresentation>\n      {{\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      }}\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".rows{display:flex;flex-direction:column;text-align:start}.rows p{margin:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListCollectionInfoComponent, isStandalone: false, selector: "es-list-collection-info", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"item.name\">\n  <ng-container *ngSwitchCase=\"'info'\">\n    <ng-container *ngIf=\"indicatorIcons$ | async; else textRepresentation\">\n      <i\n        esIcon=\"layers\"\n        [altText]=\"'COLLECTION.INFO_REFERENCES_MULTI' | translate\"\n        [matTooltip]=\"'COLLECTION.INFO_REFERENCES_MULTI' | translate\"\n      ></i>\n      {{ $any(node).collection?.childCollectionsCount }}\n      <i\n        esIcon=\"insert_drive_file\"\n        [altText]=\"'collections_content' | translate\"\n        [matTooltip]=\"'collections_content' | translate\"\n      ></i>\n      {{ $any(node).collection?.childReferencesCount }}\n    </ng-container>\n    <ng-template #textRepresentation>\n      <div class=\"rows\">\n        <p>\n          {{ 'COLLECTION.INFO_REFERENCES_MULTI' | translate }}:\n          {{ $any(node).collection?.childCollectionsCount }}\n        </p>\n        <p>\n          {{ 'collections_content' | translate }}:\n          {{ $any(node).collection?.childReferencesCount }}\n        </p>\n      </div>\n    </ng-template>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'scope'\">\n    <i\n      *ngIf=\"indicatorIcons$ | async; else textRepresentation\"\n      class=\"collectionScope\"\n      [esIcon]=\"nodeHelper.getCollectionScopeInfo($any(node)).icon\"\n      esIconContext=\"collection-scope\"\n      [matTooltip]=\"\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      \"\n      [altText]=\"\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      \"\n    ></i>\n    <ng-template #textRepresentation>\n      {{\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      }}\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".rows{display:flex;flex-direction:column;text-align:start}.rows p{margin:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListCollectionInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-list-collection-info', standalone: false, template: "<ng-container [ngSwitch]=\"item.name\">\n  <ng-container *ngSwitchCase=\"'info'\">\n    <ng-container *ngIf=\"indicatorIcons$ | async; else textRepresentation\">\n      <i\n        esIcon=\"layers\"\n        [altText]=\"'COLLECTION.INFO_REFERENCES_MULTI' | translate\"\n        [matTooltip]=\"'COLLECTION.INFO_REFERENCES_MULTI' | translate\"\n      ></i>\n      {{ $any(node).collection?.childCollectionsCount }}\n      <i\n        esIcon=\"insert_drive_file\"\n        [altText]=\"'collections_content' | translate\"\n        [matTooltip]=\"'collections_content' | translate\"\n      ></i>\n      {{ $any(node).collection?.childReferencesCount }}\n    </ng-container>\n    <ng-template #textRepresentation>\n      <div class=\"rows\">\n        <p>\n          {{ 'COLLECTION.INFO_REFERENCES_MULTI' | translate }}:\n          {{ $any(node).collection?.childCollectionsCount }}\n        </p>\n        <p>\n          {{ 'collections_content' | translate }}:\n          {{ $any(node).collection?.childReferencesCount }}\n        </p>\n      </div>\n    </ng-template>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'scope'\">\n    <i\n      *ngIf=\"indicatorIcons$ | async; else textRepresentation\"\n      class=\"collectionScope\"\n      [esIcon]=\"nodeHelper.getCollectionScopeInfo($any(node)).icon\"\n      [matTooltip]=\"\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      \"\n      [altText]=\"\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      \"\n    ></i>\n    <ng-template #textRepresentation>\n      {{\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      }}\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".rows{display:flex;flex-direction:column;text-align:start}.rows p{margin:0}\n"] }]
+            args: [{ selector: 'es-list-collection-info', standalone: false, template: "<ng-container [ngSwitch]=\"item.name\">\n  <ng-container *ngSwitchCase=\"'info'\">\n    <ng-container *ngIf=\"indicatorIcons$ | async; else textRepresentation\">\n      <i\n        esIcon=\"layers\"\n        [altText]=\"'COLLECTION.INFO_REFERENCES_MULTI' | translate\"\n        [matTooltip]=\"'COLLECTION.INFO_REFERENCES_MULTI' | translate\"\n      ></i>\n      {{ $any(node).collection?.childCollectionsCount }}\n      <i\n        esIcon=\"insert_drive_file\"\n        [altText]=\"'collections_content' | translate\"\n        [matTooltip]=\"'collections_content' | translate\"\n      ></i>\n      {{ $any(node).collection?.childReferencesCount }}\n    </ng-container>\n    <ng-template #textRepresentation>\n      <div class=\"rows\">\n        <p>\n          {{ 'COLLECTION.INFO_REFERENCES_MULTI' | translate }}:\n          {{ $any(node).collection?.childCollectionsCount }}\n        </p>\n        <p>\n          {{ 'collections_content' | translate }}:\n          {{ $any(node).collection?.childReferencesCount }}\n        </p>\n      </div>\n    </ng-template>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'scope'\">\n    <i\n      *ngIf=\"indicatorIcons$ | async; else textRepresentation\"\n      class=\"collectionScope\"\n      [esIcon]=\"nodeHelper.getCollectionScopeInfo($any(node)).icon\"\n      esIconContext=\"collection-scope\"\n      [matTooltip]=\"\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      \"\n      [altText]=\"\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      \"\n    ></i>\n    <ng-template #textRepresentation>\n      {{\n        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n      }}\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".rows{display:flex;flex-direction:column;text-align:start}.rows p{margin:0}\n"] }]
         }], ctorParameters: () => [{ type: AccessibilityService }, { type: NodeHelperService }] });
 
 class ListCountsComponent extends ListWidget {
@@ -4838,13 +4934,13 @@ class ListNodeLicenseComponent extends ListWidget {
         }));
         this.indicatorIcons$ = this.accessibility.observe('indicatorIcons');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListNodeLicenseComponent, deps: [{ token: AccessibilityService }, { token: NodeHelperService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListNodeLicenseComponent, deps: [{ token: AccessibilityService }, { token: NodeHelperService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListNodeLicenseComponent, isStandalone: false, selector: "es-list-node-license", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"licenseIcon$ | async as licenseIcon\">\n  <span *ngIf=\"indicatorIcons$ | async; else textRepresentation\" [matTooltip]=\"tooltip$ | async\"\n    ><img [alt]=\"tooltip$ | async\" [src]=\"licenseIcon\"\n  /></span>\n  <ng-template #textRepresentation>\n    <span>{{ tooltip$ | async }}</span>\n  </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListNodeLicenseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-list-node-license', standalone: false, template: "<ng-container *ngIf=\"licenseIcon$ | async as licenseIcon\">\n  <span *ngIf=\"indicatorIcons$ | async; else textRepresentation\" [matTooltip]=\"tooltip$ | async\"\n    ><img [alt]=\"tooltip$ | async\" [src]=\"licenseIcon\"\n  /></span>\n  <ng-template #textRepresentation>\n    <span>{{ tooltip$ | async }}</span>\n  </ng-template>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: AccessibilityService }, { type: NodeHelperService }, { type: i1.TranslateService }] });
+        }], ctorParameters: () => [{ type: AccessibilityService }, { type: NodeHelperService }, { type: i1$1.TranslateService }] });
 
 class NodeSourcePipe {
     constructor(nodeHelper, networkApi) {
@@ -4883,7 +4979,7 @@ class NodeSourcePipe {
         src = src.replace(/\//g, '_');
         return src;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeSourcePipe, deps: [{ token: NodeHelperService }, { token: i2.NetworkService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeSourcePipe, deps: [{ token: NodeHelperService }, { token: i1.NetworkService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NodeSourcePipe, isStandalone: false, name: "appNodeSource" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeSourcePipe, decorators: [{
@@ -4892,7 +4988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'appNodeSource',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: NodeHelperService }, { type: i2.NetworkService }] });
+        }], ctorParameters: () => [{ type: NodeHelperService }, { type: i1.NetworkService }] });
 
 class ListNodeReplicationSourceComponent extends ListWidget {
     static { this.supportedItems = [new ListItem('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCE)]; }
@@ -4919,13 +5015,13 @@ class ListNodeReplicationSourceComponent extends ListWidget {
         }));
         this.indicatorIcons$ = this.accessibility.observe('indicatorIcons');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListNodeReplicationSourceComponent, deps: [{ token: AccessibilityService }, { token: NodeSourcePipe }, { token: i1.TranslateService }, { token: i2.NetworkService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListNodeReplicationSourceComponent, deps: [{ token: AccessibilityService }, { token: NodeSourcePipe }, { token: i1$1.TranslateService }, { token: i1.NetworkService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListNodeReplicationSourceComponent, isStandalone: false, selector: "es-list-node-replication-source", providers: [NodeSourcePipe], usesInheritance: true, ngImport: i0, template: "<span *ngIf=\"indicatorIcons$ | async; else textRepresentation\" [matTooltip]=\"tooltip$ | async\">\n  <img\n    [src]=\"replicationSource$ | async | appNodeSource : { mode: 'url' }\"\n    (error)=\"$any($event.target).style.display = 'none'\"\n    [alt]=\"tooltip$ | async\"\n  />\n</span>\n\n<ng-template #textRepresentation>\n  <span>{{ tooltip$ | async }}</span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeSourcePipe, name: "appNodeSource" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListNodeReplicationSourceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-list-node-replication-source', providers: [NodeSourcePipe], standalone: false, template: "<span *ngIf=\"indicatorIcons$ | async; else textRepresentation\" [matTooltip]=\"tooltip$ | async\">\n  <img\n    [src]=\"replicationSource$ | async | appNodeSource : { mode: 'url' }\"\n    (error)=\"$any($event.target).style.display = 'none'\"\n    [alt]=\"tooltip$ | async\"\n  />\n</span>\n\n<ng-template #textRepresentation>\n  <span>{{ tooltip$ | async }}</span>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: AccessibilityService }, { type: NodeSourcePipe }, { type: i1.TranslateService }, { type: i2.NetworkService }] });
+        }], ctorParameters: () => [{ type: AccessibilityService }, { type: NodeSourcePipe }, { type: i1$1.TranslateService }, { type: i1.NetworkService }] });
 
 class ListNodeWorkflowComponent extends ListWidget {
     static { this.supportedItems = [new ListItem('NODE', RestConstants.CCM_PROP_WF_STATUS)]; }
@@ -4937,7 +5033,7 @@ class ListNodeWorkflowComponent extends ListWidget {
         return this.nodeHelper.getWorkflowStatus(this.node).current;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListNodeWorkflowComponent, deps: [{ token: NodeHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListNodeWorkflowComponent, isStandalone: false, selector: "es-list-node-workflow", usesInheritance: true, ngImport: i0, template: "<div class=\"workflowStatus\" [style.background-color]=\"getWorkflowStatus()?.color\">\n  {{ 'WORKFLOW.' + getWorkflowStatus()?.id | translate }}\n</div>\n", dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListNodeWorkflowComponent, isStandalone: false, selector: "es-list-node-workflow", usesInheritance: true, ngImport: i0, template: "<div class=\"workflowStatus\" [style.background-color]=\"getWorkflowStatus()?.color\">\n  {{ 'WORKFLOW.' + getWorkflowStatus()?.id | translate }}\n</div>\n", dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListNodeWorkflowComponent, decorators: [{
             type: Component,
@@ -4952,6 +5048,8 @@ class ListTextComponent extends ListWidget {
         new ListItem('ORG', '*'),
         new ListItem('GROUP', '*'),
         new ListItem('USER', '*'),
+        new ListItem('EVENT', '*'),
+        new ListItem('SHARE', '*'),
     ]; }
     constructor(nodeHelper, mds, changeDetectorRef) {
         super();
@@ -4971,6 +5069,12 @@ class ListTextComponent extends ListWidget {
         if (this.item.type === 'NODE_PROPOSAL') {
             return this.node.proposal || this.node;
         }
+        else if (this.item.type === 'EVENT') {
+            return this.node.event;
+        }
+        else if (this.item.type === 'SHARE') {
+            return this.node.share;
+        }
         else if (this.node.type === RestConstants.CCM_TYPE_COLLECTION_PROPOSAL) {
             return this.node.relations?.Original ?? this.node;
         }
@@ -5002,29 +5106,35 @@ class ListTextComponent extends ListWidget {
         this.displayName$.next(node.properties[this.item.name + '_DISPLAYNAME']?.length > 0
             ? node.properties[this.item.name + '_DISPLAYNAME'].join(', ')
             : node.properties[this.item.name]?.join(', '));
-        const mds = await this.mds
-            .getMetadataSet({
-            repository: node.ref?.repo || i2.HOME_REPOSITORY,
-            metadataSet: node.metadataset || i2.DEFAULT,
-        })
-            .toPromise();
-        const widget = MdsHelperService.getWidget(this.item.name, null, mds.widgets);
-        if (widget?.values) {
-            const i18n = node.properties[this.item.name]
-                ?.map((prop) => widget.values.filter((v) => v.id === prop)?.[0]?.caption)
-                .filter((cap) => !!cap);
-            if (i18n) {
-                this.displayName$.next(i18n.join(', '));
+        try {
+            const mds = await this.mds
+                .getMetadataSet({
+                repository: node.ref?.repo || i1.HOME_REPOSITORY,
+                metadataSet: node.metadataset || i1.DEFAULT,
+            })
+                .toPromise();
+            const widget = MdsHelperService.getWidget(this.item.name, null, mds.widgets);
+            if (widget?.values) {
+                const i18n = node.properties[this.item.name]
+                    ?.map((prop) => widget.values.filter((v) => v.id === prop)?.[0]?.caption)
+                    .filter((cap) => !!cap);
+                if (i18n) {
+                    this.displayName$.next(i18n.join(', '));
+                }
             }
         }
+        catch (e) {
+            // access to mds might be forbidden
+            e.preventDefault();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListTextComponent, deps: [{ token: NodeHelperService }, { token: i2.MdsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListTextComponent, isStandalone: false, selector: "es-list-text", usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"item.config?.showLabel\">\n  {{ getI18n(item) | translate }}\n</label>\n<ng-container *ngIf=\"item.type === 'ORG' || item.type === 'GROUP'\">\n  <ng-container [ngSwitch]=\"item.name\">\n    <span *ngSwitchCase=\"'displayName'\" [class.type-danger]=\"isDangerousGroup()\">\n      {{ $any(getNode()).profile?.displayName || $any(getNode()).authorityName }}\n    </span>\n    <span *ngSwitchCase=\"'groupType'\">\n      {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile?.groupType | translate }}\n    </span>\n    <span *ngSwitchDefault>\n      {{ $any(getNode())[item.name] }}\n    </span>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"item.type === 'USER'\">\n  <span *ngIf=\"isUserProfileAttribute(item.name)\">\n    {{ $any(getNode()).profile?.[item.name] }}\n  </span>\n  <span *ngIf=\"item.name === 'status'\">\n    {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}\n  </span>\n  <span *ngIf=\"!isUserProfileAttribute(item.name) && item.name !== 'status'\">\n    {{ $any(getNode())[item.name] }}\n  </span>\n</ng-container>\n<ng-container\n  [ngSwitch]=\"item.name\"\n  *ngIf=\"item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'\"\n>\n  <span *ngSwitchCase=\"'name'\">\n    {{ $any(getNode()).name }}\n  </span>\n  <span\n    *ngSwitchCase=\"'mediatype'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}\n  </span>\n  <span *ngSwitchCase=\"'size'\" [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\">\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()).size | formatSize }}\n  </span>\n  <span\n    *ngSwitchCase=\"'dimensions'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()) | NodeImageSize }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:wf_status'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <es-list-node-workflow\n      [item]=\"item\"\n      [node]=\"node\"\n      [provideLabel]=\"false\"\n    ></es-list-node-workflow>\n    <!--<span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}-->\n  </span>\n  <span\n    *ngSwitchCase=\"'cm:creator'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()).createdBy | nodePersonName }}\n  </span>\n  <span\n    *ngSwitchCase=\"'cm:modifier'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.cm:modifier' | translate }}:</span\n    >\n    {{ $any(getNode()).modifiedBy | nodePersonName }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:replicationsource'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:replicationsource' | translate }}:</span\n    >\n    {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource : { mode: 'text' } }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:commonlicense_key'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span\n    >\n    <ng-container *ngIf=\"$any(getNode()).properties['ccm:commonlicense_key'] as license\">\n      {{\n        license[0] === 'CUSTOM'\n          ? $any(getNode()).properties['cclom:rights_description']\n          : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']\n            | translate : { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })\n      }}\n    </ng-container>\n    <ng-container *ngIf=\"!$any(getNode()).properties['ccm:commonlicense_key']\">\n      {{ 'LICENSE.NAMES.NONE' | translate }}\n    </ng-container>\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:educationaltypicalagerange'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span\n    >\n    <ng-container\n      *ngIf=\"\n        $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||\n        $any(getNode()).properties['ccm:educationaltypicalagerange_to']\n      \"\n    >\n      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -\n      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}\n    </ng-container>\n  </span>\n  <span\n    *ngSwitchCase=\"'cclom:duration'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.cclom:duration' | translate }}:</span\n    >\n    {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:collection_proposal_status'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span\n    >\n    <!-- use node instead of getNode() to access the raw proposal data! -->\n    {{\n      'PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]\n        | translate: { fallback: '' }\n    }}\n  </span>\n  <span\n    *ngSwitchDefault\n    esCheckTextOverflow\n    #text=\"esCheckTextOverflow\"\n    [matTooltip]=\"\n      provideLabel ? (getI18n(item) | translate) : text.hasTextOverflow() ? content.innerText : null\n    \"\n    #content\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    <ng-container *ngIf=\"['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n      {{ $any(getNode()) | nodeTitle }}\n    </ng-container>\n    <ng-container *ngIf=\"['name', 'cm:name'].includes(item.name)\">\n      {{ $any(getNode()) | nodeTitle : { type: 'name' } }}\n    </ng-container>\n    <ng-container\n      *ngIf=\"!['name', 'cm:name', 'title', 'cm:title', 'cclom:title'].includes(item.name)\"\n    >\n      <ng-container\n        *ngIf=\"DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1\"\n      >\n        {{ displayName$ | async }}\n      </ng-container>\n      <ng-container *ngIf=\"DATE_FIELDS.includes(item.name)\">\n        {{\n          ($any(getNode()).properties[item.name + '_LONG']?.[0] || $any(getNode()).properties[item.name]?.[0])\n            | formatDate: { async: true, time: true, relative: true }\n            | async\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"VCARD_FIELDS.includes(item.name)\">\n        {{\n          $any(getNode()).properties[item.name]\n            ? ($any(getNode()).properties[item.name] | vcardName)\n            : ''\n        }}\n      </ng-container>\n    </ng-container>\n  </span>\n</ng-container>\n", styles: [".type-danger{color:var(--warning)}span{display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: CheckTextOverflowDirective, selector: "[esCheckTextOverflow]", inputs: ["esCheckTextOverflow"], exportAs: ["esCheckTextOverflow"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ListNodeWorkflowComponent, selector: "es-list-node-workflow" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: FormatDatePipe, name: "formatDate" }, { kind: "pipe", type: FormatSizePipe, name: "formatSize" }, { kind: "pipe", type: NodeImageSizePipe, name: "NodeImageSize" }, { kind: "pipe", type: NodePersonNamePipe, name: "nodePersonName" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: VCardNamePipe, name: "vcardName" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NodeSourcePipe, name: "appNodeSource" }, { kind: "pipe", type: FormatDurationPipe, name: "formatDuration" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListTextComponent, deps: [{ token: NodeHelperService }, { token: i1.MdsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListTextComponent, isStandalone: false, selector: "es-list-text", usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"item.config?.showLabel\">\n  {{ getI18n(item) | translate }}\n</label>\n<ng-container *ngIf=\"item.type === 'ORG' || item.type === 'GROUP'\">\n  <ng-container [ngSwitch]=\"item.name\">\n    <span *ngSwitchCase=\"'displayName'\" [class.type-danger]=\"isDangerousGroup()\">\n      {{ $any(getNode()).profile?.displayName || $any(getNode()).authorityName }}\n    </span>\n    <span *ngSwitchCase=\"'groupType'\">\n      {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile?.groupType | translate }}\n    </span>\n    <span *ngSwitchDefault>\n      {{ $any(getNode())[item.name] }}\n    </span>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"item.type === 'USER'\">\n  <span *ngIf=\"isUserProfileAttribute(item.name)\">\n    {{ $any(getNode()).profile?.[item.name] }}\n  </span>\n  <span *ngIf=\"item.name === 'status'\">\n    {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}\n  </span>\n  <span *ngIf=\"!isUserProfileAttribute(item.name) && item.name !== 'status'\">\n    {{ $any(getNode())[item.name] }}\n  </span>\n</ng-container>\n<ng-container [ngSwitch]=\"item.name\" *ngIf=\"item.type === 'EVENT' || item.type === 'SHARE'\">\n  <span *ngSwitchCase=\"'eventType'\">\n    {{\n      'EVENT.TYPE.' + $any(getNode()).eventType\n        | translate : { fallback: $any(getNode()).eventType }\n    }}\n  </span>\n  <span *ngSwitchCase=\"'timestamp'\">\n    {{\n      $any(getNode()).timestamp | formatDate : { async: true, time: true, relative: true } | async\n    }}\n  </span>\n</ng-container>\n<ng-container\n  [ngSwitch]=\"item.name\"\n  *ngIf=\"item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'\"\n>\n  <span *ngSwitchCase=\"'name'\">\n    {{ $any(getNode()).name }}\n  </span>\n  <span\n    *ngSwitchCase=\"'mediatype'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}\n  </span>\n  <span *ngSwitchCase=\"'size'\" [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\">\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()).size | formatSize }}\n  </span>\n  <span\n    *ngSwitchCase=\"'dimensions'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()) | NodeImageSize }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:wf_status'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <es-list-node-workflow\n      [item]=\"item\"\n      [node]=\"node\"\n      [provideLabel]=\"false\"\n    ></es-list-node-workflow>\n    <!--<span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}-->\n  </span>\n  <span\n    *ngSwitchCase=\"'cm:creator'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()).createdBy | nodePersonName }}\n  </span>\n  <span\n    *ngSwitchCase=\"'cm:modifier'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.cm:modifier' | translate }}:</span\n    >\n    {{ $any(getNode()).modifiedBy | nodePersonName }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:replicationsource'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:replicationsource' | translate }}:</span\n    >\n    {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource : { mode: 'text' } }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:commonlicense_key'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span\n    >\n    <ng-container *ngIf=\"$any(getNode()).properties['ccm:commonlicense_key'] as license\">\n      {{\n        license[0] === 'CUSTOM'\n          ? $any(getNode()).properties['cclom:rights_description']\n          : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']\n            | translate : { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })\n      }}\n    </ng-container>\n    <ng-container *ngIf=\"!$any(getNode()).properties['ccm:commonlicense_key']\">\n      {{ 'LICENSE.NAMES.NONE' | translate }}\n    </ng-container>\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:educationaltypicalagerange'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span\n    >\n    <ng-container\n      *ngIf=\"\n        $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||\n        $any(getNode()).properties['ccm:educationaltypicalagerange_to']\n      \"\n    >\n      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -\n      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}\n    </ng-container>\n  </span>\n  <span\n    *ngSwitchCase=\"'cclom:duration'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.cclom:duration' | translate }}:</span\n    >\n    {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:collection_proposal_status'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span\n    >\n    <!-- use node instead of getNode() to access the raw proposal data! -->\n    {{\n      'PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]\n        | translate: { fallback: '' }\n    }}\n  </span>\n  <span\n    *ngSwitchDefault\n    esCheckTextOverflow\n    #text=\"esCheckTextOverflow\"\n    [matTooltip]=\"\n      provideLabel ? (getI18n(item) | translate) : text.hasTextOverflow() ? content.innerText : null\n    \"\n    #content\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    <ng-container *ngIf=\"['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n      {{ $any(getNode()) | nodeTitle }}\n    </ng-container>\n    <ng-container *ngIf=\"['name', 'cm:name'].includes(item.name)\">\n      {{ $any(getNode()) | nodeTitle : { type: 'name' } }}\n    </ng-container>\n    <ng-container\n      *ngIf=\"!['name', 'cm:name', 'title', 'cm:title', 'cclom:title'].includes(item.name)\"\n    >\n      <ng-container\n        *ngIf=\"DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1\"\n      >\n        {{ displayName$ | async }}\n      </ng-container>\n      <ng-container *ngIf=\"DATE_FIELDS.includes(item.name)\">\n        {{\n          ($any(getNode()).properties[item.name + '_LONG']?.[0] || $any(getNode()).properties[item.name]?.[0])\n            | formatDate: { async: true, time: true, relative: true }\n            | async\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"VCARD_FIELDS.includes(item.name)\">\n        {{\n          $any(getNode()).properties[item.name]\n            ? ($any(getNode()).properties[item.name] | vcardName)\n            : ''\n        }}\n      </ng-container>\n    </ng-container>\n  </span>\n</ng-container>\n", styles: [".type-danger{color:var(--warning)}span{display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: CheckTextOverflowDirective, selector: "[esCheckTextOverflow]", inputs: ["esCheckTextOverflow"], exportAs: ["esCheckTextOverflow"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ListNodeWorkflowComponent, selector: "es-list-node-workflow" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: FormatDatePipe, name: "formatDate" }, { kind: "pipe", type: FormatSizePipe, name: "formatSize" }, { kind: "pipe", type: NodeImageSizePipe, name: "NodeImageSize" }, { kind: "pipe", type: NodePersonNamePipe, name: "nodePersonName" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: VCardNamePipe, name: "vcardName" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NodeSourcePipe, name: "appNodeSource" }, { kind: "pipe", type: FormatDurationPipe, name: "formatDuration" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-list-text', standalone: false, template: "<label *ngIf=\"item.config?.showLabel\">\n  {{ getI18n(item) | translate }}\n</label>\n<ng-container *ngIf=\"item.type === 'ORG' || item.type === 'GROUP'\">\n  <ng-container [ngSwitch]=\"item.name\">\n    <span *ngSwitchCase=\"'displayName'\" [class.type-danger]=\"isDangerousGroup()\">\n      {{ $any(getNode()).profile?.displayName || $any(getNode()).authorityName }}\n    </span>\n    <span *ngSwitchCase=\"'groupType'\">\n      {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile?.groupType | translate }}\n    </span>\n    <span *ngSwitchDefault>\n      {{ $any(getNode())[item.name] }}\n    </span>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"item.type === 'USER'\">\n  <span *ngIf=\"isUserProfileAttribute(item.name)\">\n    {{ $any(getNode()).profile?.[item.name] }}\n  </span>\n  <span *ngIf=\"item.name === 'status'\">\n    {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}\n  </span>\n  <span *ngIf=\"!isUserProfileAttribute(item.name) && item.name !== 'status'\">\n    {{ $any(getNode())[item.name] }}\n  </span>\n</ng-container>\n<ng-container\n  [ngSwitch]=\"item.name\"\n  *ngIf=\"item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'\"\n>\n  <span *ngSwitchCase=\"'name'\">\n    {{ $any(getNode()).name }}\n  </span>\n  <span\n    *ngSwitchCase=\"'mediatype'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}\n  </span>\n  <span *ngSwitchCase=\"'size'\" [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\">\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()).size | formatSize }}\n  </span>\n  <span\n    *ngSwitchCase=\"'dimensions'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()) | NodeImageSize }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:wf_status'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <es-list-node-workflow\n      [item]=\"item\"\n      [node]=\"node\"\n      [provideLabel]=\"false\"\n    ></es-list-node-workflow>\n    <!--<span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}-->\n  </span>\n  <span\n    *ngSwitchCase=\"'cm:creator'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()).createdBy | nodePersonName }}\n  </span>\n  <span\n    *ngSwitchCase=\"'cm:modifier'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.cm:modifier' | translate }}:</span\n    >\n    {{ $any(getNode()).modifiedBy | nodePersonName }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:replicationsource'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:replicationsource' | translate }}:</span\n    >\n    {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource : { mode: 'text' } }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:commonlicense_key'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span\n    >\n    <ng-container *ngIf=\"$any(getNode()).properties['ccm:commonlicense_key'] as license\">\n      {{\n        license[0] === 'CUSTOM'\n          ? $any(getNode()).properties['cclom:rights_description']\n          : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']\n            | translate : { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })\n      }}\n    </ng-container>\n    <ng-container *ngIf=\"!$any(getNode()).properties['ccm:commonlicense_key']\">\n      {{ 'LICENSE.NAMES.NONE' | translate }}\n    </ng-container>\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:educationaltypicalagerange'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span\n    >\n    <ng-container\n      *ngIf=\"\n        $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||\n        $any(getNode()).properties['ccm:educationaltypicalagerange_to']\n      \"\n    >\n      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -\n      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}\n    </ng-container>\n  </span>\n  <span\n    *ngSwitchCase=\"'cclom:duration'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.cclom:duration' | translate }}:</span\n    >\n    {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:collection_proposal_status'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span\n    >\n    <!-- use node instead of getNode() to access the raw proposal data! -->\n    {{\n      'PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]\n        | translate: { fallback: '' }\n    }}\n  </span>\n  <span\n    *ngSwitchDefault\n    esCheckTextOverflow\n    #text=\"esCheckTextOverflow\"\n    [matTooltip]=\"\n      provideLabel ? (getI18n(item) | translate) : text.hasTextOverflow() ? content.innerText : null\n    \"\n    #content\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    <ng-container *ngIf=\"['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n      {{ $any(getNode()) | nodeTitle }}\n    </ng-container>\n    <ng-container *ngIf=\"['name', 'cm:name'].includes(item.name)\">\n      {{ $any(getNode()) | nodeTitle : { type: 'name' } }}\n    </ng-container>\n    <ng-container\n      *ngIf=\"!['name', 'cm:name', 'title', 'cm:title', 'cclom:title'].includes(item.name)\"\n    >\n      <ng-container\n        *ngIf=\"DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1\"\n      >\n        {{ displayName$ | async }}\n      </ng-container>\n      <ng-container *ngIf=\"DATE_FIELDS.includes(item.name)\">\n        {{\n          ($any(getNode()).properties[item.name + '_LONG']?.[0] || $any(getNode()).properties[item.name]?.[0])\n            | formatDate: { async: true, time: true, relative: true }\n            | async\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"VCARD_FIELDS.includes(item.name)\">\n        {{\n          $any(getNode()).properties[item.name]\n            ? ($any(getNode()).properties[item.name] | vcardName)\n            : ''\n        }}\n      </ng-container>\n    </ng-container>\n  </span>\n</ng-container>\n", styles: [".type-danger{color:var(--warning)}span{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: NodeHelperService }, { type: i2.MdsService }, { type: i0.ChangeDetectorRef }] });
+            args: [{ selector: 'es-list-text', standalone: false, template: "<label *ngIf=\"item.config?.showLabel\">\n  {{ getI18n(item) | translate }}\n</label>\n<ng-container *ngIf=\"item.type === 'ORG' || item.type === 'GROUP'\">\n  <ng-container [ngSwitch]=\"item.name\">\n    <span *ngSwitchCase=\"'displayName'\" [class.type-danger]=\"isDangerousGroup()\">\n      {{ $any(getNode()).profile?.displayName || $any(getNode()).authorityName }}\n    </span>\n    <span *ngSwitchCase=\"'groupType'\">\n      {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile?.groupType | translate }}\n    </span>\n    <span *ngSwitchDefault>\n      {{ $any(getNode())[item.name] }}\n    </span>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"item.type === 'USER'\">\n  <span *ngIf=\"isUserProfileAttribute(item.name)\">\n    {{ $any(getNode()).profile?.[item.name] }}\n  </span>\n  <span *ngIf=\"item.name === 'status'\">\n    {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}\n  </span>\n  <span *ngIf=\"!isUserProfileAttribute(item.name) && item.name !== 'status'\">\n    {{ $any(getNode())[item.name] }}\n  </span>\n</ng-container>\n<ng-container [ngSwitch]=\"item.name\" *ngIf=\"item.type === 'EVENT' || item.type === 'SHARE'\">\n  <span *ngSwitchCase=\"'eventType'\">\n    {{\n      'EVENT.TYPE.' + $any(getNode()).eventType\n        | translate : { fallback: $any(getNode()).eventType }\n    }}\n  </span>\n  <span *ngSwitchCase=\"'timestamp'\">\n    {{\n      $any(getNode()).timestamp | formatDate : { async: true, time: true, relative: true } | async\n    }}\n  </span>\n</ng-container>\n<ng-container\n  [ngSwitch]=\"item.name\"\n  *ngIf=\"item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'\"\n>\n  <span *ngSwitchCase=\"'name'\">\n    {{ $any(getNode()).name }}\n  </span>\n  <span\n    *ngSwitchCase=\"'mediatype'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}\n  </span>\n  <span *ngSwitchCase=\"'size'\" [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\">\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()).size | formatSize }}\n  </span>\n  <span\n    *ngSwitchCase=\"'dimensions'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()) | NodeImageSize }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:wf_status'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <es-list-node-workflow\n      [item]=\"item\"\n      [node]=\"node\"\n      [provideLabel]=\"false\"\n    ></es-list-node-workflow>\n    <!--<span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}-->\n  </span>\n  <span\n    *ngSwitchCase=\"'cm:creator'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    {{ $any(getNode()).createdBy | nodePersonName }}\n  </span>\n  <span\n    *ngSwitchCase=\"'cm:modifier'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.cm:modifier' | translate }}:</span\n    >\n    {{ $any(getNode()).modifiedBy | nodePersonName }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:replicationsource'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:replicationsource' | translate }}:</span\n    >\n    {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource : { mode: 'text' } }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:commonlicense_key'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span\n    >\n    <ng-container *ngIf=\"$any(getNode()).properties['ccm:commonlicense_key'] as license\">\n      {{\n        license[0] === 'CUSTOM'\n          ? $any(getNode()).properties['cclom:rights_description']\n          : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']\n            | translate : { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })\n      }}\n    </ng-container>\n    <ng-container *ngIf=\"!$any(getNode()).properties['ccm:commonlicense_key']\">\n      {{ 'LICENSE.NAMES.NONE' | translate }}\n    </ng-container>\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:educationaltypicalagerange'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span\n    >\n    <ng-container\n      *ngIf=\"\n        $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||\n        $any(getNode()).properties['ccm:educationaltypicalagerange_to']\n      \"\n    >\n      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -\n      {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}\n    </ng-container>\n  </span>\n  <span\n    *ngSwitchCase=\"'cclom:duration'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.cclom:duration' | translate }}:</span\n    >\n    {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}\n  </span>\n  <span\n    *ngSwitchCase=\"'ccm:collection_proposal_status'\"\n    [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n      >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span\n    >\n    <!-- use node instead of getNode() to access the raw proposal data! -->\n    {{\n      'PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]\n        | translate: { fallback: '' }\n    }}\n  </span>\n  <span\n    *ngSwitchDefault\n    esCheckTextOverflow\n    #text=\"esCheckTextOverflow\"\n    [matTooltip]=\"\n      provideLabel ? (getI18n(item) | translate) : text.hasTextOverflow() ? content.innerText : null\n    \"\n    #content\n  >\n    <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n    <ng-container *ngIf=\"['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n      {{ $any(getNode()) | nodeTitle }}\n    </ng-container>\n    <ng-container *ngIf=\"['name', 'cm:name'].includes(item.name)\">\n      {{ $any(getNode()) | nodeTitle : { type: 'name' } }}\n    </ng-container>\n    <ng-container\n      *ngIf=\"!['name', 'cm:name', 'title', 'cm:title', 'cclom:title'].includes(item.name)\"\n    >\n      <ng-container\n        *ngIf=\"DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1\"\n      >\n        {{ displayName$ | async }}\n      </ng-container>\n      <ng-container *ngIf=\"DATE_FIELDS.includes(item.name)\">\n        {{\n          ($any(getNode()).properties[item.name + '_LONG']?.[0] || $any(getNode()).properties[item.name]?.[0])\n            | formatDate: { async: true, time: true, relative: true }\n            | async\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"VCARD_FIELDS.includes(item.name)\">\n        {{\n          $any(getNode()).properties[item.name]\n            ? ($any(getNode()).properties[item.name] | vcardName)\n            : ''\n        }}\n      </ng-container>\n    </ng-container>\n  </span>\n</ng-container>\n", styles: [".type-danger{color:var(--warning)}span{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: NodeHelperService }, { type: i1.MdsService }, { type: i0.ChangeDetectorRef }] });
 
 var ListWidgetType;
 (function (ListWidgetType) {
@@ -5061,6 +5171,7 @@ class NodeEntriesGlobalService {
         this.paginationStrategy = {
             [Scope.WorkspaceList]: 'infinite-scroll',
             [Scope.Search]: 'infinite-scroll',
+            [Scope.EditorialPage]: 'paginator',
             DEFAULT: 'infinite-scroll',
         };
         this.paginatorSizeOptions = {
@@ -5152,7 +5263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class NodeRowComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeRowComponent, isStandalone: false, selector: "es-node-row", inputs: { node: "node", columns: "columns" }, queries: [{ propertyName: "customMetadataRef", first: true, predicate: ["customMetadata"], descendants: true }], ngImport: i0, template: "<div class=\"node-row\" *ngIf=\"node\">\n  <div class=\"icon-bg\">\n    <img\n      [src]=\"node | esNodeIcon | async\"\n      [alt]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n      [matTooltip]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n    />\n  </div>\n  <div class=\"node-data\">\n    <div class=\"node-data-primary\">\n      <es-list-text [node]=\"node\" [item]=\"columns[0]\"> </es-list-text>\n    </div>\n    <div class=\"node-data-secondary\">\n      <es-list-text\n        *ngFor=\"let column of columns.slice(1)\"\n        [node]=\"node\"\n        [item]=\"column\"\n        [provideLabel]=\"true\"\n      ></es-list-text>\n      <ng-container *ngTemplateOutlet=\"customMetadataRef; context: { node: node }\"></ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".node-row{width:100%;display:grid;grid-template-columns:var(--tableIconSize) auto;grid-gap:10px;align-items:center;padding:10px;white-space:normal}.node-row .node-data{flex-grow:1;display:flex;flex-direction:column}.node-row .node-data .node-data-primary{font-weight:700;padding-bottom:5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.25em;max-height:1.25em;-webkit-line-clamp:1;-webkit-box-orient:vertical}.node-row .node-data .node-data-secondary{color:var(--textLight);display:flex;justify-content:space-between}.node-row .icon-bg{background-color:rgb(var(--palette-foreground-text-dark));border-radius:50%;width:var(--tableIconSize);height:var(--tableIconSize)!important;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.node-row .icon-bg img,.node-row .icon-bg i{width:50%;z-index:0}.node-row .icon-bg i{color:rgb(var(--palette-foreground-text));font-size:20px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ListTextComponent, selector: "es-list-text" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeIconPipe, name: "esNodeIcon" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeRowComponent, isStandalone: false, selector: "es-node-row", inputs: { node: "node", columns: "columns" }, queries: [{ propertyName: "customMetadataRef", first: true, predicate: ["customMetadata"], descendants: true }], ngImport: i0, template: "<div class=\"node-row\" *ngIf=\"node\">\n  <div class=\"icon-bg\">\n    <img\n      [src]=\"node | esNodeIcon | async\"\n      [alt]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n      [matTooltip]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n    />\n  </div>\n  <div class=\"node-data\">\n    <div class=\"node-data-primary\">\n      <es-list-text [node]=\"node\" [item]=\"columns[0]\"> </es-list-text>\n    </div>\n    <div class=\"node-data-secondary\">\n      <es-list-text\n        *ngFor=\"let column of columns.slice(1)\"\n        [node]=\"node\"\n        [item]=\"column\"\n        [provideLabel]=\"true\"\n      ></es-list-text>\n      <ng-container *ngTemplateOutlet=\"customMetadataRef; context: { node: node }\"></ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".node-row{width:100%;display:grid;grid-template-columns:var(--tableIconSize) auto;grid-gap:10px;align-items:center;padding:10px;white-space:normal}.node-row .node-data{flex-grow:1;display:flex;flex-direction:column}.node-row .node-data .node-data-primary{font-weight:700;padding-bottom:5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.25em;max-height:1.25em;-webkit-line-clamp:1;-webkit-box-orient:vertical}.node-row .node-data .node-data-secondary{color:var(--textLight);display:flex;justify-content:space-between}.node-row .icon-bg{background-color:rgb(var(--palette-foreground-text-dark));border-radius:50%;width:var(--tableIconSize);height:var(--tableIconSize)!important;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.node-row .icon-bg img,.node-row .icon-bg i{width:50%;z-index:0}.node-row .icon-bg i{color:rgb(var(--palette-foreground-text));font-size:20px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ListTextComponent, selector: "es-list-text" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeIconPipe, name: "esNodeIcon" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeRowComponent, decorators: [{
             type: Component,
@@ -5215,6 +5326,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class I18nConfig {
+    constructor() {
+        /**
+         * shall the user profile be read
+         * If not set, defaults to true
+         */
+        this.obeyUserProfile = true;
+    }
+}
+/**
+ * additional configuration options
+ */
+const I18N_CONFIG = new InjectionToken('I18N_CONFIG');
+
 class AppService {
 }
 
@@ -5428,20 +5553,20 @@ class TranslationsService {
     getLocale() {
         return this.getISOLanguage().replace('_', '-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationsService, deps: [{ token: i2.ConfigService }, { token: i0.Injector }, { token: i2$1.ActivatedRoute, optional: true }, { token: I18N_CONFIG, optional: true }, { token: i1.TranslateService }, { token: i0.ApplicationRef }, { token: AppService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationsService, deps: [{ token: i1.ConfigService }, { token: i0.Injector }, { token: i6.ActivatedRoute, optional: true }, { token: I18N_CONFIG, optional: true }, { token: i1$1.TranslateService }, { token: i0.ApplicationRef }, { token: AppService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i2.ConfigService }, { type: i0.Injector }, { type: i2$1.ActivatedRoute, decorators: [{
+        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i0.Injector }, { type: i6.ActivatedRoute, decorators: [{
                     type: Optional
                 }] }, { type: I18nConfig, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [I18N_CONFIG]
-                }] }, { type: i1.TranslateService }, { type: i0.ApplicationRef }, { type: AppService, decorators: [{
+                }] }, { type: i1$1.TranslateService }, { type: i0.ApplicationRef }, { type: AppService, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -5458,6 +5583,8 @@ class ListItemLabelPipe {
             ORG: 'ORG',
             GROUP: 'GROUP',
             USER: 'USER',
+            EVENT: 'EVENT',
+            SHARE: 'SHARE',
         };
         if (item.label) {
             return rxjs.of(item.label);
@@ -5468,7 +5595,7 @@ class ListItemLabelPipe {
             })));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListItemLabelPipe, deps: [{ token: i1.TranslateService }, { token: TranslationsService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListItemLabelPipe, deps: [{ token: i1$1.TranslateService }, { token: TranslationsService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ListItemLabelPipe, isStandalone: false, name: "esListItemLabel" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListItemLabelPipe, decorators: [{
@@ -5477,7 +5604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     name: 'esListItemLabel',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: TranslationsService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: TranslationsService }] });
 
 var NodeEntriesDisplayType;
 (function (NodeEntriesDisplayType) {
@@ -5559,11 +5686,11 @@ class SortSelectPanelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SortSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SortSelectPanelComponent, isStandalone: false, selector: "es-sort-select-panel", inputs: { active: "active", direction: "direction", columns: "columns", customSortingInProgress: "customSortingInProgress" }, outputs: { sortChange: "sortChange", customSortingInProgressChange: "customSortingInProgressChange" }, ngImport: i0, template: "<mat-slide-toggle\n  *ngIf=\"active === 'ccm:collection_ordered_position'\"\n  [(ngModel)]=\"customSortingInProgress\"\n  (ngModelChange)=\"customSortingInProgressChange.emit($event)\"\n>\n  {{ 'COLLECTIONS.SORT_SLIDER' | translate }}\n</mat-slide-toggle>\n<ng-container *ngIf=\"columns?.length\">\n  <button\n    *ngIf=\"sortDropdown.menu\"\n    [matMenuTriggerFor]=\"sortDropdown.menu\"\n    mat-button\n    color=\"primary\"\n  >\n    <span *ngIf=\"active\">{{ 'NODE.' + active | translate }}</span>\n    <span *ngIf=\"!active\">{{ 'SORT_BY' | translate }}</span>\n    <i\n      *ngIf=\"active && active !== 'ccm:collection_ordered_position'\"\n      [esIcon]=\"'arrow_' + (direction === 'asc' ? 'upward' : 'downward')\"\n    ></i>\n  </button>\n\n  <es-sort-dropdown\n    #sortDropdown\n    [columns]=\"columns\"\n    [sortBy]=\"active\"\n    [sortAscending]=\"direction === 'asc'\"\n    (sort)=\"onSort($event)\"\n  ></es-sort-dropdown>\n</ng-container>\n", styles: [":host{display:flex;justify-content:flex-end;align-items:center}mat-slide-toggle{margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: SortDropdownComponent, selector: "es-sort-dropdown", inputs: ["columns", "sortBy", "sortAscending"], outputs: ["sort"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SortSelectPanelComponent, isStandalone: false, selector: "es-sort-select-panel", inputs: { active: "active", direction: "direction", columns: "columns", customSortingInProgress: "customSortingInProgress" }, outputs: { sortChange: "sortChange", customSortingInProgressChange: "customSortingInProgressChange" }, ngImport: i0, template: "<mat-slide-toggle\n  *ngIf=\"active === 'ccm:collection_ordered_position'\"\n  [(ngModel)]=\"customSortingInProgress\"\n  (ngModelChange)=\"customSortingInProgressChange.emit($event)\"\n>\n  {{ 'COLLECTIONS.SORT_SLIDER' | translate }}\n</mat-slide-toggle>\n<ng-container *ngIf=\"columns?.length\">\n  <button\n    *ngIf=\"sortDropdown.menu\"\n    [matMenuTriggerFor]=\"sortDropdown.menu\"\n    mat-button\n    color=\"primary\"\n  >\n    <span *ngIf=\"active\">{{\n      'NODE_SORT.' + active | translate : { fallback: ('NODE.' + active | translate) }\n    }}</span>\n    <span *ngIf=\"!active\">{{ 'SORT_BY' | translate }}</span>\n    <i\n      *ngIf=\"active && active !== 'ccm:collection_ordered_position'\"\n      [esIcon]=\"'arrow_' + (direction === 'asc' ? 'upward' : 'downward')\"\n    ></i>\n  </button>\n\n  <es-sort-dropdown\n    #sortDropdown\n    [columns]=\"columns\"\n    [sortBy]=\"active\"\n    [sortAscending]=\"direction === 'asc'\"\n    (sort)=\"onSort($event)\"\n  ></es-sort-dropdown>\n</ng-container>\n", styles: [":host{display:flex;justify-content:flex-end;align-items:center}mat-slide-toggle{margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "component", type: SortDropdownComponent, selector: "es-sort-dropdown", inputs: ["columns", "sortBy", "sortAscending"], outputs: ["sort"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SortSelectPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-sort-select-panel', standalone: false, template: "<mat-slide-toggle\n  *ngIf=\"active === 'ccm:collection_ordered_position'\"\n  [(ngModel)]=\"customSortingInProgress\"\n  (ngModelChange)=\"customSortingInProgressChange.emit($event)\"\n>\n  {{ 'COLLECTIONS.SORT_SLIDER' | translate }}\n</mat-slide-toggle>\n<ng-container *ngIf=\"columns?.length\">\n  <button\n    *ngIf=\"sortDropdown.menu\"\n    [matMenuTriggerFor]=\"sortDropdown.menu\"\n    mat-button\n    color=\"primary\"\n  >\n    <span *ngIf=\"active\">{{ 'NODE.' + active | translate }}</span>\n    <span *ngIf=\"!active\">{{ 'SORT_BY' | translate }}</span>\n    <i\n      *ngIf=\"active && active !== 'ccm:collection_ordered_position'\"\n      [esIcon]=\"'arrow_' + (direction === 'asc' ? 'upward' : 'downward')\"\n    ></i>\n  </button>\n\n  <es-sort-dropdown\n    #sortDropdown\n    [columns]=\"columns\"\n    [sortBy]=\"active\"\n    [sortAscending]=\"direction === 'asc'\"\n    (sort)=\"onSort($event)\"\n  ></es-sort-dropdown>\n</ng-container>\n", styles: [":host{display:flex;justify-content:flex-end;align-items:center}mat-slide-toggle{margin-right:10px}\n"] }]
+            args: [{ selector: 'es-sort-select-panel', standalone: false, template: "<mat-slide-toggle\n  *ngIf=\"active === 'ccm:collection_ordered_position'\"\n  [(ngModel)]=\"customSortingInProgress\"\n  (ngModelChange)=\"customSortingInProgressChange.emit($event)\"\n>\n  {{ 'COLLECTIONS.SORT_SLIDER' | translate }}\n</mat-slide-toggle>\n<ng-container *ngIf=\"columns?.length\">\n  <button\n    *ngIf=\"sortDropdown.menu\"\n    [matMenuTriggerFor]=\"sortDropdown.menu\"\n    mat-button\n    color=\"primary\"\n  >\n    <span *ngIf=\"active\">{{\n      'NODE_SORT.' + active | translate : { fallback: ('NODE.' + active | translate) }\n    }}</span>\n    <span *ngIf=\"!active\">{{ 'SORT_BY' | translate }}</span>\n    <i\n      *ngIf=\"active && active !== 'ccm:collection_ordered_position'\"\n      [esIcon]=\"'arrow_' + (direction === 'asc' ? 'upward' : 'downward')\"\n    ></i>\n  </button>\n\n  <es-sort-dropdown\n    #sortDropdown\n    [columns]=\"columns\"\n    [sortBy]=\"active\"\n    [sortAscending]=\"direction === 'asc'\"\n    (sort)=\"onSort($event)\"\n  ></es-sort-dropdown>\n</ng-container>\n", styles: [":host{display:flex;justify-content:flex-end;align-items:center}mat-slide-toggle{margin-right:10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { active: [{
                 type: Input
             }], direction: [{
@@ -5776,6 +5903,12 @@ class NodeEntriesService {
     set gridConfig(value) {
         this.gridConfig$.next(value);
     }
+    get tableConfig() {
+        return this.tableConfig$.value;
+    }
+    set tableConfig(value) {
+        this.tableConfig$.next(value);
+    }
     constructor(uiService, toast, entriesGlobal) {
         this.uiService = uiService;
         this.toast = toast;
@@ -5792,6 +5925,8 @@ class NodeEntriesService {
         this.globalOptionsSubject = new BehaviorSubject([]);
         this.sortSubject = new BehaviorSubject(void 0);
         this.gridConfig$ = new BehaviorSubject(null);
+        this.tableConfig$ = new BehaviorSubject(null);
+        this.showIconColumn = new BehaviorSubject(true);
         this.scrollGradientColor = signal('fff');
     }
     onClicked({ event, ...data }) {
@@ -5918,11 +6053,11 @@ class ColumnChooserComponent {
         this.columnsChange.emit(this.columns);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ColumnChooserComponent, isStandalone: false, selector: "es-column-chooser", inputs: { origin: "origin", columnChooserVisible: "columnChooserVisible", columns: "columns" }, outputs: { columnChooserVisibleChange: "columnChooserVisibleChange", columnsChange: "columnsChange" }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"columnChooserVisible\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayViewportMargin]=\"5\"\n  (backdropClick)=\"columnChooserVisibleChange.emit(false)\"\n  cdkConnectedOverlayBackdropClass=\"column-chooser-backdrop\"\n>\n  <div\n    cdkDropList\n    class=\"column-chooser mat-elevation-z2\"\n    (cdkDropListDropped)=\"columnChooserDrop($event)\"\n  >\n    <div class=\"column-chooser-item\" *ngFor=\"let column of columns; index as index\" cdkDrag>\n      <mat-checkbox\n        [checked]=\"column.visible\"\n        (change)=\"columnChooserToggle(index)\"\n        color=\"primary\"\n      >\n        {{ column | esListItemLabel | async }}\n      </mat-checkbox>\n      <div class=\"drag-handle\" cdkDragHandle>\n        <i esIcon=\"drag_handle\"></i>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".column-chooser{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:auto}.column-chooser-item{border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;background:#fff;font-size:14px;justify-content:space-between}.column-chooser-item mat-checkbox{margin:0 12px}.column-chooser-item .drag-handle{color:#00000080;cursor:move;padding:20px}.column-chooser-backdrop{background:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: i5$2.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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ColumnChooserComponent, isStandalone: false, selector: "es-column-chooser", inputs: { origin: "origin", columnChooserVisible: "columnChooserVisible", columns: "columns" }, outputs: { columnChooserVisibleChange: "columnChooserVisibleChange", columnsChange: "columnsChange" }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"columnChooserVisible\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayMinWidth]=\"250\"\n  [cdkConnectedOverlayViewportMargin]=\"5\"\n  (backdropClick)=\"columnChooserVisibleChange.emit(false)\"\n  cdkConnectedOverlayBackdropClass=\"column-chooser-backdrop\"\n>\n  <div\n    cdkDropList\n    class=\"column-chooser mat-elevation-z2\"\n    (cdkDropListDropped)=\"columnChooserDrop($event)\"\n  >\n    <div class=\"column-chooser-item\" *ngFor=\"let column of columns; index as index\" cdkDrag>\n      <mat-checkbox\n        [checked]=\"column.visible\"\n        (change)=\"columnChooserToggle(index)\"\n        color=\"primary\"\n      >\n        {{ column | esListItemLabel | async }}\n      </mat-checkbox>\n      <div class=\"drag-handle\" cdkDragHandle>\n        <i esIcon=\"drag_handle\"></i>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".column-chooser{max-width:100%;width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:auto}.column-chooser-item{border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;background:#fff;font-size:14px;justify-content:space-between}.column-chooser-item mat-checkbox{margin:0 12px}.column-chooser-item .drag-handle{color:#00000080;cursor:move;padding:20px}.column-chooser-backdrop{background:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "component", type: i5$2.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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-column-chooser', standalone: false, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"columnChooserVisible\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayViewportMargin]=\"5\"\n  (backdropClick)=\"columnChooserVisibleChange.emit(false)\"\n  cdkConnectedOverlayBackdropClass=\"column-chooser-backdrop\"\n>\n  <div\n    cdkDropList\n    class=\"column-chooser mat-elevation-z2\"\n    (cdkDropListDropped)=\"columnChooserDrop($event)\"\n  >\n    <div class=\"column-chooser-item\" *ngFor=\"let column of columns; index as index\" cdkDrag>\n      <mat-checkbox\n        [checked]=\"column.visible\"\n        (change)=\"columnChooserToggle(index)\"\n        color=\"primary\"\n      >\n        {{ column | esListItemLabel | async }}\n      </mat-checkbox>\n      <div class=\"drag-handle\" cdkDragHandle>\n        <i esIcon=\"drag_handle\"></i>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".column-chooser{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:auto}.column-chooser-item{border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;background:#fff;font-size:14px;justify-content:space-between}.column-chooser-item mat-checkbox{margin:0 12px}.column-chooser-item .drag-handle{color:#00000080;cursor:move;padding:20px}.column-chooser-backdrop{background:none}\n"] }]
+            args: [{ selector: 'es-column-chooser', standalone: false, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"columnChooserVisible\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayMinWidth]=\"250\"\n  [cdkConnectedOverlayViewportMargin]=\"5\"\n  (backdropClick)=\"columnChooserVisibleChange.emit(false)\"\n  cdkConnectedOverlayBackdropClass=\"column-chooser-backdrop\"\n>\n  <div\n    cdkDropList\n    class=\"column-chooser mat-elevation-z2\"\n    (cdkDropListDropped)=\"columnChooserDrop($event)\"\n  >\n    <div class=\"column-chooser-item\" *ngFor=\"let column of columns; index as index\" cdkDrag>\n      <mat-checkbox\n        [checked]=\"column.visible\"\n        (change)=\"columnChooserToggle(index)\"\n        color=\"primary\"\n      >\n        {{ column | esListItemLabel | async }}\n      </mat-checkbox>\n      <div class=\"drag-handle\" cdkDragHandle>\n        <i esIcon=\"drag_handle\"></i>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".column-chooser{max-width:100%;width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:auto}.column-chooser-item{border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;background:#fff;font-size:14px;justify-content:space-between}.column-chooser-item mat-checkbox{margin:0 12px}.column-chooser-item .drag-handle{color:#00000080;cursor:move;padding:20px}.column-chooser-backdrop{background:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { origin: [{
                 type: Input
             }], columnChooserVisible: [{
@@ -6162,13 +6297,13 @@ class NodeRatingComponent {
     isFromHomeRepo(node) {
         return this.networkApi.isFromHomeRepository(node);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeRatingComponent, deps: [{ token: Toast }, { token: i2.ConfigService }, { token: i2.NetworkService }, { token: i2.AuthenticationService }, { token: i0.ChangeDetectorRef }, { token: i2.RatingV1Service }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeRatingComponent, isStandalone: false, selector: "es-node-rating", inputs: { node: "node" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission && node.type === 'ccm:io' && isFromHomeRepo(node)\">\n  <div *ngIf=\"mode === 'likes'\" class=\"likes\">\n    <button\n      (click)=\"toogleLike()\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n      mat-icon-button\n      color=\"primary\"\n      matTooltip=\"{{ 'RATING.LIKES' | translate }}\"\n    >\n      <i [esIcon]=\"'edu-thumb_up' + (!node.rating?.user ? '_off' : '')\"></i>\n    </button>\n    <span matTooltip=\"{{ 'RATING.COUNT_LIKES' | translate }}\">{{\n      node.rating?.overall.count\n    }}</span>\n  </div>\n  <div *ngIf=\"mode === 'stars'\" class=\"stars\" mat-icon-button color=\"primary\">\n    <button\n      *ngFor=\"let rating of [1, 2, 3, 4, 5]\"\n      mat-icon-button\n      color=\"primary\"\n      class=\"star\"\n      (click)=\"setRating(rating)\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n      (focus)=\"hoverStar = rating\"\n      (mouseenter)=\"hoverStar = rating\"\n      (mouseleave)=\"hoverStar = 0\"\n      (blur)=\"hoverStar = 0\"\n      [class.star-hover]=\"hoverStar >= rating\"\n    >\n      <i\n        [esIcon]=\"\n          'star' +\n          ((hoverStar ? hoverStar >= rating : getPrimaryRating() >= rating) ? '' : '_border')\n        \"\n        matTooltip=\"{{ 'RATING.STARS_RATE' | translate : { rating: rating } }}\"\n      ></i>\n    </button>\n    <button\n      *ngIf=\"!!node.rating?.user\"\n      mat-icon-button\n      color=\"primary\"\n      class=\"delete\"\n      matTooltip=\"{{ 'RATING.DELETE_RATING' | translate }}\"\n      (click)=\"deleteRating()\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n    >\n      <i esIcon=\"clear\"></i>\n    </button>\n    <span matTooltip=\"{{ 'RATING.COUNT_RATINGS' | translate }}\"\n      >({{ node.rating?.overall.count }})</span\n    >\n  </div>\n</ng-container>\n", styles: [".stars{display:flex;align-items:center}.stars span{padding-left:8px}.likes{display:flex;align-items:center}.mdc-icon-button.mat-primary{color:var(--textLight);display:flex;align-items:center;padding:0}.mdc-icon-button.mat-primary.star,.mdc-icon-button.mat-primary.delete{min-width:unset;width:18px;height:18px}.mdc-icon-button.mat-primary.star i,.mdc-icon-button.mat-primary.delete i{font-size:17px;line-height:1}.mdc-icon-button.mat-primary.star ::ng-deep .mat-mdc-button-touch-target,.mdc-icon-button.mat-primary.delete ::ng-deep .mat-mdc-button-touch-target{display:none}.mdc-icon-button.mat-primary.star.star-hover,.mdc-icon-button.mat-primary.delete.star-hover{color:var(--colorStarActive)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeRatingComponent, deps: [{ token: Toast }, { token: i1.ConfigService }, { token: i1.NetworkService }, { token: i1.AuthenticationService }, { token: i0.ChangeDetectorRef }, { token: i1.RatingV1Service }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeRatingComponent, isStandalone: false, selector: "es-node-rating", inputs: { node: "node" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission && node.type === 'ccm:io' && isFromHomeRepo(node)\">\n  <div *ngIf=\"mode === 'likes'\" class=\"likes\">\n    <button\n      (click)=\"toogleLike()\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n      mat-icon-button\n      color=\"primary\"\n      matTooltip=\"{{ 'RATING.LIKES' | translate }}\"\n    >\n      <i [esIcon]=\"'edu-thumb_up' + (!node.rating?.user ? '_off' : '')\"></i>\n    </button>\n    <span matTooltip=\"{{ 'RATING.COUNT_LIKES' | translate }}\">{{\n      node.rating?.overall.count\n    }}</span>\n  </div>\n  <div *ngIf=\"mode === 'stars'\" class=\"stars\" mat-icon-button color=\"primary\">\n    <button\n      *ngFor=\"let rating of [1, 2, 3, 4, 5]\"\n      mat-icon-button\n      color=\"primary\"\n      class=\"star\"\n      (click)=\"setRating(rating)\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n      (focus)=\"hoverStar = rating\"\n      (mouseenter)=\"hoverStar = rating\"\n      (mouseleave)=\"hoverStar = 0\"\n      (blur)=\"hoverStar = 0\"\n      [class.star-hover]=\"hoverStar >= rating\"\n    >\n      <i\n        [esIcon]=\"\n          'star' +\n          ((hoverStar ? hoverStar >= rating : getPrimaryRating() >= rating) ? '' : '_border')\n        \"\n        matTooltip=\"{{ 'RATING.STARS_RATE' | translate : { rating: rating } }}\"\n      ></i>\n    </button>\n    <button\n      *ngIf=\"!!node.rating?.user\"\n      mat-icon-button\n      color=\"primary\"\n      class=\"delete\"\n      matTooltip=\"{{ 'RATING.DELETE_RATING' | translate }}\"\n      (click)=\"deleteRating()\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n    >\n      <i esIcon=\"clear\"></i>\n    </button>\n    <span matTooltip=\"{{ 'RATING.COUNT_RATINGS' | translate }}\"\n      >({{ node.rating?.overall.count }})</span\n    >\n  </div>\n</ng-container>\n", styles: [".stars{display:flex;align-items:center}.stars span{padding-left:8px}.likes{display:flex;align-items:center}.mdc-icon-button.mat-primary{color:var(--textLight);display:flex;align-items:center;padding:0}.mdc-icon-button.mat-primary.star,.mdc-icon-button.mat-primary.delete{min-width:unset;width:18px;height:18px}.mdc-icon-button.mat-primary.star i,.mdc-icon-button.mat-primary.delete i{font-size:17px;line-height:1}.mdc-icon-button.mat-primary.star ::ng-deep .mat-mdc-button-touch-target,.mdc-icon-button.mat-primary.delete ::ng-deep .mat-mdc-button-touch-target{display:none}.mdc-icon-button.mat-primary.star.star-hover,.mdc-icon-button.mat-primary.delete.star-hover{color:var(--colorStarActive)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeRatingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-node-rating', standalone: false, template: "<ng-container *ngIf=\"hasPermission && node.type === 'ccm:io' && isFromHomeRepo(node)\">\n  <div *ngIf=\"mode === 'likes'\" class=\"likes\">\n    <button\n      (click)=\"toogleLike()\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n      mat-icon-button\n      color=\"primary\"\n      matTooltip=\"{{ 'RATING.LIKES' | translate }}\"\n    >\n      <i [esIcon]=\"'edu-thumb_up' + (!node.rating?.user ? '_off' : '')\"></i>\n    </button>\n    <span matTooltip=\"{{ 'RATING.COUNT_LIKES' | translate }}\">{{\n      node.rating?.overall.count\n    }}</span>\n  </div>\n  <div *ngIf=\"mode === 'stars'\" class=\"stars\" mat-icon-button color=\"primary\">\n    <button\n      *ngFor=\"let rating of [1, 2, 3, 4, 5]\"\n      mat-icon-button\n      color=\"primary\"\n      class=\"star\"\n      (click)=\"setRating(rating)\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n      (focus)=\"hoverStar = rating\"\n      (mouseenter)=\"hoverStar = rating\"\n      (mouseleave)=\"hoverStar = 0\"\n      (blur)=\"hoverStar = 0\"\n      [class.star-hover]=\"hoverStar >= rating\"\n    >\n      <i\n        [esIcon]=\"\n          'star' +\n          ((hoverStar ? hoverStar >= rating : getPrimaryRating() >= rating) ? '' : '_border')\n        \"\n        matTooltip=\"{{ 'RATING.STARS_RATE' | translate : { rating: rating } }}\"\n      ></i>\n    </button>\n    <button\n      *ngIf=\"!!node.rating?.user\"\n      mat-icon-button\n      color=\"primary\"\n      class=\"delete\"\n      matTooltip=\"{{ 'RATING.DELETE_RATING' | translate }}\"\n      (click)=\"deleteRating()\"\n      [disabled]=\"(authenticationService.observeLoginInfo() | async)?.isGuest\"\n    >\n      <i esIcon=\"clear\"></i>\n    </button>\n    <span matTooltip=\"{{ 'RATING.COUNT_RATINGS' | translate }}\"\n      >({{ node.rating?.overall.count }})</span\n    >\n  </div>\n</ng-container>\n", styles: [".stars{display:flex;align-items:center}.stars span{padding-left:8px}.likes{display:flex;align-items:center}.mdc-icon-button.mat-primary{color:var(--textLight);display:flex;align-items:center;padding:0}.mdc-icon-button.mat-primary.star,.mdc-icon-button.mat-primary.delete{min-width:unset;width:18px;height:18px}.mdc-icon-button.mat-primary.star i,.mdc-icon-button.mat-primary.delete i{font-size:17px;line-height:1}.mdc-icon-button.mat-primary.star ::ng-deep .mat-mdc-button-touch-target,.mdc-icon-button.mat-primary.delete ::ng-deep .mat-mdc-button-touch-target{display:none}.mdc-icon-button.mat-primary.star.star-hover,.mdc-icon-button.mat-primary.delete.star-hover{color:var(--colorStarActive)}\n"] }]
-        }], ctorParameters: () => [{ type: Toast }, { type: i2.ConfigService }, { type: i2.NetworkService }, { type: i2.AuthenticationService }, { type: i0.ChangeDetectorRef }, { type: i2.RatingV1Service }], propDecorators: { node: [{
+        }], ctorParameters: () => [{ type: Toast }, { type: i1.ConfigService }, { type: i1.NetworkService }, { type: i1.AuthenticationService }, { type: i0.ChangeDetectorRef }, { type: i1.RatingV1Service }], propDecorators: { node: [{
                 type: Input
             }] } });
 
@@ -6204,11 +6339,11 @@ class PreviewImageComponent {
         canvas.getContext('2d').drawImage(image, 0, 0, width, height);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PreviewImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PreviewImageComponent, isStandalone: false, selector: "es-preview-image", inputs: { node: "node", playAnimation: "playAnimation" }, viewQueries: [{ propertyName: "imageRef", first: true, predicate: ["image"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<div class=\"card-image-backdrop\">\n  <!-- The blur filter does not work with canvas as it does with img on Chrome, so we go for a black\n  background for now. -->\n  <!-- <canvas *ngIf=\"showCanvas\" #backdropCanvas role=\"presentation\" aria-hidden=\"true\"></canvas> -->\n  <img\n    [src]=\"node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async\"\n    alt=\"\"\n    *ngIf=\"!replacedWithStatic\"\n  />\n</div>\n\n<canvas *ngIf=\"showCanvas\" #canvas role=\"presentation\" aria-hidden=\"true\"></canvas>\n<img\n  (load)=\"onImageLoad($event)\"\n  #image\n  [src]=\"node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async\"\n  alt=\"\"\n  [class.display-none]=\"replacedWithStatic && !playAnimation\"\n/>\n", styles: [":host{position:relative;overflow:hidden}.card-image-backdrop{position:absolute;width:100%;height:100%;background-color:#000}.card-image-backdrop img,.card-image-backdrop canvas{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);z-index:0;overflow:hidden;filter:blur(15px);object-fit:cover;opacity:.7;opacity:1}:host>img,:host>canvas{width:100%;height:100%;object-fit:contain;position:absolute}.display-none{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeImagePipe, name: "esNodeImage" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PreviewImageComponent, isStandalone: false, selector: "es-preview-image", inputs: { node: "node", playAnimation: "playAnimation" }, viewQueries: [{ propertyName: "imageRef", first: true, predicate: ["image"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<div class=\"card-image-backdrop\">\n  <!-- The blur filter does not work with canvas as it does with img on Chrome, so we go for a black\n  background for now. -->\n  <!-- <canvas *ngIf=\"showCanvas\" #backdropCanvas role=\"presentation\" aria-hidden=\"true\"></canvas> -->\n  <img\n    [src]=\"node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async\"\n    alt=\"\"\n    *ngIf=\"!replacedWithStatic\"\n  />\n</div>\n\n<canvas *ngIf=\"showCanvas\" #canvas role=\"presentation\" aria-hidden=\"true\"></canvas>\n<img\n  (load)=\"onImageLoad($event)\"\n  #image\n  [src]=\"node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async\"\n  alt=\"\"\n  [class.display-none]=\"replacedWithStatic && !playAnimation\"\n/>\n", styles: [":host{position:relative;overflow:hidden}.card-image-backdrop{position:absolute;width:100%;height:100%;background-color:#000}.card-image-backdrop img,.card-image-backdrop canvas{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);z-index:0;overflow:hidden;filter:blur(15px);object-fit:cover;opacity:.7;opacity:1}:host>img,:host>canvas{width:100%;height:100%;left:0;object-fit:contain;position:absolute}.display-none{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeImagePipe, name: "esNodeImage" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PreviewImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-preview-image', standalone: false, template: "<div class=\"card-image-backdrop\">\n  <!-- The blur filter does not work with canvas as it does with img on Chrome, so we go for a black\n  background for now. -->\n  <!-- <canvas *ngIf=\"showCanvas\" #backdropCanvas role=\"presentation\" aria-hidden=\"true\"></canvas> -->\n  <img\n    [src]=\"node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async\"\n    alt=\"\"\n    *ngIf=\"!replacedWithStatic\"\n  />\n</div>\n\n<canvas *ngIf=\"showCanvas\" #canvas role=\"presentation\" aria-hidden=\"true\"></canvas>\n<img\n  (load)=\"onImageLoad($event)\"\n  #image\n  [src]=\"node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async\"\n  alt=\"\"\n  [class.display-none]=\"replacedWithStatic && !playAnimation\"\n/>\n", styles: [":host{position:relative;overflow:hidden}.card-image-backdrop{position:absolute;width:100%;height:100%;background-color:#000}.card-image-backdrop img,.card-image-backdrop canvas{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);z-index:0;overflow:hidden;filter:blur(15px);object-fit:cover;opacity:.7;opacity:1}:host>img,:host>canvas{width:100%;height:100%;object-fit:contain;position:absolute}.display-none{display:none}\n"] }]
+            args: [{ selector: 'es-preview-image', standalone: false, template: "<div class=\"card-image-backdrop\">\n  <!-- The blur filter does not work with canvas as it does with img on Chrome, so we go for a black\n  background for now. -->\n  <!-- <canvas *ngIf=\"showCanvas\" #backdropCanvas role=\"presentation\" aria-hidden=\"true\"></canvas> -->\n  <img\n    [src]=\"node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async\"\n    alt=\"\"\n    *ngIf=\"!replacedWithStatic\"\n  />\n</div>\n\n<canvas *ngIf=\"showCanvas\" #canvas role=\"presentation\" aria-hidden=\"true\"></canvas>\n<img\n  (load)=\"onImageLoad($event)\"\n  #image\n  [src]=\"node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async\"\n  alt=\"\"\n  [class.display-none]=\"replacedWithStatic && !playAnimation\"\n/>\n", styles: [":host{position:relative;overflow:hidden}.card-image-backdrop{position:absolute;width:100%;height:100%;background-color:#000}.card-image-backdrop img,.card-image-backdrop canvas{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);z-index:0;overflow:hidden;filter:blur(15px);object-fit:cover;opacity:.7;opacity:1}:host>img,:host>canvas{width:100%;height:100%;left:0;object-fit:contain;position:absolute}.display-none{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { node: [{
                 type: Input
             }], playAnimation: [{
@@ -6238,7 +6373,7 @@ class NodeTypeBadgeComponent {
         return this.nodeEntriesGlobalService.getCustomFieldTemplate({ type: 'NODE', name: CustomFieldSpecialType.type }, this.node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeTypeBadgeComponent, deps: [{ token: NodeHelperService }, { token: NodeEntriesGlobalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeTypeBadgeComponent, isStandalone: false, selector: "es-node-type-badge", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isCollection\">\n  <i\n    [matTooltip]=\"\n      'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n    \"\n    [altText]=\"\n      'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n    \"\n    [esIcon]=\"nodeHelper.getCollectionScopeInfo($any(node)).icon\"\n  ></i>\n</ng-container>\n<ng-container *ngIf=\"!isCollection\">\n  <ng-container *ngIf=\"getCustomTemplate() as ref\">\n    <ng-container *ngTemplateOutlet=\"ref; context: { node: node }\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!getCustomTemplate()\">\n    <img\n      [src]=\"node | esNodeIcon | async\"\n      [alt]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n      [matTooltip]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n    />\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}:host i{font-size:18px;color:#333}:host img{width:18px;height:18px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeIconPipe, name: "esNodeIcon" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeTypeBadgeComponent, isStandalone: false, selector: "es-node-type-badge", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isCollection\">\n  <i\n    [matTooltip]=\"\n      'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n    \"\n    [altText]=\"\n      'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate\n    \"\n    [esIcon]=\"nodeHelper.getCollectionScopeInfo($any(node)).icon\"\n  ></i>\n</ng-container>\n<ng-container *ngIf=\"!isCollection\">\n  <ng-container *ngIf=\"getCustomTemplate() as ref\">\n    <ng-container *ngTemplateOutlet=\"ref; context: { node: node }\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!getCustomTemplate()\">\n    <img\n      [src]=\"node | esNodeIcon | async\"\n      [alt]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n      [matTooltip]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n    />\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}:host i{font-size:18px;color:#333}:host img{width:18px;height:18px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeIconPipe, name: "esNodeIcon" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeTypeBadgeComponent, decorators: [{
             type: Component,
@@ -6290,7 +6425,7 @@ class OptionButtonComponent {
         >
             <i esIcon="{{ option.icon }}" [aria]="false"></i>
         </button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OptionButtonComponent, decorators: [{
             type: Component,
@@ -6341,11 +6476,11 @@ class NodeStatsBadgesComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeStatsBadgesComponent, deps: [{ token: NodeEntriesService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeStatsBadgesComponent, isStandalone: false, selector: "es-node-stats-badges", inputs: { node: "node", backgroundStyle: "backgroundStyle" }, host: { properties: { "attr.backgroundStyle": "this.backgroundStyle" } }, ngImport: i0, template: "<!--\n    <div\n      *ngIf=\"node.aspects?.includes('ccm:published')\"\n      class=\"card-top-bar-published-copy\"\n    >\n      <div class=\"node-published-copy\">\n        <i\n          esIcon=\"content_copy\"\n          [matTooltip]=\"'PUBLISHED_COPY_TOOLTIP' | translate\"\n        ></i>\n      </div>\n    </div>\n    -->\n<div class=\"card-top-bar-comments\">\n  <div\n    class=\"node-comments\"\n    *ngIf=\"node.type === 'ccm:io'\"\n    (click)=\"\n      entriesService?.onClicked({\n        event: $event,\n        element: node,\n        source: ClickSource.Comments\n      })\n    \"\n    [matTooltip]=\"('COMMENTS_MULTIPLE' | translate) + ': ' + node.commentCount\"\n  >\n    <i esIcon=\"comment\"></i>\n    <span>{{ node.commentCount }}</span>\n  </div>\n</div>\n<div class=\"card-top-bar-childobjects\" *ngIf=\"childObjectCount > 0\">\n  <div\n    class=\"childobject-count\"\n    matTooltip=\"{{ 'CHILDOBJECT_COUNT' | translate : { count: childObjectCount + 1 } }}\"\n  >\n    <span>{{ childObjectCount + 1 }}</span\n    ><i esIcon=\"filter_none\"></i>\n  </div>\n</div>\n", styles: [":host{display:flex;gap:15px}.card-top-bar-comments>div,.card-top-bar-published-copy>div,.card-top-bar-childobjects>div{border-radius:15px;display:inline-flex;align-items:center;min-width:35px;min-height:22px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px}:host[backgroundStyle=lighten] .card-top-bar-comments>div,:host[backgroundStyle=lighten] .card-top-bar-published-copy>div,:host[backgroundStyle=lighten] .card-top-bar-childobjects>div{background-color:#ffffffbf}:host[backgroundStyle=darken] .card-top-bar-comments>div,:host[backgroundStyle=darken] .card-top-bar-published-copy>div,:host[backgroundStyle=darken] .card-top-bar-childobjects>div{background-color:#0003}.card-top-bar-comments>div.childobject-count>i,.card-top-bar-published-copy>div.childobject-count>i,.card-top-bar-childobjects>div.childobject-count>i{font-size:13px;margin-left:4px}.card-top-bar-comments>div.node-published-copy,.card-top-bar-published-copy>div.node-published-copy,.card-top-bar-childobjects>div.node-published-copy{min-width:auto}.card-top-bar-comments>div.node-published-copy>i,.card-top-bar-published-copy>div.node-published-copy>i,.card-top-bar-childobjects>div.node-published-copy>i{font-size:13px}.card-top-bar-comments>div.node-comments>i,.card-top-bar-published-copy>div.node-comments>i,.card-top-bar-childobjects>div.node-comments>i{font-size:13px;margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeStatsBadgesComponent, isStandalone: false, selector: "es-node-stats-badges", inputs: { node: "node", backgroundStyle: "backgroundStyle" }, host: { properties: { "attr.backgroundStyle": "this.backgroundStyle" } }, ngImport: i0, template: "<!--\n    <div\n      *ngIf=\"node.aspects?.includes('ccm:published')\"\n      class=\"card-top-bar-published-copy\"\n    >\n      <div class=\"node-published-copy\">\n        <i\n          esIcon=\"content_copy\"\n          [matTooltip]=\"'PUBLISHED_COPY_TOOLTIP' | translate\"\n        ></i>\n      </div>\n    </div>\n    -->\n<div class=\"card-top-bar-comments\">\n  <div\n    class=\"node-comments\"\n    *ngIf=\"node.type === 'ccm:io'\"\n    (click)=\"\n      entriesService?.onClicked({\n        event: $event,\n        element: node,\n        source: ClickSource.Comments\n      })\n    \"\n    [matTooltip]=\"('COMMENTS_MULTIPLE' | translate) + ': ' + node.commentCount\"\n  >\n    <i esIcon=\"comment\"></i>\n    <span>{{ node.commentCount }}</span>\n  </div>\n</div>\n<div class=\"card-top-bar-childobjects\" *ngIf=\"childObjectCount > 0\">\n  <div\n    class=\"childobject-count\"\n    matTooltip=\"{{ 'CHILDOBJECT_COUNT' | translate : { count: childObjectCount + 1 } }}\"\n  >\n    <span>{{ childObjectCount + 1 }}</span\n    ><i esIcon=\"filter_none\"></i>\n  </div>\n</div>\n", styles: [":host{display:flex;gap:15px}.card-top-bar-comments>div,.card-top-bar-published-copy>div,.card-top-bar-childobjects>div{border-radius:15px;display:inline-flex;align-items:center;min-width:35px;min-height:22px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px}:host[backgroundStyle=lighten] .card-top-bar-comments>div,:host[backgroundStyle=lighten] .card-top-bar-published-copy>div,:host[backgroundStyle=lighten] .card-top-bar-childobjects>div{background-color:#ffffffbf}:host[backgroundStyle=darken] .card-top-bar-comments>div,:host[backgroundStyle=darken] .card-top-bar-published-copy>div,:host[backgroundStyle=darken] .card-top-bar-childobjects>div{background-color:#0003}.card-top-bar-comments>div.childobject-count>i,.card-top-bar-published-copy>div.childobject-count>i,.card-top-bar-childobjects>div.childobject-count>i{font-size:12px;margin-left:4px}.card-top-bar-comments>div.node-published-copy,.card-top-bar-published-copy>div.node-published-copy,.card-top-bar-childobjects>div.node-published-copy{min-width:auto}.card-top-bar-comments>div.node-published-copy>i,.card-top-bar-published-copy>div.node-published-copy>i,.card-top-bar-childobjects>div.node-published-copy>i{font-size:12px}.card-top-bar-comments>div.node-comments>i,.card-top-bar-published-copy>div.node-comments>i,.card-top-bar-childobjects>div.node-comments>i{font-size:12px;margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeStatsBadgesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-stats-badges', standalone: false, template: "<!--\n    <div\n      *ngIf=\"node.aspects?.includes('ccm:published')\"\n      class=\"card-top-bar-published-copy\"\n    >\n      <div class=\"node-published-copy\">\n        <i\n          esIcon=\"content_copy\"\n          [matTooltip]=\"'PUBLISHED_COPY_TOOLTIP' | translate\"\n        ></i>\n      </div>\n    </div>\n    -->\n<div class=\"card-top-bar-comments\">\n  <div\n    class=\"node-comments\"\n    *ngIf=\"node.type === 'ccm:io'\"\n    (click)=\"\n      entriesService?.onClicked({\n        event: $event,\n        element: node,\n        source: ClickSource.Comments\n      })\n    \"\n    [matTooltip]=\"('COMMENTS_MULTIPLE' | translate) + ': ' + node.commentCount\"\n  >\n    <i esIcon=\"comment\"></i>\n    <span>{{ node.commentCount }}</span>\n  </div>\n</div>\n<div class=\"card-top-bar-childobjects\" *ngIf=\"childObjectCount > 0\">\n  <div\n    class=\"childobject-count\"\n    matTooltip=\"{{ 'CHILDOBJECT_COUNT' | translate : { count: childObjectCount + 1 } }}\"\n  >\n    <span>{{ childObjectCount + 1 }}</span\n    ><i esIcon=\"filter_none\"></i>\n  </div>\n</div>\n", styles: [":host{display:flex;gap:15px}.card-top-bar-comments>div,.card-top-bar-published-copy>div,.card-top-bar-childobjects>div{border-radius:15px;display:inline-flex;align-items:center;min-width:35px;min-height:22px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px}:host[backgroundStyle=lighten] .card-top-bar-comments>div,:host[backgroundStyle=lighten] .card-top-bar-published-copy>div,:host[backgroundStyle=lighten] .card-top-bar-childobjects>div{background-color:#ffffffbf}:host[backgroundStyle=darken] .card-top-bar-comments>div,:host[backgroundStyle=darken] .card-top-bar-published-copy>div,:host[backgroundStyle=darken] .card-top-bar-childobjects>div{background-color:#0003}.card-top-bar-comments>div.childobject-count>i,.card-top-bar-published-copy>div.childobject-count>i,.card-top-bar-childobjects>div.childobject-count>i{font-size:13px;margin-left:4px}.card-top-bar-comments>div.node-published-copy,.card-top-bar-published-copy>div.node-published-copy,.card-top-bar-childobjects>div.node-published-copy{min-width:auto}.card-top-bar-comments>div.node-published-copy>i,.card-top-bar-published-copy>div.node-published-copy>i,.card-top-bar-childobjects>div.node-published-copy>i{font-size:13px}.card-top-bar-comments>div.node-comments>i,.card-top-bar-published-copy>div.node-comments>i,.card-top-bar-childobjects>div.node-comments>i{font-size:13px;margin-right:4px}\n"] }]
+            args: [{ selector: 'es-node-stats-badges', standalone: false, template: "<!--\n    <div\n      *ngIf=\"node.aspects?.includes('ccm:published')\"\n      class=\"card-top-bar-published-copy\"\n    >\n      <div class=\"node-published-copy\">\n        <i\n          esIcon=\"content_copy\"\n          [matTooltip]=\"'PUBLISHED_COPY_TOOLTIP' | translate\"\n        ></i>\n      </div>\n    </div>\n    -->\n<div class=\"card-top-bar-comments\">\n  <div\n    class=\"node-comments\"\n    *ngIf=\"node.type === 'ccm:io'\"\n    (click)=\"\n      entriesService?.onClicked({\n        event: $event,\n        element: node,\n        source: ClickSource.Comments\n      })\n    \"\n    [matTooltip]=\"('COMMENTS_MULTIPLE' | translate) + ': ' + node.commentCount\"\n  >\n    <i esIcon=\"comment\"></i>\n    <span>{{ node.commentCount }}</span>\n  </div>\n</div>\n<div class=\"card-top-bar-childobjects\" *ngIf=\"childObjectCount > 0\">\n  <div\n    class=\"childobject-count\"\n    matTooltip=\"{{ 'CHILDOBJECT_COUNT' | translate : { count: childObjectCount + 1 } }}\"\n  >\n    <span>{{ childObjectCount + 1 }}</span\n    ><i esIcon=\"filter_none\"></i>\n  </div>\n</div>\n", styles: [":host{display:flex;gap:15px}.card-top-bar-comments>div,.card-top-bar-published-copy>div,.card-top-bar-childobjects>div{border-radius:15px;display:inline-flex;align-items:center;min-width:35px;min-height:22px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px}:host[backgroundStyle=lighten] .card-top-bar-comments>div,:host[backgroundStyle=lighten] .card-top-bar-published-copy>div,:host[backgroundStyle=lighten] .card-top-bar-childobjects>div{background-color:#ffffffbf}:host[backgroundStyle=darken] .card-top-bar-comments>div,:host[backgroundStyle=darken] .card-top-bar-published-copy>div,:host[backgroundStyle=darken] .card-top-bar-childobjects>div{background-color:#0003}.card-top-bar-comments>div.childobject-count>i,.card-top-bar-published-copy>div.childobject-count>i,.card-top-bar-childobjects>div.childobject-count>i{font-size:12px;margin-left:4px}.card-top-bar-comments>div.node-published-copy,.card-top-bar-published-copy>div.node-published-copy,.card-top-bar-childobjects>div.node-published-copy{min-width:auto}.card-top-bar-comments>div.node-published-copy>i,.card-top-bar-published-copy>div.node-published-copy>i,.card-top-bar-childobjects>div.node-published-copy>i{font-size:12px}.card-top-bar-comments>div.node-comments>i,.card-top-bar-published-copy>div.node-comments>i,.card-top-bar-childobjects>div.node-comments>i{font-size:12px;margin-right:4px}\n"] }]
         }], ctorParameters: () => [{ type: NodeEntriesService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { node: [{
@@ -6419,18 +6554,22 @@ class NodeEntriesCardComponent {
             (await this.authenticationService.hasToolpermission(RestConstants.TOOLPERMISSION_RATE_READ)));
     }
     getTemplate(name) {
-        return this.nodeEntriesGlobalService.getCustomFieldTemplate({
+        return this.nodeEntriesGlobalService?.getCustomFieldTemplate({
             type: 'NODE',
             name,
         }, this.node);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesCardComponent, deps: [{ token: NodeEntriesService }, { token: NodeHelperService }, { token: i0.ApplicationRef }, { token: i2.ConfigService }, { token: i2.AuthenticationService }, { token: NodeEntriesTemplatesService }, { token: NodeEntriesGlobalService }, { token: Toast, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesCardComponent, isStandalone: false, selector: "es-node-entries-card", inputs: { dropdown: "dropdown", node: "node" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [class]=\"\n    'grid-card' +\n    (isCollection\n      ? ' grid-card-collection grid-card-collection-scope-' +\n        node.collection.scope +\n        ' grid-card-collection-type-' +\n        node.collection.type\n      : '') +\n    ($any(node).virtual ? ' grid-card-virtual' : '') +\n    ' ' +\n    nodeEntriesGlobalService.getCustomCssClass(node)\n  \"\n  [style.background-color]=\"isCollection ? node.collection.color : null\"\n  [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n  [class.selected]=\"entriesService.selection.isSelected(node)\"\n  (contextmenu)=\"openContextmenu($event, node)\"\n  (keydown.ContextMenu)=\"openContextmenu($event, node)\"\n>\n  <div\n    *ngIf=\"templatesService.overlay\"\n    class=\"card-overlay\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Overlay,\n      })\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n    ></ng-container>\n  </div>\n  <button\n    *ngIf=\"dropdown\"\n    #menuTrigger=\"matMenuTrigger\"\n    mat-button\n    class=\"dropdown-dummy cdk-visually-hidden\"\n    [style.left.px]=\"dropdownLeft\"\n    [style.top.px]=\"dropdownTop\"\n    [matMenuTriggerFor]=\"dropdown.menu\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  ></button>\n  <div class=\"card-top-bar\" [style.background-color]=\"isCollection ? node.collection.color : null\">\n    <div class=\"card-top-bar-collection-color\" *ngIf=\"nodeHelper.isNodeCollection(node)\"></div>\n    <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n    <div *ngIf=\"isCollection && node.collection.pinned\" class=\"card-top-bar-flag\">\n      <i esIcon=\"edu-pin\"></i>\n    </div>\n    <div class=\"card-top-bar-empty\"></div>\n    <es-node-stats-badges [node]=\"node\"></es-node-stats-badges>\n    <div class=\"card-top-bar-checkbox\" *ngIf=\"entriesService.checkbox\">\n      <mat-checkbox\n        [checked]=\"entriesService.selection.isSelected(node)\"\n        (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n        color=\"primary\"\n        aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n      ></mat-checkbox>\n    </div>\n  </div>\n  <es-node-url\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n    mode=\"wrapper\"\n    [node]=\"node\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </es-node-url>\n  <div\n    *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n    matRipple\n    (click)=\"\n      entriesService.onClicked({\n        event: $event,\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n    (dblclick)=\"\n      entriesService.dblClickItem.emit({\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </div>\n  <div class=\"card-options\" *ngIf=\"entriesService.options || showRatings\">\n    <div class=\"card-rating-area\">\n      <es-node-rating [node]=\"node\"></es-node-rating>\n    </div>\n    <div class=\"card-options-area\">\n      <es-option-button\n        *ngFor=\"let option of optionsOnCard()\"\n        class=\"card-options-always\"\n        [option]=\"option\"\n        [node]=\"node\"\n      ></es-option-button>\n      <div class=\"card-options-spacer\"></div>\n      <button\n        *ngIf=\"dropdown\"\n        mat-icon-button\n        color=\"primary\"\n        (click)=\"openMenu(node)\"\n        [matMenuTriggerFor]=\"dropdown.menu\"\n        [attr.aria-label]=\"'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }\"\n        data-test=\"card-options-button\"\n      >\n        <i esIcon=\"more_vert\"></i>\n      </button>\n    </div>\n  </div>\n  <ng-template #image let-playAnimation=\"playAnimation\">\n    <div\n      class=\"card-image-area\"\n      [style.background-color]=\"isCollection ? node.collection.color : null\"\n    >\n      <ng-container *ngIf=\"getTemplate(CustomFieldSpecialType.preview) as ref\">\n        <ng-container *ngTemplateOutlet=\"ref; context: { node: node }\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!getTemplate(CustomFieldSpecialType.preview)\">\n        <es-preview-image\n          *ngIf=\"!(isCollection && node.preview.isIcon)\"\n          [node]=\"node\"\n          [playAnimation]=\"playAnimation\"\n        ></es-preview-image>\n        <div *ngIf=\"isCollection && node.preview.isIcon\" class=\"card-collection-image\">\n          <i esIcon=\"layers\"></i>\n        </div>\n      </ng-container>\n    </div>\n  </ng-template>\n  <ng-template #meta let-link=\"link\">\n    <div class=\"card-meta\">\n      <div\n        *ngFor=\"let displayPart of getVisibleColumns(); let first = first\"\n        class=\"card-meta-row card-meta-row-{{ displayPart.name | lowercase | propertySlug }}\"\n        [class.card-meta-row-primary]=\"first\"\n      >\n        <ng-container *ngIf=\"first\">\n          <es-node-url\n            *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n            [node]=\"node\"\n            #link\n          >\n            <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n          </es-node-url>\n          <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n            <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!first\">\n          <label>\n            {{ displayPart | esListItemLabel | async }}\n          </label>\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 20px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:150px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:40px;font-size:40px;border-radius:50%}.grid-card .card-meta{padding:10px 20px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.grid-card{grid-template-rows:40px auto auto}.grid-card .card-meta .card-meta-row>es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card es-node-url .node-url-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusStateDirective, selector: "[esFocusState]", exportAs: ["esFocusState"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: i5$2.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: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NodeRatingComponent, selector: "es-node-rating", inputs: ["node"] }, { kind: "component", type: PreviewImageComponent, selector: "es-preview-image", inputs: ["node", "playAnimation"] }, { kind: "component", type: NodeTypeBadgeComponent, selector: "es-node-type-badge", inputs: ["node"] }, { kind: "component", type: OptionButtonComponent, selector: "es-option-button", inputs: ["option", "node"] }, { kind: "component", type: NodeStatsBadgesComponent, selector: "es-node-stats-badges", inputs: ["node", "backgroundStyle"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: PropertySlugPipe, name: "propertySlug" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesCardComponent, deps: [{ token: NodeEntriesService }, { token: NodeHelperService }, { token: i0.ApplicationRef }, { token: i1.ConfigService }, { token: i1.AuthenticationService }, { token: NodeEntriesTemplatesService, optional: true }, { token: NodeEntriesGlobalService, optional: true }, { token: Toast, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesCardComponent, isStandalone: false, selector: "es-node-entries-card", inputs: { dropdown: "dropdown", node: "node" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [class]=\"\n    'grid-card' +\n    (isCollection\n      ? ' grid-card-collection grid-card-collection-scope-' +\n        node.collection.scope +\n        ' grid-card-collection-type-' +\n        node.collection.type\n      : '') +\n    ($any(node).virtual ? ' grid-card-virtual' : '') +\n    ' ' +\n    nodeEntriesGlobalService.getCustomCssClass(node)\n  \"\n  [style.background-color]=\"isCollection ? node.collection.color : null\"\n  [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n  [class.selected]=\"entriesService.selection.isSelected(node)\"\n  (contextmenu)=\"openContextmenu($event, node)\"\n  (keydown.ContextMenu)=\"openContextmenu($event, node)\"\n>\n  <div\n    *ngIf=\"templatesService?.overlay\"\n    class=\"card-overlay\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Overlay,\n      })\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templatesService?.overlay; context: { element: node }\"\n    ></ng-container>\n  </div>\n  <button\n    *ngIf=\"dropdown\"\n    #menuTrigger=\"matMenuTrigger\"\n    mat-button\n    class=\"dropdown-dummy cdk-visually-hidden\"\n    [style.left.px]=\"dropdownLeft\"\n    [style.top.px]=\"dropdownTop\"\n    [matMenuTriggerFor]=\"dropdown.menu\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  ></button>\n  <div class=\"card-top-bar\" [style.background-color]=\"isCollection ? node.collection.color : null\">\n    <div class=\"card-top-bar-collection-color\" *ngIf=\"nodeHelper.isNodeCollection(node)\"></div>\n    <div class=\"card-top-bar-node-type-badge\">\n      <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n    </div>\n    <div *ngIf=\"isCollection && node.collection.pinned\" class=\"card-top-bar-flag\">\n      <i esIcon=\"edu-pin\"></i>\n    </div>\n    <es-node-stats-badges [node]=\"node\"></es-node-stats-badges>\n    <div class=\"card-top-bar-checkbox\" *ngIf=\"entriesService.checkbox\">\n      <mat-checkbox\n        [checked]=\"entriesService.selection.isSelected(node)\"\n        (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n        color=\"primary\"\n        aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n      ></mat-checkbox>\n    </div>\n  </div>\n  <es-node-url\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n    mode=\"wrapper\"\n    [node]=\"node\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </es-node-url>\n  <button\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.Emitter\"\n    class=\"card-body\"\n    matRipple\n    (click)=\"\n      entriesService.onClicked({\n        event: $event,\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n    (dblclick)=\"\n      entriesService.dblClickItem.emit({\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </button>\n  <div\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.None\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </div>\n  <div class=\"card-options\" *ngIf=\"entriesService.options || showRatings\">\n    <div class=\"card-rating-area\">\n      <es-node-rating [node]=\"node\"></es-node-rating>\n    </div>\n    <div class=\"card-options-area\">\n      <es-option-button\n        *ngFor=\"let option of optionsOnCard()\"\n        class=\"card-options-always\"\n        [option]=\"option\"\n        [node]=\"node\"\n      ></es-option-button>\n      <div class=\"card-options-spacer\"></div>\n      <button\n        *ngIf=\"dropdown\"\n        mat-icon-button\n        color=\"primary\"\n        (click)=\"openMenu(node)\"\n        [matMenuTriggerFor]=\"dropdown.menu\"\n        [attr.aria-label]=\"'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }\"\n        data-test=\"card-options-button\"\n      >\n        <i esIcon=\"more_vert\"></i>\n      </button>\n    </div>\n  </div>\n  <ng-template #image let-playAnimation=\"playAnimation\">\n    <div\n      class=\"card-image-area\"\n      [style.background-color]=\"isCollection ? node.collection.color : null\"\n    >\n      <ng-container *ngIf=\"getTemplate(CustomFieldSpecialType.preview) as ref\">\n        <ng-container *ngTemplateOutlet=\"ref; context: { node: node }\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!getTemplate(CustomFieldSpecialType.preview)\">\n        <es-preview-image\n          *ngIf=\"!(isCollection && node.preview.isIcon)\"\n          [node]=\"node\"\n          [playAnimation]=\"playAnimation\"\n        ></es-preview-image>\n        <div *ngIf=\"isCollection && node.preview.isIcon\" class=\"card-collection-image\">\n          <i esIcon=\"layers\"></i>\n        </div>\n      </ng-container>\n    </div>\n  </ng-template>\n  <ng-template #meta let-link=\"link\">\n    <div class=\"card-meta\">\n      <div\n        *ngFor=\"let displayPart of getVisibleColumns(); let first = first\"\n        class=\"card-meta-row card-meta-row-{{ displayPart.name | lowercase | propertySlug }}\"\n        [class.card-meta-row-primary]=\"first\"\n      >\n        <ng-container *ngIf=\"first\">\n          <es-node-url\n            *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n            [node]=\"node\"\n            #link\n          >\n            <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n          </es-node-url>\n          <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n            <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!first\">\n          <label>\n            {{ displayPart | esListItemLabel | async }}\n          </label>\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;min-height:40px;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 20px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-node-type-badge{display:flex;flex-grow:1}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card button.card-body{border:unset;padding:unset;background-color:unset}.grid-card .card-image-area{height:150px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:40px;font-size:40px;border-radius:50%}.grid-card .card-meta{padding:10px 20px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:left}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.grid-card{grid-template-rows:40px auto auto}.grid-card .card-meta .card-meta-row>es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card es-node-url .node-url-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusStateDirective, selector: "[esFocusState]", exportAs: ["esFocusState"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: i5$2.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: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NodeRatingComponent, selector: "es-node-rating", inputs: ["node"] }, { kind: "component", type: PreviewImageComponent, selector: "es-preview-image", inputs: ["node", "playAnimation"] }, { kind: "component", type: NodeTypeBadgeComponent, selector: "es-node-type-badge", inputs: ["node"] }, { kind: "component", type: OptionButtonComponent, selector: "es-option-button", inputs: ["option", "node"] }, { kind: "component", type: NodeStatsBadgesComponent, selector: "es-node-stats-badges", inputs: ["node", "backgroundStyle"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: PropertySlugPipe, name: "propertySlug" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-card', standalone: false, template: "<div\n  [class]=\"\n    'grid-card' +\n    (isCollection\n      ? ' grid-card-collection grid-card-collection-scope-' +\n        node.collection.scope +\n        ' grid-card-collection-type-' +\n        node.collection.type\n      : '') +\n    ($any(node).virtual ? ' grid-card-virtual' : '') +\n    ' ' +\n    nodeEntriesGlobalService.getCustomCssClass(node)\n  \"\n  [style.background-color]=\"isCollection ? node.collection.color : null\"\n  [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n  [class.selected]=\"entriesService.selection.isSelected(node)\"\n  (contextmenu)=\"openContextmenu($event, node)\"\n  (keydown.ContextMenu)=\"openContextmenu($event, node)\"\n>\n  <div\n    *ngIf=\"templatesService.overlay\"\n    class=\"card-overlay\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Overlay,\n      })\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n    ></ng-container>\n  </div>\n  <button\n    *ngIf=\"dropdown\"\n    #menuTrigger=\"matMenuTrigger\"\n    mat-button\n    class=\"dropdown-dummy cdk-visually-hidden\"\n    [style.left.px]=\"dropdownLeft\"\n    [style.top.px]=\"dropdownTop\"\n    [matMenuTriggerFor]=\"dropdown.menu\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  ></button>\n  <div class=\"card-top-bar\" [style.background-color]=\"isCollection ? node.collection.color : null\">\n    <div class=\"card-top-bar-collection-color\" *ngIf=\"nodeHelper.isNodeCollection(node)\"></div>\n    <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n    <div *ngIf=\"isCollection && node.collection.pinned\" class=\"card-top-bar-flag\">\n      <i esIcon=\"edu-pin\"></i>\n    </div>\n    <div class=\"card-top-bar-empty\"></div>\n    <es-node-stats-badges [node]=\"node\"></es-node-stats-badges>\n    <div class=\"card-top-bar-checkbox\" *ngIf=\"entriesService.checkbox\">\n      <mat-checkbox\n        [checked]=\"entriesService.selection.isSelected(node)\"\n        (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n        color=\"primary\"\n        aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n      ></mat-checkbox>\n    </div>\n  </div>\n  <es-node-url\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n    mode=\"wrapper\"\n    [node]=\"node\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </es-node-url>\n  <div\n    *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n    matRipple\n    (click)=\"\n      entriesService.onClicked({\n        event: $event,\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n    (dblclick)=\"\n      entriesService.dblClickItem.emit({\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </div>\n  <div class=\"card-options\" *ngIf=\"entriesService.options || showRatings\">\n    <div class=\"card-rating-area\">\n      <es-node-rating [node]=\"node\"></es-node-rating>\n    </div>\n    <div class=\"card-options-area\">\n      <es-option-button\n        *ngFor=\"let option of optionsOnCard()\"\n        class=\"card-options-always\"\n        [option]=\"option\"\n        [node]=\"node\"\n      ></es-option-button>\n      <div class=\"card-options-spacer\"></div>\n      <button\n        *ngIf=\"dropdown\"\n        mat-icon-button\n        color=\"primary\"\n        (click)=\"openMenu(node)\"\n        [matMenuTriggerFor]=\"dropdown.menu\"\n        [attr.aria-label]=\"'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }\"\n        data-test=\"card-options-button\"\n      >\n        <i esIcon=\"more_vert\"></i>\n      </button>\n    </div>\n  </div>\n  <ng-template #image let-playAnimation=\"playAnimation\">\n    <div\n      class=\"card-image-area\"\n      [style.background-color]=\"isCollection ? node.collection.color : null\"\n    >\n      <ng-container *ngIf=\"getTemplate(CustomFieldSpecialType.preview) as ref\">\n        <ng-container *ngTemplateOutlet=\"ref; context: { node: node }\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!getTemplate(CustomFieldSpecialType.preview)\">\n        <es-preview-image\n          *ngIf=\"!(isCollection && node.preview.isIcon)\"\n          [node]=\"node\"\n          [playAnimation]=\"playAnimation\"\n        ></es-preview-image>\n        <div *ngIf=\"isCollection && node.preview.isIcon\" class=\"card-collection-image\">\n          <i esIcon=\"layers\"></i>\n        </div>\n      </ng-container>\n    </div>\n  </ng-template>\n  <ng-template #meta let-link=\"link\">\n    <div class=\"card-meta\">\n      <div\n        *ngFor=\"let displayPart of getVisibleColumns(); let first = first\"\n        class=\"card-meta-row card-meta-row-{{ displayPart.name | lowercase | propertySlug }}\"\n        [class.card-meta-row-primary]=\"first\"\n      >\n        <ng-container *ngIf=\"first\">\n          <es-node-url\n            *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n            [node]=\"node\"\n            #link\n          >\n            <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n          </es-node-url>\n          <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n            <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!first\">\n          <label>\n            {{ displayPart | esListItemLabel | async }}\n          </label>\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 20px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:150px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:40px;font-size:40px;border-radius:50%}.grid-card .card-meta{padding:10px 20px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.grid-card{grid-template-rows:40px auto auto}.grid-card .card-meta .card-meta-row>es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card es-node-url .node-url-wrapper{height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeHelperService }, { type: i0.ApplicationRef }, { type: i2.ConfigService }, { type: i2.AuthenticationService }, { type: NodeEntriesTemplatesService }, { type: NodeEntriesGlobalService }, { type: Toast, decorators: [{
+            args: [{ selector: 'es-node-entries-card', standalone: false, template: "<div\n  [class]=\"\n    'grid-card' +\n    (isCollection\n      ? ' grid-card-collection grid-card-collection-scope-' +\n        node.collection.scope +\n        ' grid-card-collection-type-' +\n        node.collection.type\n      : '') +\n    ($any(node).virtual ? ' grid-card-virtual' : '') +\n    ' ' +\n    nodeEntriesGlobalService.getCustomCssClass(node)\n  \"\n  [style.background-color]=\"isCollection ? node.collection.color : null\"\n  [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n  [class.selected]=\"entriesService.selection.isSelected(node)\"\n  (contextmenu)=\"openContextmenu($event, node)\"\n  (keydown.ContextMenu)=\"openContextmenu($event, node)\"\n>\n  <div\n    *ngIf=\"templatesService?.overlay\"\n    class=\"card-overlay\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Overlay,\n      })\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templatesService?.overlay; context: { element: node }\"\n    ></ng-container>\n  </div>\n  <button\n    *ngIf=\"dropdown\"\n    #menuTrigger=\"matMenuTrigger\"\n    mat-button\n    class=\"dropdown-dummy cdk-visually-hidden\"\n    [style.left.px]=\"dropdownLeft\"\n    [style.top.px]=\"dropdownTop\"\n    [matMenuTriggerFor]=\"dropdown.menu\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  ></button>\n  <div class=\"card-top-bar\" [style.background-color]=\"isCollection ? node.collection.color : null\">\n    <div class=\"card-top-bar-collection-color\" *ngIf=\"nodeHelper.isNodeCollection(node)\"></div>\n    <div class=\"card-top-bar-node-type-badge\">\n      <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n    </div>\n    <div *ngIf=\"isCollection && node.collection.pinned\" class=\"card-top-bar-flag\">\n      <i esIcon=\"edu-pin\"></i>\n    </div>\n    <es-node-stats-badges [node]=\"node\"></es-node-stats-badges>\n    <div class=\"card-top-bar-checkbox\" *ngIf=\"entriesService.checkbox\">\n      <mat-checkbox\n        [checked]=\"entriesService.selection.isSelected(node)\"\n        (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n        color=\"primary\"\n        aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n      ></mat-checkbox>\n    </div>\n  </div>\n  <es-node-url\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n    mode=\"wrapper\"\n    [node]=\"node\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </es-node-url>\n  <button\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.Emitter\"\n    class=\"card-body\"\n    matRipple\n    (click)=\"\n      entriesService.onClicked({\n        event: $event,\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n    (dblclick)=\"\n      entriesService.dblClickItem.emit({\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </button>\n  <div\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.None\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </div>\n  <div class=\"card-options\" *ngIf=\"entriesService.options || showRatings\">\n    <div class=\"card-rating-area\">\n      <es-node-rating [node]=\"node\"></es-node-rating>\n    </div>\n    <div class=\"card-options-area\">\n      <es-option-button\n        *ngFor=\"let option of optionsOnCard()\"\n        class=\"card-options-always\"\n        [option]=\"option\"\n        [node]=\"node\"\n      ></es-option-button>\n      <div class=\"card-options-spacer\"></div>\n      <button\n        *ngIf=\"dropdown\"\n        mat-icon-button\n        color=\"primary\"\n        (click)=\"openMenu(node)\"\n        [matMenuTriggerFor]=\"dropdown.menu\"\n        [attr.aria-label]=\"'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }\"\n        data-test=\"card-options-button\"\n      >\n        <i esIcon=\"more_vert\"></i>\n      </button>\n    </div>\n  </div>\n  <ng-template #image let-playAnimation=\"playAnimation\">\n    <div\n      class=\"card-image-area\"\n      [style.background-color]=\"isCollection ? node.collection.color : null\"\n    >\n      <ng-container *ngIf=\"getTemplate(CustomFieldSpecialType.preview) as ref\">\n        <ng-container *ngTemplateOutlet=\"ref; context: { node: node }\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!getTemplate(CustomFieldSpecialType.preview)\">\n        <es-preview-image\n          *ngIf=\"!(isCollection && node.preview.isIcon)\"\n          [node]=\"node\"\n          [playAnimation]=\"playAnimation\"\n        ></es-preview-image>\n        <div *ngIf=\"isCollection && node.preview.isIcon\" class=\"card-collection-image\">\n          <i esIcon=\"layers\"></i>\n        </div>\n      </ng-container>\n    </div>\n  </ng-template>\n  <ng-template #meta let-link=\"link\">\n    <div class=\"card-meta\">\n      <div\n        *ngFor=\"let displayPart of getVisibleColumns(); let first = first\"\n        class=\"card-meta-row card-meta-row-{{ displayPart.name | lowercase | propertySlug }}\"\n        [class.card-meta-row-primary]=\"first\"\n      >\n        <ng-container *ngIf=\"first\">\n          <es-node-url\n            *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n            [node]=\"node\"\n            #link\n          >\n            <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n          </es-node-url>\n          <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n            <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!first\">\n          <label>\n            {{ displayPart | esListItemLabel | async }}\n          </label>\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;min-height:40px;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 20px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-node-type-badge{display:flex;flex-grow:1}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card button.card-body{border:unset;padding:unset;background-color:unset}.grid-card .card-image-area{height:150px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:40px;font-size:40px;border-radius:50%}.grid-card .card-meta{padding:10px 20px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:left}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.grid-card{grid-template-rows:40px auto auto}.grid-card .card-meta .card-meta-row>es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card es-node-url .node-url-wrapper{height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeHelperService }, { type: i0.ApplicationRef }, { type: i1.ConfigService }, { type: i1.AuthenticationService }, { type: NodeEntriesTemplatesService, decorators: [{
+                    type: Optional
+                }] }, { type: NodeEntriesGlobalService, decorators: [{
+                    type: Optional
+                }] }, { type: Toast, decorators: [{
                     type: Optional
                 }] }], propDecorators: { dropdown: [{
                 type: Input
@@ -6463,11 +6602,11 @@ class NodeEntriesCardSmallComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesCardSmallComponent, deps: [{ token: NodeEntriesService }, { token: NodeHelperService }, { token: NodeEntriesTemplatesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesCardSmallComponent, isStandalone: false, selector: "es-node-entries-card-small", inputs: { node: "node" }, ngImport: i0, template: "<div\n  [class]=\"\n    'grid-card' +\n    (nodeHelper.isNodeCollection(node)\n      ? ' grid-card-collection grid-card-collection-scope-' +\n        node.collection.scope +\n        ' grid-card-collection-type-' +\n        node.collection.type\n      : '') +\n    ($any(node).virtual ? ' grid-card-virtual' : '') +\n    ' ' +\n    (entriesService.singleClickHint === 'dynamic' ? ' dynamic-single-click' : '')\n  \"\n  [style.background-color]=\"nodeHelper.isNodeCollection(node) ? node.collection.color : null\"\n  (contextmenu)=\"openContextmenu($event)\"\n  (keydown.ContextMenu)=\"openContextmenu($event)\"\n>\n  <div\n    *ngIf=\"templatesService.overlay\"\n    class=\"card-overlay\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Overlay,\n      })\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n    ></ng-container>\n  </div>\n  <es-node-url\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n    mode=\"wrapper\"\n    [node]=\"node\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </es-node-url>\n  <ng-container *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n    <ng-container *ngTemplateOutlet=\"image\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #image let-playAnimation=\"playAnimation\">\n  <div\n    class=\"card-image-area\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Preview,\n      })\n    \"\n  >\n    <div *ngIf=\"nodeHelper.isNodeCollection(node) && node.collection.pinned\" class=\"collection-pin\">\n      <i esIcon=\"edu-pin\"></i>\n    </div>\n    <es-preview-image\n      *ngIf=\"!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)\"\n      [node]=\"node\"\n      [playAnimation]=\"playAnimation\"\n    ></es-preview-image>\n    <div\n      *ngIf=\"nodeHelper.isNodeCollection(node) && node.preview.isIcon\"\n      class=\"card-collection-image\"\n    >\n      <i esIcon=\"layers\"></i>\n    </div>\n  </div>\n</ng-template>\n<ng-template #meta>\n  <div\n    class=\"card-meta\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n  >\n    <div\n      *ngFor=\"let displayPart of entriesService.columns; let first = first\"\n      class=\"card-meta-row\"\n    >\n      <ng-container *ngIf=\"first\">\n        <es-node-url\n          *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n          [node]=\"node\"\n          #link\n        >\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </es-node-url>\n        <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!first\">\n        <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container\n    *ngTemplateOutlet=\"templatesService.actionArea; context: { element: node }\"\n  ></ng-container>\n</ng-template>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 15px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:100px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:25px;font-size:25px;border-radius:50%}.grid-card .card-meta{padding:8px 15px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.collection-pin{background:#ffffff80;border-radius:50px;position:absolute;z-index:1;right:10px;top:10px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.collection-pin>i{font-size:12px}.grid-card .card-meta-row ::ng-deep es-node-url a.cdk-keyboard-focused{outline-color:var(--palette-primary-400)}.grid-card{cursor:pointer}.grid-card.grid-card-collection{background-color:rgb(var(--palette-primary-200))}.grid-card .card-meta{background-color:#fffc;padding-bottom:8px}.grid-card .card-meta .card-meta-row:nth-child(1){grid-column:1/3}.grid-card .card-meta .card-meta-row:nth-child(2){justify-self:flex-start}.grid-card .card-meta .card-meta-row:nth-child(2),.grid-card .card-meta .card-meta-row:nth-child(3){grid-row:2;font-size:var(--fontSizeXSmall)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusStateDirective, selector: "[esFocusState]", exportAs: ["esFocusState"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: PreviewImageComponent, selector: "es-preview-image", inputs: ["node", "playAnimation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesCardSmallComponent, isStandalone: false, selector: "es-node-entries-card-small", inputs: { node: "node" }, ngImport: i0, template: "<div\n  [class]=\"\n    'grid-card' +\n    (nodeHelper.isNodeCollection(node)\n      ? ' grid-card-collection grid-card-collection-scope-' +\n        node.collection.scope +\n        ' grid-card-collection-type-' +\n        node.collection.type\n      : '') +\n    ($any(node).virtual ? ' grid-card-virtual' : '') +\n    ' ' +\n    (entriesService.singleClickHint === 'dynamic' ? ' dynamic-single-click' : '')\n  \"\n  [style.background-color]=\"nodeHelper.isNodeCollection(node) ? node.collection.color : null\"\n  (contextmenu)=\"openContextmenu($event)\"\n  (keydown.ContextMenu)=\"openContextmenu($event)\"\n>\n  <div\n    *ngIf=\"templatesService.overlay\"\n    class=\"card-overlay\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Overlay,\n      })\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n    ></ng-container>\n  </div>\n  <es-node-url\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n    mode=\"wrapper\"\n    [node]=\"node\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </es-node-url>\n  <ng-container *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n    <ng-container *ngTemplateOutlet=\"image\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #image let-playAnimation=\"playAnimation\">\n  <div\n    class=\"card-image-area\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Preview,\n      })\n    \"\n  >\n    <div *ngIf=\"nodeHelper.isNodeCollection(node) && node.collection.pinned\" class=\"collection-pin\">\n      <i esIcon=\"edu-pin\"></i>\n    </div>\n    <es-preview-image\n      *ngIf=\"!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)\"\n      [node]=\"node\"\n      [playAnimation]=\"playAnimation\"\n    ></es-preview-image>\n    <div\n      *ngIf=\"nodeHelper.isNodeCollection(node) && node.preview.isIcon\"\n      class=\"card-collection-image\"\n    >\n      <i esIcon=\"layers\"></i>\n    </div>\n  </div>\n</ng-template>\n<ng-template #meta>\n  <div\n    class=\"card-meta\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n  >\n    <div\n      *ngFor=\"let displayPart of entriesService.columns; let first = first\"\n      class=\"card-meta-row\"\n    >\n      <ng-container *ngIf=\"first\">\n        <es-node-url\n          *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n          [node]=\"node\"\n          #link\n        >\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </es-node-url>\n        <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!first\">\n        <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container\n    *ngTemplateOutlet=\"templatesService.actionArea; context: { element: node }\"\n  ></ng-container>\n</ng-template>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;min-height:40px;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 15px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-node-type-badge{display:flex;flex-grow:1}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card button.card-body{border:unset;padding:unset;background-color:unset}.grid-card .card-image-area{height:100px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:25px;font-size:25px;border-radius:50%}.grid-card .card-meta{padding:8px 15px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:left}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.collection-pin{background:#ffffff80;border-radius:50px;position:absolute;z-index:1;right:10px;top:10px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.collection-pin>i{font-size:12px}.grid-card .card-meta-row ::ng-deep es-node-url a.cdk-keyboard-focused{outline-color:var(--palette-primary-400)}.grid-card{cursor:pointer}.grid-card.grid-card-collection{background-color:rgb(var(--palette-primary-200))}.grid-card .card-meta{background-color:#fffc;padding-bottom:8px}.grid-card .card-meta .card-meta-row:nth-child(1){grid-column:1/3}.grid-card .card-meta .card-meta-row:nth-child(2){justify-self:flex-start}.grid-card .card-meta .card-meta-row:nth-child(2),.grid-card .card-meta .card-meta-row:nth-child(3){grid-row:2;font-size:var(--fontSizeXSmall)}.grid-card .card-meta .card-meta-row:nth-child(2) ::ng-deep es-list-text,.grid-card .card-meta .card-meta-row:nth-child(3) ::ng-deep es-list-text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1em;max-height:1em;-webkit-line-clamp:1;-webkit-box-orient:vertical}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusStateDirective, selector: "[esFocusState]", exportAs: ["esFocusState"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: PreviewImageComponent, selector: "es-preview-image", inputs: ["node", "playAnimation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesCardSmallComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-card-small', standalone: false, template: "<div\n  [class]=\"\n    'grid-card' +\n    (nodeHelper.isNodeCollection(node)\n      ? ' grid-card-collection grid-card-collection-scope-' +\n        node.collection.scope +\n        ' grid-card-collection-type-' +\n        node.collection.type\n      : '') +\n    ($any(node).virtual ? ' grid-card-virtual' : '') +\n    ' ' +\n    (entriesService.singleClickHint === 'dynamic' ? ' dynamic-single-click' : '')\n  \"\n  [style.background-color]=\"nodeHelper.isNodeCollection(node) ? node.collection.color : null\"\n  (contextmenu)=\"openContextmenu($event)\"\n  (keydown.ContextMenu)=\"openContextmenu($event)\"\n>\n  <div\n    *ngIf=\"templatesService.overlay\"\n    class=\"card-overlay\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Overlay,\n      })\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n    ></ng-container>\n  </div>\n  <es-node-url\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n    mode=\"wrapper\"\n    [node]=\"node\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </es-node-url>\n  <ng-container *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n    <ng-container *ngTemplateOutlet=\"image\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #image let-playAnimation=\"playAnimation\">\n  <div\n    class=\"card-image-area\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Preview,\n      })\n    \"\n  >\n    <div *ngIf=\"nodeHelper.isNodeCollection(node) && node.collection.pinned\" class=\"collection-pin\">\n      <i esIcon=\"edu-pin\"></i>\n    </div>\n    <es-preview-image\n      *ngIf=\"!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)\"\n      [node]=\"node\"\n      [playAnimation]=\"playAnimation\"\n    ></es-preview-image>\n    <div\n      *ngIf=\"nodeHelper.isNodeCollection(node) && node.preview.isIcon\"\n      class=\"card-collection-image\"\n    >\n      <i esIcon=\"layers\"></i>\n    </div>\n  </div>\n</ng-template>\n<ng-template #meta>\n  <div\n    class=\"card-meta\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n  >\n    <div\n      *ngFor=\"let displayPart of entriesService.columns; let first = first\"\n      class=\"card-meta-row\"\n    >\n      <ng-container *ngIf=\"first\">\n        <es-node-url\n          *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n          [node]=\"node\"\n          #link\n        >\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </es-node-url>\n        <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!first\">\n        <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container\n    *ngTemplateOutlet=\"templatesService.actionArea; context: { element: node }\"\n  ></ng-container>\n</ng-template>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 15px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:100px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:25px;font-size:25px;border-radius:50%}.grid-card .card-meta{padding:8px 15px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.collection-pin{background:#ffffff80;border-radius:50px;position:absolute;z-index:1;right:10px;top:10px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.collection-pin>i{font-size:12px}.grid-card .card-meta-row ::ng-deep es-node-url a.cdk-keyboard-focused{outline-color:var(--palette-primary-400)}.grid-card{cursor:pointer}.grid-card.grid-card-collection{background-color:rgb(var(--palette-primary-200))}.grid-card .card-meta{background-color:#fffc;padding-bottom:8px}.grid-card .card-meta .card-meta-row:nth-child(1){grid-column:1/3}.grid-card .card-meta .card-meta-row:nth-child(2){justify-self:flex-start}.grid-card .card-meta .card-meta-row:nth-child(2),.grid-card .card-meta .card-meta-row:nth-child(3){grid-row:2;font-size:var(--fontSizeXSmall)}\n"] }]
+            args: [{ selector: 'es-node-entries-card-small', standalone: false, template: "<div\n  [class]=\"\n    'grid-card' +\n    (nodeHelper.isNodeCollection(node)\n      ? ' grid-card-collection grid-card-collection-scope-' +\n        node.collection.scope +\n        ' grid-card-collection-type-' +\n        node.collection.type\n      : '') +\n    ($any(node).virtual ? ' grid-card-virtual' : '') +\n    ' ' +\n    (entriesService.singleClickHint === 'dynamic' ? ' dynamic-single-click' : '')\n  \"\n  [style.background-color]=\"nodeHelper.isNodeCollection(node) ? node.collection.color : null\"\n  (contextmenu)=\"openContextmenu($event)\"\n  (keydown.ContextMenu)=\"openContextmenu($event)\"\n>\n  <div\n    *ngIf=\"templatesService.overlay\"\n    class=\"card-overlay\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Overlay,\n      })\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n    ></ng-container>\n  </div>\n  <es-node-url\n    *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n    mode=\"wrapper\"\n    [node]=\"node\"\n    esFocusState\n    #cardFocusState=\"esFocusState\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        image;\n        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n      \"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </es-node-url>\n  <ng-container *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n    <ng-container *ngTemplateOutlet=\"image\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #image let-playAnimation=\"playAnimation\">\n  <div\n    class=\"card-image-area\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Preview,\n      })\n    \"\n  >\n    <div *ngIf=\"nodeHelper.isNodeCollection(node) && node.collection.pinned\" class=\"collection-pin\">\n      <i esIcon=\"edu-pin\"></i>\n    </div>\n    <es-preview-image\n      *ngIf=\"!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)\"\n      [node]=\"node\"\n      [playAnimation]=\"playAnimation\"\n    ></es-preview-image>\n    <div\n      *ngIf=\"nodeHelper.isNodeCollection(node) && node.preview.isIcon\"\n      class=\"card-collection-image\"\n    >\n      <i esIcon=\"layers\"></i>\n    </div>\n  </div>\n</ng-template>\n<ng-template #meta>\n  <div\n    class=\"card-meta\"\n    (click)=\"\n      entriesService.clickItem.emit({\n        element: node,\n        source: ClickSource.Metadata,\n      })\n    \"\n  >\n    <div\n      *ngFor=\"let displayPart of entriesService.columns; let first = first\"\n      class=\"card-meta-row\"\n    >\n      <ng-container *ngIf=\"first\">\n        <es-node-url\n          *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n          [node]=\"node\"\n          #link\n        >\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </es-node-url>\n        <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n          <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!first\">\n        <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container\n    *ngTemplateOutlet=\"templatesService.actionArea; context: { element: node }\"\n  ></ng-container>\n</ng-template>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;min-height:40px;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 15px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-node-type-badge{display:flex;flex-grow:1}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card button.card-body{border:unset;padding:unset;background-color:unset}.grid-card .card-image-area{height:100px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:25px;font-size:25px;border-radius:50%}.grid-card .card-meta{padding:8px 15px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:left}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.collection-pin{background:#ffffff80;border-radius:50px;position:absolute;z-index:1;right:10px;top:10px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.collection-pin>i{font-size:12px}.grid-card .card-meta-row ::ng-deep es-node-url a.cdk-keyboard-focused{outline-color:var(--palette-primary-400)}.grid-card{cursor:pointer}.grid-card.grid-card-collection{background-color:rgb(var(--palette-primary-200))}.grid-card .card-meta{background-color:#fffc;padding-bottom:8px}.grid-card .card-meta .card-meta-row:nth-child(1){grid-column:1/3}.grid-card .card-meta .card-meta-row:nth-child(2){justify-self:flex-start}.grid-card .card-meta .card-meta-row:nth-child(2),.grid-card .card-meta .card-meta-row:nth-child(3){grid-row:2;font-size:var(--fontSizeXSmall)}.grid-card .card-meta .card-meta-row:nth-child(2) ::ng-deep es-list-text,.grid-card .card-meta .card-meta-row:nth-child(3) ::ng-deep es-list-text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1em;max-height:1em;-webkit-line-clamp:1;-webkit-box-orient:vertical}\n"] }]
         }], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeHelperService }, { type: NodeEntriesTemplatesService }], propDecorators: { node: [{
                 type: Input
             }] } });
@@ -6481,11 +6620,11 @@ class NodeEntriesGlobalOptionsComponent {
         return this.entriesService.globalOptionsSubject.pipe(map((options) => options.filter((e) => e.isEnabled)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesGlobalOptionsComponent, deps: [{ token: NodeEntriesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesGlobalOptionsComponent, isStandalone: false, selector: "es-node-entries-global-options", inputs: { displayType: "displayType" }, ngImport: i0, template: "<div\n  *ngIf=\"(getEnabledOptions() | async)?.length\"\n  role=\"listitem\"\n  class=\"global-options\"\n  [class.global-options-small]=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n  [class.global-options-table]=\"displayType === NodeEntriesDisplayType.Table\"\n>\n  <button\n    mat-button\n    *ngFor=\"let option of getEnabledOptions() | async\"\n    (click)=\"option.callback()\"\n    class=\"global-option-btn\"\n    attr.data-test=\"card-button-{{ option.name }}\"\n  >\n    <ng-container *ngTemplateOutlet=\"globalOption; context: { option: option }\"></ng-container>\n  </button>\n</div>\n<ng-template #globalOption let-option=\"option\">\n  <span class=\"global-option\">\n    <i [esIcon]=\"option.icon\"></i>\n    <span class=\"label\">{{ option.name | translate }}</span>\n  </span>\n</ng-template>\n", styles: [":root{--primary: var(--palette-primary-500);--warning: #cd2457;--aiColor: #6d176e;--aiColorText: #fff;--aiColorChip: #fff;--aiColorChipRemove: #555;--aiColorChipBorder: #ddd;--aiColorChipText: var(--aiColor);--tableIconSize: 38px;--textLight: #585858;--textMediumLight: #888;--textMain: #383838;--cardWidth: 240px;--chipsSeperatorLineColor: #e2e2e2;--colorStatusPositive: #40bf8e;--colorStatusNegative: var(--warning);--colorStarActive: #ba7c00;--nodeVirtualColor: #42ca8d;--nodeVirtualColorLight: #b8fcdd;--transitionNormal: .2s;--focusWidth: 2px;--fontSizeXSmall: 85%;--itemSelectedTextColor: var(--palette-primary-700);--listItemSelectedBackground: var(--palette-primary-50);--listItemSelectedBackgroundEffect: linear-gradient( to right, var(--primary) 0, var(--primary) 5px, var(--palette-primary-50) 5px, var(--palette-primary-50) 5px ) no-repeat}.global-options{display:grid;grid-template-columns:auto;grid-template-rows:repeat(auto-fit,minmax(70px,1fr));grid-row-gap:20px;height:100%;min-height:250px}.global-options.global-options-small{min-height:130px}.global-options.global-options-table{min-height:100px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-column-gap:20px}.global-options .global-option-btn{display:flex;height:100%;padding:0}.global-options .global-option{cursor:pointer;display:flex;box-shadow:0 0 5px #0000004d;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;border:3px dashed var(--primary);color:var(--primary)}.global-options .global-option>i{font-size:32px;margin-bottom:5px}.global-options .global-option>.label{cursor:pointer;font-weight:700}.global-options .global-option:hover,.global-options .global-option:focus{background-color:rgb(var(--palette-primary-50))}:host ::ng-deep .global-options .global-option-btn .mdc-button__label{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesGlobalOptionsComponent, isStandalone: false, selector: "es-node-entries-global-options", inputs: { displayType: "displayType" }, ngImport: i0, template: "<div\n  *ngIf=\"(getEnabledOptions() | async)?.length\"\n  role=\"listitem\"\n  class=\"global-options\"\n  [class.global-options-small]=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n  [class.global-options-table]=\"displayType === NodeEntriesDisplayType.Table\"\n>\n  <button\n    mat-button\n    *ngFor=\"let option of getEnabledOptions() | async\"\n    (click)=\"option.callback()\"\n    class=\"global-option-btn\"\n    attr.data-test=\"card-button-{{ option.name }}\"\n  >\n    <ng-container *ngTemplateOutlet=\"globalOption; context: { option: option }\"></ng-container>\n  </button>\n</div>\n<ng-template #globalOption let-option=\"option\">\n  <span class=\"global-option\">\n    <i [esIcon]=\"option.icon\"></i>\n    <span class=\"label\">{{ option.name | translate }}</span>\n  </span>\n</ng-template>\n", styles: [":root{--primary: var(--palette-primary-500);--warning: #cd2457;--aiColor: #2f0b9b;--aiColorText: #fff;--aiColorChip: #fff;--defaultBackground: #fff;--aiColorChipRemove: #555;--aiColorChipBorder: #ddd;--aiColorChipText: var(--aiColor);--tableIconSize: 38px;--textLight: #585858;--textMediumLight: #888;--textMain: #383838;--workspaceTopBarBackground: #383838;--workspaceTopBarFontColor: #fff;--cardWidth: 240px;--borderRadiusCards: 20px;--chipsSeperatorLineColor: #e2e2e2;--colorStatusPositive: #40bf8e;--colorStatusNegative: var(--warning);--colorStarActive: #ba7c00;--nodeVirtualColor: #42ca8d;--nodeVirtualColorLight: #b8fcdd;--transitionNormal: .2s;--focusColor: var(--palette-primary-300);--focusWidth: 2px;--fontSizeXSmall: 85%;--topBarSearchFocusColor: var(--palette-primary-300);--workspaceTopBarSafeBackground: #963a3a;--workspaceTopBarNewAlpha: .1;--itemSelectedTextColor: var(--palette-primary-700);--listItemSelectedBackground: var(--palette-primary-50);--listItemSelectedBackgroundEffect: linear-gradient( to right, var(--primary) 0, var(--primary) 5px, var(--palette-primary-50) 5px, var(--palette-primary-50) 5px ) no-repeat}.global-options{display:grid;grid-template-columns:auto;grid-template-rows:repeat(auto-fit,minmax(70px,1fr));grid-row-gap:20px;height:100%;min-height:250px}.global-options.global-options-small{min-height:130px}.global-options.global-options-table{min-height:100px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-column-gap:20px}.global-options .global-option-btn{display:flex;height:100%;padding:0}.global-options .global-option{cursor:pointer;display:flex;box-shadow:0 0 5px #0000004d;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;border:3px dashed var(--primary);color:var(--primary)}.global-options .global-option>i{font-size:32px;margin-bottom:5px}.global-options .global-option>.label{cursor:pointer;font-weight:700}.global-options .global-option:hover,.global-options .global-option:focus{background-color:rgb(var(--palette-primary-50))}:host ::ng-deep .global-options .global-option-btn .mdc-button__label{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesGlobalOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-global-options', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"(getEnabledOptions() | async)?.length\"\n  role=\"listitem\"\n  class=\"global-options\"\n  [class.global-options-small]=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n  [class.global-options-table]=\"displayType === NodeEntriesDisplayType.Table\"\n>\n  <button\n    mat-button\n    *ngFor=\"let option of getEnabledOptions() | async\"\n    (click)=\"option.callback()\"\n    class=\"global-option-btn\"\n    attr.data-test=\"card-button-{{ option.name }}\"\n  >\n    <ng-container *ngTemplateOutlet=\"globalOption; context: { option: option }\"></ng-container>\n  </button>\n</div>\n<ng-template #globalOption let-option=\"option\">\n  <span class=\"global-option\">\n    <i [esIcon]=\"option.icon\"></i>\n    <span class=\"label\">{{ option.name | translate }}</span>\n  </span>\n</ng-template>\n", styles: [":root{--primary: var(--palette-primary-500);--warning: #cd2457;--aiColor: #6d176e;--aiColorText: #fff;--aiColorChip: #fff;--aiColorChipRemove: #555;--aiColorChipBorder: #ddd;--aiColorChipText: var(--aiColor);--tableIconSize: 38px;--textLight: #585858;--textMediumLight: #888;--textMain: #383838;--cardWidth: 240px;--chipsSeperatorLineColor: #e2e2e2;--colorStatusPositive: #40bf8e;--colorStatusNegative: var(--warning);--colorStarActive: #ba7c00;--nodeVirtualColor: #42ca8d;--nodeVirtualColorLight: #b8fcdd;--transitionNormal: .2s;--focusWidth: 2px;--fontSizeXSmall: 85%;--itemSelectedTextColor: var(--palette-primary-700);--listItemSelectedBackground: var(--palette-primary-50);--listItemSelectedBackgroundEffect: linear-gradient( to right, var(--primary) 0, var(--primary) 5px, var(--palette-primary-50) 5px, var(--palette-primary-50) 5px ) no-repeat}.global-options{display:grid;grid-template-columns:auto;grid-template-rows:repeat(auto-fit,minmax(70px,1fr));grid-row-gap:20px;height:100%;min-height:250px}.global-options.global-options-small{min-height:130px}.global-options.global-options-table{min-height:100px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-column-gap:20px}.global-options .global-option-btn{display:flex;height:100%;padding:0}.global-options .global-option{cursor:pointer;display:flex;box-shadow:0 0 5px #0000004d;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;border:3px dashed var(--primary);color:var(--primary)}.global-options .global-option>i{font-size:32px;margin-bottom:5px}.global-options .global-option>.label{cursor:pointer;font-weight:700}.global-options .global-option:hover,.global-options .global-option:focus{background-color:rgb(var(--palette-primary-50))}:host ::ng-deep .global-options .global-option-btn .mdc-button__label{width:100%;height:100%}\n"] }]
+            args: [{ selector: 'es-node-entries-global-options', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"(getEnabledOptions() | async)?.length\"\n  role=\"listitem\"\n  class=\"global-options\"\n  [class.global-options-small]=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n  [class.global-options-table]=\"displayType === NodeEntriesDisplayType.Table\"\n>\n  <button\n    mat-button\n    *ngFor=\"let option of getEnabledOptions() | async\"\n    (click)=\"option.callback()\"\n    class=\"global-option-btn\"\n    attr.data-test=\"card-button-{{ option.name }}\"\n  >\n    <ng-container *ngTemplateOutlet=\"globalOption; context: { option: option }\"></ng-container>\n  </button>\n</div>\n<ng-template #globalOption let-option=\"option\">\n  <span class=\"global-option\">\n    <i [esIcon]=\"option.icon\"></i>\n    <span class=\"label\">{{ option.name | translate }}</span>\n  </span>\n</ng-template>\n", styles: [":root{--primary: var(--palette-primary-500);--warning: #cd2457;--aiColor: #2f0b9b;--aiColorText: #fff;--aiColorChip: #fff;--defaultBackground: #fff;--aiColorChipRemove: #555;--aiColorChipBorder: #ddd;--aiColorChipText: var(--aiColor);--tableIconSize: 38px;--textLight: #585858;--textMediumLight: #888;--textMain: #383838;--workspaceTopBarBackground: #383838;--workspaceTopBarFontColor: #fff;--cardWidth: 240px;--borderRadiusCards: 20px;--chipsSeperatorLineColor: #e2e2e2;--colorStatusPositive: #40bf8e;--colorStatusNegative: var(--warning);--colorStarActive: #ba7c00;--nodeVirtualColor: #42ca8d;--nodeVirtualColorLight: #b8fcdd;--transitionNormal: .2s;--focusColor: var(--palette-primary-300);--focusWidth: 2px;--fontSizeXSmall: 85%;--topBarSearchFocusColor: var(--palette-primary-300);--workspaceTopBarSafeBackground: #963a3a;--workspaceTopBarNewAlpha: .1;--itemSelectedTextColor: var(--palette-primary-700);--listItemSelectedBackground: var(--palette-primary-50);--listItemSelectedBackgroundEffect: linear-gradient( to right, var(--primary) 0, var(--primary) 5px, var(--palette-primary-50) 5px, var(--palette-primary-50) 5px ) no-repeat}.global-options{display:grid;grid-template-columns:auto;grid-template-rows:repeat(auto-fit,minmax(70px,1fr));grid-row-gap:20px;height:100%;min-height:250px}.global-options.global-options-small{min-height:130px}.global-options.global-options-table{min-height:100px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-column-gap:20px}.global-options .global-option-btn{display:flex;height:100%;padding:0}.global-options .global-option{cursor:pointer;display:flex;box-shadow:0 0 5px #0000004d;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;border:3px dashed var(--primary);color:var(--primary)}.global-options .global-option>i{font-size:32px;margin-bottom:5px}.global-options .global-option>.label{cursor:pointer;font-weight:700}.global-options .global-option:hover,.global-options .global-option:focus{background-color:rgb(var(--palette-primary-50))}:host ::ng-deep .global-options .global-option-btn .mdc-button__label{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: NodeEntriesService }], propDecorators: { displayType: [{
                 type: Input
             }] } });
@@ -6752,11 +6891,11 @@ class NodeEntriesCardGridComponent {
             this.nodeHelperService.isNodeRevoked(node));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesCardGridComponent, deps: [{ token: NodeEntriesService }, { token: NodeEntriesGlobalService }, { token: NodeEntriesTemplatesService }, { token: NodeHelperService }, { token: UIService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesCardGridComponent, isStandalone: false, selector: "es-node-entries-card-grid", inputs: { displayType: "displayType" }, host: { properties: { "style.--scroll-gradient-color": "this.scrollGradientColor" } }, viewQueries: [{ propertyName: "columnChooserTrigger", first: true, predicate: ["columnChooserTrigger"], descendants: true }, { propertyName: "gridTop", first: true, predicate: ["gridTop"], descendants: true, static: true }, { propertyName: "sortPanel", first: true, predicate: SortSelectPanelComponent, descendants: true }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "dropListsQuery", predicate: CdkDropList, descendants: true }, { propertyName: "itemRefs", predicate: ["item"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #gridTop>\n  <button\n    *ngIf=\"entriesService.configureColumns\"\n    mat-icon-button\n    (click)=\"columnChooserVisible$.next(!columnChooserVisible$.value)\"\n    cdkOverlayOrigin\n    #columnChooserTrigger=\"cdkOverlayOrigin\"\n    [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n    [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n  >\n    <i esIcon=\"settings\"></i>\n  </button>\n  <es-sort-select-panel\n    *ngIf=\"entriesService.sort?.allowed\"\n    class=\"order-panel\"\n    [active]=\"entriesService.sort.active\"\n    [direction]=\"entriesService.sort.direction\"\n    [columns]=\"getSortColumns()\"\n    (sortChange)=\"onSortChange($event)\"\n    [(customSortingInProgress)]=\"entriesService.sort.customSortingInProgress\"\n    (customSortingInProgressChange)=\"onCustomSortingInProgressChange()\"\n  ></es-sort-select-panel>\n</ng-template>\n<es-column-chooser\n  *ngIf=\"entriesService.configureColumns\"\n  [(columns)]=\"entriesService.columns\"\n  [columnChooserVisible]=\"columnChooserVisible$ | async\"\n  [origin]=\"columnChooserTrigger\"\n  (columnChooserVisibleChange)=\"columnChooserVisible$.next($event)\"\n></es-column-chooser>\n<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n\n<!-- Do not render the list element (`role=\"list\"` or `li`) when there are no list items. -->\n<ng-container\n  *ngIf=\"(nodes$ | async)?.length > 0 || (entriesService.globalOptionsSubject | async)?.length > 0\"\n>\n  <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,\n  that only allows `li` elements as direct children of `ul` elements. So we would need to use the\n  native elements at all places without any elements between `ul` and `li`. -->\n  <div\n    *ngIf=\"entriesService.sort?.customSortingInProgress\"\n    role=\"list\"\n    class=\"card-grid card-grid-reorder\"\n    cdkDropListGroup\n  >\n    <ng-container *ngIf=\"nodes$ | async as nodes\">\n      <div\n        class=\"card-grid-order-wrapper\"\n        *ngFor=\"let node of nodes; let i = index\"\n        role=\"none\"\n        cdkDropList\n        [cdkDropListConnectedTo]=\"dropLists\"\n        [cdkDropListData]=\"i\"\n      >\n        <es-node-entries-card\n          *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n          #item\n          [node]=\"node\"\n          role=\"listitem\"\n          cdkDrag\n          [cdkDragData]=\"i\"\n          [cdkDragStartDelay]=\"getDragStartDelay()\"\n          cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n          (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n          (cdkDragStarted)=\"onRearrangeDragStarted()\"\n          (cdkDragEnded)=\"onRearrangeDragEnded()\"\n        ></es-node-entries-card>\n        <es-node-entries-card-small\n          *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n          #item\n          [node]=\"node\"\n          role=\"listitem\"\n          cdkDrag\n          [cdkDragData]=\"i\"\n          [cdkDragStartDelay]=\"getDragStartDelay()\"\n          cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n          (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n          (cdkDragStarted)=\"onRearrangeDragStarted()\"\n          (cdkDragEnded)=\"onRearrangeDragEnded()\"\n        ></es-node-entries-card-small>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"card-grid-wrapper\" *ngIf=\"!entriesService.sort?.customSortingInProgress\">\n    <ng-container *ngTemplateOutlet=\"scrollHelper\"></ng-container>\n    <div\n      role=\"list\"\n      class=\"card-grid card-grid-layout-{{ layout }}\"\n      #grid\n      (esBorderBoxObserver)=\"onGridSizeChanges()\"\n      esInfiniteScroll\n      (scroll)=\"updateScrollState()\"\n      (scrolled)=\"!visibleItemsLimited && loadData('scroll')\"\n    >\n      <es-node-entries-global-options\n        *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n        [displayType]=\"displayType\"\n      >\n      </es-node-entries-global-options>\n      <ng-container *ngIf=\"nodes$ | async as nodes\">\n        <div\n          class=\"card-grid-drag-wrapper\"\n          *ngFor=\"let node of nodes; let i = index\"\n          role=\"none\"\n          [esNodesDropTarget]=\"node\"\n          [canDropNodes]=\"canDropNodes\"\n          (nodeDropped)=\"onNodesDropped($event)\"\n          #dropTarget=\"esNodesDropTarget\"\n        >\n          <ng-container *ngIf=\"isCustomTemplate(node)\">\n            <ng-container *ngTemplateOutlet=\"$any(node)\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"!isCustomTemplate(node)\">\n            <es-node-entries-card\n              *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n              #item\n              [node]=\"node\"\n              [dropdown]=\"dropdown\"\n              role=\"listitem\"\n              cdkDrag\n              [cdkDragDisabled]=\"(getDragEnabled() | async) === false\"\n              [cdkDragData]=\"getDragData(node)\"\n              esNodesDrag\n              (cdkDragStarted)=\"onDragStarted(node)\"\n              (cdkDragEnded)=\"onDragEnded()\"\n              [class.card-import-blocked]=\"isBlocked(node)\"\n              [class.selected-when-dragging]=\"\n                isDragging && entriesService.selection.isSelected(node)\n              \"\n            >\n              <ng-container *ngIf=\"entriesService.selection.selected.length > 1\">\n                <es-node-entries-card\n                  *cdkDragPreview\n                  [node]=\"node\"\n                  [matBadge]=\"\n                    entriesService.selection.selected.length > 1\n                      ? entriesService.selection.selected.length\n                      : null\n                  \"\n                  class=\"card-drag-preview\"\n                ></es-node-entries-card>\n              </ng-container>\n            </es-node-entries-card>\n            <es-node-entries-card-small\n              *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n              #item\n              [node]=\"node\"\n              role=\"listitem\"\n              cdkDrag\n              [cdkDragDisabled]=\"(getDragEnabled() | async) === false\"\n              [cdkDragData]=\"[node]\"\n              esNodesDrag\n            >\n            </es-node-entries-card-small>\n          </ng-container>\n          <div\n            *ngIf=\"dropTarget.active?.canDrop?.denyExplicit\"\n            class=\"card-grid-drop-blocked-container\"\n          >\n            <i esIcon=\"cancel\"></i>\n          </div>\n          <div *ngIf=\"dropTarget.active?.canDrop?.accept\" class=\"card-grid-drop-allowed-container\">\n            <i\n              [esIcon]=\"dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'\"\n            ></i>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n<ng-container\n  *ngIf=\"\n    !entriesService.dataSource.isLoading &&\n    entriesService.dataSource.hasMore() &&\n    !visibleItemsLimited &&\n    entriesService.paginationStrategy === 'infinite-scroll' &&\n    layout !== 'scroll'\n  \"\n>\n  <div class=\"load-more\">\n    <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n      <i esIcon=\"refresh\"></i>\n      <span>{{ 'LOAD_MORE' | translate }}</span>\n    </button>\n  </div>\n</ng-container>\n<ng-container\n  *ngIf=\"\n    entriesService.dataSource.isLoading === true ||\n    entriesService.dataSource.isLoading === 'initial' ||\n    (entriesService.dataSource.isLoading === 'page' &&\n      entriesService.paginationStrategy === 'infinite-scroll')\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n</ng-container>\n\n<ng-template #loading>\n  <es-spinner></es-spinner>\n</ng-template>\n<ng-template #scrollHelper>\n  <ng-container *ngIf=\"layout === 'scroll'\">\n    <div\n      class=\"scroll-helper-left\"\n      role=\"presentation\"\n      (click)=\"doScroll('left')\"\n      *ngIf=\"scroll.left\"\n    >\n      <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('left')\">\n        <i esIcon=\"keyboard_arrow_left\" [aria]=\"true\"></i>\n      </button>\n    </div>\n    <div\n      class=\"scroll-helper-right\"\n      role=\"presentation\"\n      (click)=\"doScroll('right')\"\n      *ngIf=\"scroll.right\"\n    >\n      <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('right')\">\n        <i esIcon=\"keyboard_arrow_right\" [aria]=\"true\"></i>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["@keyframes OrderAnimationCards{0%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}to{transform:rotate(-.25deg)}}:host{--scroll-gradient-color: white}.order-panel{margin-left:auto}.load-more{display:flex;justify-content:center}.card-grid-wrapper{position:relative;z-index:0}.card-grid-wrapper .scroll-helper-left,.card-grid-wrapper .scroll-helper-right{position:absolute;width:15%;min-width:60px;max-width:calc(var(--cardWidth) * .4);display:flex;align-items:center;height:calc(100% - 10px);z-index:5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.card-grid-wrapper .scroll-helper-left>button,.card-grid-wrapper .scroll-helper-right>button{background-color:#fff;color:var(--primary);box-shadow:0 0 25px #00000040}.card-grid-wrapper .scroll-helper-left{left:-1.5em;justify-content:flex-start;background:linear-gradient(to left,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-left>button{margin-left:calc(1.5em - 8px)}.card-grid-wrapper .scroll-helper-right{right:-1.5em;justify-content:flex-end;background:linear-gradient(to right,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-right>button{margin-right:calc(1.5em - 8px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardWidth),1fr));grid-column-gap:20px;grid-row-gap:20px;grid-template-rows:auto;padding-block-start:1em;padding-block-end:1em}.card-grid.card-grid-layout-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;grid-auto-flow:column;grid-template-columns:repeat(auto-fit,var(--cardWidth));grid-auto-columns:minmax(var(--cardWidth),1fr);padding:1.5em;margin:-.5em -1.5em 0}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{margin:0 1.5em}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar{height:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-thumb{max-width:20px;border-radius:10px;background-color:var(--primary)}.card-grid.card-grid-layout-scroll>.card-grid-drag-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.card-grid .card-import-blocked ::ng-deep .card-meta{opacity:.75;text-decoration:line-through}.card-grid>.card-grid-drag-wrapper{position:relative}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{position:absolute;z-index:1;inset:0;display:flex;justify-content:center;align-items:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{background:radial-gradient(circle,#fff 30%,#fff0 70%);width:200px;height:200px;font-size:80px;display:flex;align-items:center;justify-content:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i{color:var(--colorStatusPositive)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{color:var(--colorStatusNegative)}.card-grid>.card-grid-drag-wrapper .selected-when-dragging{opacity:.5}.card-grid>.card-grid-drag-wrapper.cdk-drop-list-dragging>*:first-child{display:none}.card-grid.card-grid-reorder>.card-grid-order-wrapper{animation-iteration-count:infinite;animation-duration:.5s;animation-name:OrderAnimationCards}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(2n){animation-delay:0s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(odd){animation-delay:-.25s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(3n){animation-delay:-.125s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(5n){animation-delay:-.0625s}.card-grid.card-grid-reorder>.card-grid-order-wrapper .cdk-drag-placeholder{display:none}.card-drag-preview{width:250px}::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating{transition:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: BorderBoxObserverDirective, selector: "[esBorderBoxObserver]", outputs: ["esBorderBoxObserver"], exportAs: ["borderBoxObserver"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObjects", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[esInfiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollThrottle", "scrollWindow"], outputs: ["scrolled"] }, { kind: "component", type: SpinnerComponent, selector: "es-spinner" }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnChooserComponent, selector: "es-column-chooser", inputs: ["origin", "columnChooserVisible", "columns"], outputs: ["columnChooserVisibleChange", "columnsChange"] }, { kind: "component", type: NodeEntriesCardComponent, selector: "es-node-entries-card", inputs: ["dropdown", "node"] }, { kind: "component", type: NodeEntriesCardSmallComponent, selector: "es-node-entries-card-small", inputs: ["node"] }, { kind: "component", type: SortSelectPanelComponent, selector: "es-sort-select-panel", inputs: ["active", "direction", "columns", "customSortingInProgress"], outputs: ["sortChange", "customSortingInProgressChange"] }, { kind: "directive", type: NodesDragDirective, selector: "[esNodesDrag]" }, { kind: "directive", type: NodesDropTargetDirective, selector: "[esNodesDropTarget]", inputs: ["esNodesDropTarget", "canDropNodes"], outputs: ["nodeDropped"], exportAs: ["esNodesDropTarget"] }, { kind: "component", type: NodeEntriesGlobalOptionsComponent, selector: "es-node-entries-global-options", inputs: ["displayType"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesCardGridComponent, isStandalone: false, selector: "es-node-entries-card-grid", inputs: { displayType: "displayType" }, host: { properties: { "style.--scroll-gradient-color": "this.scrollGradientColor" } }, viewQueries: [{ propertyName: "columnChooserTrigger", first: true, predicate: ["columnChooserTrigger"], descendants: true }, { propertyName: "gridTop", first: true, predicate: ["gridTop"], descendants: true, static: true }, { propertyName: "sortPanel", first: true, predicate: SortSelectPanelComponent, descendants: true }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "dropListsQuery", predicate: CdkDropList, descendants: true }, { propertyName: "itemRefs", predicate: ["item"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #gridTop>\n  <button\n    *ngIf=\"entriesService.configureColumns\"\n    class=\"configure-columns\"\n    mat-icon-button\n    (click)=\"columnChooserVisible$.next(!columnChooserVisible$.value)\"\n    cdkOverlayOrigin\n    #columnChooserTrigger=\"cdkOverlayOrigin\"\n    [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n    [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n  >\n    <i esIcon=\"settings\"></i>\n  </button>\n  <es-sort-select-panel\n    *ngIf=\"entriesService.sort?.allowed\"\n    class=\"order-panel\"\n    [active]=\"entriesService.sort.active\"\n    [direction]=\"entriesService.sort.direction\"\n    [columns]=\"getSortColumns()\"\n    (sortChange)=\"onSortChange($event)\"\n    [(customSortingInProgress)]=\"entriesService.sort.customSortingInProgress\"\n    (customSortingInProgressChange)=\"onCustomSortingInProgressChange()\"\n  ></es-sort-select-panel>\n</ng-template>\n<es-column-chooser\n  *ngIf=\"entriesService.configureColumns\"\n  [(columns)]=\"entriesService.columns\"\n  [columnChooserVisible]=\"columnChooserVisible$ | async\"\n  [origin]=\"columnChooserTrigger\"\n  (columnChooserVisibleChange)=\"columnChooserVisible$.next($event)\"\n></es-column-chooser>\n<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n\n<!-- Do not render the list element (`role=\"list\"` or `li`) when there are no list items. -->\n<ng-container\n  *ngIf=\"\n    (nodes$ | async)?.length > 0 ||\n    ((entriesService.globalOptionsSubject | async)?.length > 0 &&\n      (!entriesService.dataSource.isLoading ||\n        (entriesService.gridConfig$ | async)?.layout !== 'scroll'))\n  \"\n>\n  <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,\n  that only allows `li` elements as direct children of `ul` elements. So we would need to use the\n  native elements at all places without any elements between `ul` and `li`. -->\n  <div\n    *ngIf=\"entriesService.sort?.customSortingInProgress\"\n    role=\"list\"\n    class=\"card-grid card-grid-reorder\"\n    cdkDropListGroup\n  >\n    <ng-container *ngIf=\"nodes$ | async as nodes\">\n      <div\n        class=\"card-grid-order-wrapper\"\n        *ngFor=\"let node of nodes; let i = index\"\n        role=\"none\"\n        cdkDropList\n        [cdkDropListConnectedTo]=\"dropLists\"\n        [cdkDropListData]=\"i\"\n      >\n        <es-node-entries-card\n          *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n          #item\n          [node]=\"node\"\n          role=\"listitem\"\n          cdkDrag\n          [cdkDragData]=\"i\"\n          [cdkDragStartDelay]=\"getDragStartDelay()\"\n          cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n          (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n          (cdkDragStarted)=\"onRearrangeDragStarted()\"\n          (cdkDragEnded)=\"onRearrangeDragEnded()\"\n        ></es-node-entries-card>\n        <es-node-entries-card-small\n          *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n          #item\n          [node]=\"node\"\n          role=\"listitem\"\n          cdkDrag\n          [cdkDragData]=\"i\"\n          [cdkDragStartDelay]=\"getDragStartDelay()\"\n          cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n          (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n          (cdkDragStarted)=\"onRearrangeDragStarted()\"\n          (cdkDragEnded)=\"onRearrangeDragEnded()\"\n        ></es-node-entries-card-small>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    class=\"card-grid-wrapper\"\n    [class.card-grid-wrapper-empty]=\"entriesService.dataSource?.isEmpty()\"\n    *ngIf=\"!entriesService.sort?.customSortingInProgress\"\n  >\n    <ng-container *ngTemplateOutlet=\"scrollHelper\"></ng-container>\n    <div\n      role=\"list\"\n      class=\"card-grid card-grid-layout-{{ layout }}\"\n      #grid\n      (esBorderBoxObserver)=\"onGridSizeChanges()\"\n      esInfiniteScroll\n      (scroll)=\"updateScrollState()\"\n      (scrolled)=\"!visibleItemsLimited && loadData('scroll')\"\n    >\n      <es-node-entries-global-options\n        *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n        [displayType]=\"displayType\"\n      >\n      </es-node-entries-global-options>\n      <ng-container *ngIf=\"nodes$ | async as nodes\">\n        <div\n          class=\"card-grid-drag-wrapper\"\n          *ngFor=\"let node of nodes; let i = index\"\n          role=\"none\"\n          [esNodesDropTarget]=\"node\"\n          [canDropNodes]=\"canDropNodes\"\n          (nodeDropped)=\"onNodesDropped($event)\"\n          #dropTarget=\"esNodesDropTarget\"\n        >\n          <ng-container *ngIf=\"isCustomTemplate(node)\">\n            <ng-container *ngTemplateOutlet=\"$any(node)\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"!isCustomTemplate(node)\">\n            <es-node-entries-card\n              *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n              #item\n              [node]=\"node\"\n              [dropdown]=\"dropdown\"\n              role=\"listitem\"\n              cdkDrag\n              [cdkDragDisabled]=\"(getDragEnabled() | async) === false\"\n              [cdkDragData]=\"getDragData(node)\"\n              esNodesDrag\n              (cdkDragStarted)=\"onDragStarted(node)\"\n              (cdkDragEnded)=\"onDragEnded()\"\n              [class.card-import-blocked]=\"isBlocked(node)\"\n              [class.selected-when-dragging]=\"\n                isDragging && entriesService.selection.isSelected(node)\n              \"\n            >\n              <ng-container *ngIf=\"entriesService.selection.selected.length > 1\">\n                <es-node-entries-card\n                  *cdkDragPreview\n                  [node]=\"node\"\n                  [matBadge]=\"\n                    entriesService.selection.selected.length > 1\n                      ? entriesService.selection.selected.length\n                      : null\n                  \"\n                  class=\"card-drag-preview\"\n                ></es-node-entries-card>\n              </ng-container>\n            </es-node-entries-card>\n            <es-node-entries-card-small\n              *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n              #item\n              [node]=\"node\"\n              role=\"listitem\"\n              cdkDrag\n              [cdkDragDisabled]=\"(getDragEnabled() | async) === false\"\n              [cdkDragData]=\"[node]\"\n              esNodesDrag\n            >\n            </es-node-entries-card-small>\n          </ng-container>\n          <div\n            *ngIf=\"dropTarget.active?.canDrop?.denyExplicit\"\n            class=\"card-grid-drop-blocked-container\"\n          >\n            <i esIcon=\"cancel\"></i>\n          </div>\n          <div *ngIf=\"dropTarget.active?.canDrop?.accept\" class=\"card-grid-drop-allowed-container\">\n            <i\n              [esIcon]=\"dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'\"\n            ></i>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n<ng-container\n  *ngIf=\"\n    !entriesService.dataSource.isLoading &&\n    entriesService.dataSource.hasMore() &&\n    !visibleItemsLimited &&\n    entriesService.paginationStrategy === 'infinite-scroll' &&\n    layout !== 'scroll'\n  \"\n>\n  <div class=\"load-more\">\n    <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n      <i esIcon=\"refresh\"></i>\n      <span>{{ 'LOAD_MORE' | translate }}</span>\n    </button>\n  </div>\n</ng-container>\n<ng-container\n  *ngIf=\"\n    entriesService.dataSource.isLoading === true ||\n    entriesService.dataSource.isLoading === 'initial' ||\n    (entriesService.dataSource.isLoading === 'page' &&\n      entriesService.paginationStrategy === 'infinite-scroll')\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n</ng-container>\n\n<ng-template #loading>\n  <es-spinner></es-spinner>\n</ng-template>\n<ng-template #scrollHelper>\n  <ng-container *ngIf=\"layout === 'scroll'\">\n    <div\n      class=\"scroll-helper-left\"\n      role=\"presentation\"\n      (click)=\"doScroll('left')\"\n      *ngIf=\"scroll.left\"\n    >\n      <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('left')\">\n        <i esIcon=\"keyboard_arrow_left\" [aria]=\"true\"></i>\n      </button>\n    </div>\n    <div\n      class=\"scroll-helper-right\"\n      role=\"presentation\"\n      (click)=\"doScroll('right')\"\n      *ngIf=\"scroll.right\"\n    >\n      <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('right')\">\n        <i esIcon=\"keyboard_arrow_right\" [aria]=\"true\"></i>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["@keyframes OrderAnimationCards{0%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}to{transform:rotate(-.25deg)}}:host{--scroll-gradient-color: white}.order-panel{margin-left:auto}.load-more{display:flex;justify-content:center}.card-grid-wrapper{position:relative;z-index:0}.card-grid-wrapper.card-grid-wrapper-empty{max-width:fit-content}.card-grid-wrapper.card-grid-wrapper-empty .card-grid{margin-right:20px}.card-grid-wrapper .scroll-helper-left,.card-grid-wrapper .scroll-helper-right{position:absolute;width:15%;min-width:60px;max-width:calc(var(--cardWidth) * .4);display:flex;align-items:center;height:calc(100% - 10px);z-index:5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.card-grid-wrapper .scroll-helper-left>button,.card-grid-wrapper .scroll-helper-right>button{background-color:#fff;color:var(--primary);box-shadow:0 0 25px #00000040}.card-grid-wrapper .scroll-helper-left{left:-1.5em;justify-content:flex-start;background:linear-gradient(to left,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-left>button{margin-left:calc(1.5em - 8px)}.card-grid-wrapper .scroll-helper-right{right:-1.5em;justify-content:flex-end;background:linear-gradient(to right,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-right>button{margin-right:calc(1.5em - 8px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardWidth),1fr));grid-column-gap:20px;grid-row-gap:20px;grid-template-rows:auto;padding-block-start:1em;padding-block-end:1em}.card-grid.card-grid-layout-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;grid-auto-flow:column;grid-template-columns:repeat(auto-fit,var(--cardWidth));grid-auto-columns:minmax(var(--cardWidth),1fr);padding:1.5em;margin:-.5em -1.5em 0}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{margin:0 1.5em}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar{height:6px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-thumb{max-width:20px;border-radius:6px;background-color:var(--palette-primary-200)}.card-grid.card-grid-layout-scroll>.card-grid-drag-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.card-grid .card-import-blocked ::ng-deep .card-meta{opacity:.75;text-decoration:line-through}.card-grid>.card-grid-drag-wrapper{position:relative}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{position:absolute;z-index:1;inset:0;display:flex;justify-content:center;align-items:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{background:radial-gradient(circle,#fff 30%,#fff0 70%);width:200px;height:200px;font-size:80px;display:flex;align-items:center;justify-content:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i{color:var(--colorStatusPositive)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{color:var(--colorStatusNegative)}.card-grid>.card-grid-drag-wrapper .selected-when-dragging{opacity:.5}.card-grid>.card-grid-drag-wrapper.cdk-drop-list-dragging>*:first-child{display:none}.card-grid.card-grid-reorder>.card-grid-order-wrapper{animation-iteration-count:infinite;animation-duration:.5s;animation-name:OrderAnimationCards}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(2n){animation-delay:0s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(odd){animation-delay:-.25s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(3n){animation-delay:-.125s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(5n){animation-delay:-.0625s}.card-grid.card-grid-reorder>.card-grid-order-wrapper .cdk-drag-placeholder{display:none}.card-drag-preview{width:250px}.configure-columns{color:var(--textMediumLight)}::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating{transition:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: BorderBoxObserverDirective, selector: "[esBorderBoxObserver]", outputs: ["esBorderBoxObserver"], exportAs: ["borderBoxObserver"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObjects", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[esInfiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollThrottle", "scrollWindow"], outputs: ["scrolled"] }, { kind: "component", type: SpinnerComponent, selector: "es-spinner" }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnChooserComponent, selector: "es-column-chooser", inputs: ["origin", "columnChooserVisible", "columns"], outputs: ["columnChooserVisibleChange", "columnsChange"] }, { kind: "component", type: NodeEntriesCardComponent, selector: "es-node-entries-card", inputs: ["dropdown", "node"] }, { kind: "component", type: NodeEntriesCardSmallComponent, selector: "es-node-entries-card-small", inputs: ["node"] }, { kind: "component", type: SortSelectPanelComponent, selector: "es-sort-select-panel", inputs: ["active", "direction", "columns", "customSortingInProgress"], outputs: ["sortChange", "customSortingInProgressChange"] }, { kind: "directive", type: NodesDragDirective, selector: "[esNodesDrag]" }, { kind: "directive", type: NodesDropTargetDirective, selector: "[esNodesDropTarget]", inputs: ["esNodesDropTarget", "canDropNodes"], outputs: ["nodeDropped"], exportAs: ["esNodesDropTarget"] }, { kind: "component", type: NodeEntriesGlobalOptionsComponent, selector: "es-node-entries-global-options", inputs: ["displayType"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesCardGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-card-grid', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template #gridTop>\n  <button\n    *ngIf=\"entriesService.configureColumns\"\n    mat-icon-button\n    (click)=\"columnChooserVisible$.next(!columnChooserVisible$.value)\"\n    cdkOverlayOrigin\n    #columnChooserTrigger=\"cdkOverlayOrigin\"\n    [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n    [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n  >\n    <i esIcon=\"settings\"></i>\n  </button>\n  <es-sort-select-panel\n    *ngIf=\"entriesService.sort?.allowed\"\n    class=\"order-panel\"\n    [active]=\"entriesService.sort.active\"\n    [direction]=\"entriesService.sort.direction\"\n    [columns]=\"getSortColumns()\"\n    (sortChange)=\"onSortChange($event)\"\n    [(customSortingInProgress)]=\"entriesService.sort.customSortingInProgress\"\n    (customSortingInProgressChange)=\"onCustomSortingInProgressChange()\"\n  ></es-sort-select-panel>\n</ng-template>\n<es-column-chooser\n  *ngIf=\"entriesService.configureColumns\"\n  [(columns)]=\"entriesService.columns\"\n  [columnChooserVisible]=\"columnChooserVisible$ | async\"\n  [origin]=\"columnChooserTrigger\"\n  (columnChooserVisibleChange)=\"columnChooserVisible$.next($event)\"\n></es-column-chooser>\n<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n\n<!-- Do not render the list element (`role=\"list\"` or `li`) when there are no list items. -->\n<ng-container\n  *ngIf=\"(nodes$ | async)?.length > 0 || (entriesService.globalOptionsSubject | async)?.length > 0\"\n>\n  <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,\n  that only allows `li` elements as direct children of `ul` elements. So we would need to use the\n  native elements at all places without any elements between `ul` and `li`. -->\n  <div\n    *ngIf=\"entriesService.sort?.customSortingInProgress\"\n    role=\"list\"\n    class=\"card-grid card-grid-reorder\"\n    cdkDropListGroup\n  >\n    <ng-container *ngIf=\"nodes$ | async as nodes\">\n      <div\n        class=\"card-grid-order-wrapper\"\n        *ngFor=\"let node of nodes; let i = index\"\n        role=\"none\"\n        cdkDropList\n        [cdkDropListConnectedTo]=\"dropLists\"\n        [cdkDropListData]=\"i\"\n      >\n        <es-node-entries-card\n          *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n          #item\n          [node]=\"node\"\n          role=\"listitem\"\n          cdkDrag\n          [cdkDragData]=\"i\"\n          [cdkDragStartDelay]=\"getDragStartDelay()\"\n          cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n          (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n          (cdkDragStarted)=\"onRearrangeDragStarted()\"\n          (cdkDragEnded)=\"onRearrangeDragEnded()\"\n        ></es-node-entries-card>\n        <es-node-entries-card-small\n          *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n          #item\n          [node]=\"node\"\n          role=\"listitem\"\n          cdkDrag\n          [cdkDragData]=\"i\"\n          [cdkDragStartDelay]=\"getDragStartDelay()\"\n          cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n          (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n          (cdkDragStarted)=\"onRearrangeDragStarted()\"\n          (cdkDragEnded)=\"onRearrangeDragEnded()\"\n        ></es-node-entries-card-small>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"card-grid-wrapper\" *ngIf=\"!entriesService.sort?.customSortingInProgress\">\n    <ng-container *ngTemplateOutlet=\"scrollHelper\"></ng-container>\n    <div\n      role=\"list\"\n      class=\"card-grid card-grid-layout-{{ layout }}\"\n      #grid\n      (esBorderBoxObserver)=\"onGridSizeChanges()\"\n      esInfiniteScroll\n      (scroll)=\"updateScrollState()\"\n      (scrolled)=\"!visibleItemsLimited && loadData('scroll')\"\n    >\n      <es-node-entries-global-options\n        *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n        [displayType]=\"displayType\"\n      >\n      </es-node-entries-global-options>\n      <ng-container *ngIf=\"nodes$ | async as nodes\">\n        <div\n          class=\"card-grid-drag-wrapper\"\n          *ngFor=\"let node of nodes; let i = index\"\n          role=\"none\"\n          [esNodesDropTarget]=\"node\"\n          [canDropNodes]=\"canDropNodes\"\n          (nodeDropped)=\"onNodesDropped($event)\"\n          #dropTarget=\"esNodesDropTarget\"\n        >\n          <ng-container *ngIf=\"isCustomTemplate(node)\">\n            <ng-container *ngTemplateOutlet=\"$any(node)\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"!isCustomTemplate(node)\">\n            <es-node-entries-card\n              *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n              #item\n              [node]=\"node\"\n              [dropdown]=\"dropdown\"\n              role=\"listitem\"\n              cdkDrag\n              [cdkDragDisabled]=\"(getDragEnabled() | async) === false\"\n              [cdkDragData]=\"getDragData(node)\"\n              esNodesDrag\n              (cdkDragStarted)=\"onDragStarted(node)\"\n              (cdkDragEnded)=\"onDragEnded()\"\n              [class.card-import-blocked]=\"isBlocked(node)\"\n              [class.selected-when-dragging]=\"\n                isDragging && entriesService.selection.isSelected(node)\n              \"\n            >\n              <ng-container *ngIf=\"entriesService.selection.selected.length > 1\">\n                <es-node-entries-card\n                  *cdkDragPreview\n                  [node]=\"node\"\n                  [matBadge]=\"\n                    entriesService.selection.selected.length > 1\n                      ? entriesService.selection.selected.length\n                      : null\n                  \"\n                  class=\"card-drag-preview\"\n                ></es-node-entries-card>\n              </ng-container>\n            </es-node-entries-card>\n            <es-node-entries-card-small\n              *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n              #item\n              [node]=\"node\"\n              role=\"listitem\"\n              cdkDrag\n              [cdkDragDisabled]=\"(getDragEnabled() | async) === false\"\n              [cdkDragData]=\"[node]\"\n              esNodesDrag\n            >\n            </es-node-entries-card-small>\n          </ng-container>\n          <div\n            *ngIf=\"dropTarget.active?.canDrop?.denyExplicit\"\n            class=\"card-grid-drop-blocked-container\"\n          >\n            <i esIcon=\"cancel\"></i>\n          </div>\n          <div *ngIf=\"dropTarget.active?.canDrop?.accept\" class=\"card-grid-drop-allowed-container\">\n            <i\n              [esIcon]=\"dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'\"\n            ></i>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n<ng-container\n  *ngIf=\"\n    !entriesService.dataSource.isLoading &&\n    entriesService.dataSource.hasMore() &&\n    !visibleItemsLimited &&\n    entriesService.paginationStrategy === 'infinite-scroll' &&\n    layout !== 'scroll'\n  \"\n>\n  <div class=\"load-more\">\n    <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n      <i esIcon=\"refresh\"></i>\n      <span>{{ 'LOAD_MORE' | translate }}</span>\n    </button>\n  </div>\n</ng-container>\n<ng-container\n  *ngIf=\"\n    entriesService.dataSource.isLoading === true ||\n    entriesService.dataSource.isLoading === 'initial' ||\n    (entriesService.dataSource.isLoading === 'page' &&\n      entriesService.paginationStrategy === 'infinite-scroll')\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n</ng-container>\n\n<ng-template #loading>\n  <es-spinner></es-spinner>\n</ng-template>\n<ng-template #scrollHelper>\n  <ng-container *ngIf=\"layout === 'scroll'\">\n    <div\n      class=\"scroll-helper-left\"\n      role=\"presentation\"\n      (click)=\"doScroll('left')\"\n      *ngIf=\"scroll.left\"\n    >\n      <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('left')\">\n        <i esIcon=\"keyboard_arrow_left\" [aria]=\"true\"></i>\n      </button>\n    </div>\n    <div\n      class=\"scroll-helper-right\"\n      role=\"presentation\"\n      (click)=\"doScroll('right')\"\n      *ngIf=\"scroll.right\"\n    >\n      <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('right')\">\n        <i esIcon=\"keyboard_arrow_right\" [aria]=\"true\"></i>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["@keyframes OrderAnimationCards{0%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}to{transform:rotate(-.25deg)}}:host{--scroll-gradient-color: white}.order-panel{margin-left:auto}.load-more{display:flex;justify-content:center}.card-grid-wrapper{position:relative;z-index:0}.card-grid-wrapper .scroll-helper-left,.card-grid-wrapper .scroll-helper-right{position:absolute;width:15%;min-width:60px;max-width:calc(var(--cardWidth) * .4);display:flex;align-items:center;height:calc(100% - 10px);z-index:5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.card-grid-wrapper .scroll-helper-left>button,.card-grid-wrapper .scroll-helper-right>button{background-color:#fff;color:var(--primary);box-shadow:0 0 25px #00000040}.card-grid-wrapper .scroll-helper-left{left:-1.5em;justify-content:flex-start;background:linear-gradient(to left,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-left>button{margin-left:calc(1.5em - 8px)}.card-grid-wrapper .scroll-helper-right{right:-1.5em;justify-content:flex-end;background:linear-gradient(to right,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-right>button{margin-right:calc(1.5em - 8px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardWidth),1fr));grid-column-gap:20px;grid-row-gap:20px;grid-template-rows:auto;padding-block-start:1em;padding-block-end:1em}.card-grid.card-grid-layout-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;grid-auto-flow:column;grid-template-columns:repeat(auto-fit,var(--cardWidth));grid-auto-columns:minmax(var(--cardWidth),1fr);padding:1.5em;margin:-.5em -1.5em 0}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{margin:0 1.5em}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar{height:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-thumb{max-width:20px;border-radius:10px;background-color:var(--primary)}.card-grid.card-grid-layout-scroll>.card-grid-drag-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.card-grid .card-import-blocked ::ng-deep .card-meta{opacity:.75;text-decoration:line-through}.card-grid>.card-grid-drag-wrapper{position:relative}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{position:absolute;z-index:1;inset:0;display:flex;justify-content:center;align-items:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{background:radial-gradient(circle,#fff 30%,#fff0 70%);width:200px;height:200px;font-size:80px;display:flex;align-items:center;justify-content:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i{color:var(--colorStatusPositive)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{color:var(--colorStatusNegative)}.card-grid>.card-grid-drag-wrapper .selected-when-dragging{opacity:.5}.card-grid>.card-grid-drag-wrapper.cdk-drop-list-dragging>*:first-child{display:none}.card-grid.card-grid-reorder>.card-grid-order-wrapper{animation-iteration-count:infinite;animation-duration:.5s;animation-name:OrderAnimationCards}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(2n){animation-delay:0s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(odd){animation-delay:-.25s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(3n){animation-delay:-.125s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(5n){animation-delay:-.0625s}.card-grid.card-grid-reorder>.card-grid-order-wrapper .cdk-drag-placeholder{display:none}.card-drag-preview{width:250px}::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating{transition:none}\n"] }]
+            args: [{ selector: 'es-node-entries-card-grid', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template #gridTop>\n  <button\n    *ngIf=\"entriesService.configureColumns\"\n    class=\"configure-columns\"\n    mat-icon-button\n    (click)=\"columnChooserVisible$.next(!columnChooserVisible$.value)\"\n    cdkOverlayOrigin\n    #columnChooserTrigger=\"cdkOverlayOrigin\"\n    [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n    [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n  >\n    <i esIcon=\"settings\"></i>\n  </button>\n  <es-sort-select-panel\n    *ngIf=\"entriesService.sort?.allowed\"\n    class=\"order-panel\"\n    [active]=\"entriesService.sort.active\"\n    [direction]=\"entriesService.sort.direction\"\n    [columns]=\"getSortColumns()\"\n    (sortChange)=\"onSortChange($event)\"\n    [(customSortingInProgress)]=\"entriesService.sort.customSortingInProgress\"\n    (customSortingInProgressChange)=\"onCustomSortingInProgressChange()\"\n  ></es-sort-select-panel>\n</ng-template>\n<es-column-chooser\n  *ngIf=\"entriesService.configureColumns\"\n  [(columns)]=\"entriesService.columns\"\n  [columnChooserVisible]=\"columnChooserVisible$ | async\"\n  [origin]=\"columnChooserTrigger\"\n  (columnChooserVisibleChange)=\"columnChooserVisible$.next($event)\"\n></es-column-chooser>\n<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n\n<!-- Do not render the list element (`role=\"list\"` or `li`) when there are no list items. -->\n<ng-container\n  *ngIf=\"\n    (nodes$ | async)?.length > 0 ||\n    ((entriesService.globalOptionsSubject | async)?.length > 0 &&\n      (!entriesService.dataSource.isLoading ||\n        (entriesService.gridConfig$ | async)?.layout !== 'scroll'))\n  \"\n>\n  <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,\n  that only allows `li` elements as direct children of `ul` elements. So we would need to use the\n  native elements at all places without any elements between `ul` and `li`. -->\n  <div\n    *ngIf=\"entriesService.sort?.customSortingInProgress\"\n    role=\"list\"\n    class=\"card-grid card-grid-reorder\"\n    cdkDropListGroup\n  >\n    <ng-container *ngIf=\"nodes$ | async as nodes\">\n      <div\n        class=\"card-grid-order-wrapper\"\n        *ngFor=\"let node of nodes; let i = index\"\n        role=\"none\"\n        cdkDropList\n        [cdkDropListConnectedTo]=\"dropLists\"\n        [cdkDropListData]=\"i\"\n      >\n        <es-node-entries-card\n          *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n          #item\n          [node]=\"node\"\n          role=\"listitem\"\n          cdkDrag\n          [cdkDragData]=\"i\"\n          [cdkDragStartDelay]=\"getDragStartDelay()\"\n          cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n          (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n          (cdkDragStarted)=\"onRearrangeDragStarted()\"\n          (cdkDragEnded)=\"onRearrangeDragEnded()\"\n        ></es-node-entries-card>\n        <es-node-entries-card-small\n          *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n          #item\n          [node]=\"node\"\n          role=\"listitem\"\n          cdkDrag\n          [cdkDragData]=\"i\"\n          [cdkDragStartDelay]=\"getDragStartDelay()\"\n          cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n          (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n          (cdkDragStarted)=\"onRearrangeDragStarted()\"\n          (cdkDragEnded)=\"onRearrangeDragEnded()\"\n        ></es-node-entries-card-small>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    class=\"card-grid-wrapper\"\n    [class.card-grid-wrapper-empty]=\"entriesService.dataSource?.isEmpty()\"\n    *ngIf=\"!entriesService.sort?.customSortingInProgress\"\n  >\n    <ng-container *ngTemplateOutlet=\"scrollHelper\"></ng-container>\n    <div\n      role=\"list\"\n      class=\"card-grid card-grid-layout-{{ layout }}\"\n      #grid\n      (esBorderBoxObserver)=\"onGridSizeChanges()\"\n      esInfiniteScroll\n      (scroll)=\"updateScrollState()\"\n      (scrolled)=\"!visibleItemsLimited && loadData('scroll')\"\n    >\n      <es-node-entries-global-options\n        *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n        [displayType]=\"displayType\"\n      >\n      </es-node-entries-global-options>\n      <ng-container *ngIf=\"nodes$ | async as nodes\">\n        <div\n          class=\"card-grid-drag-wrapper\"\n          *ngFor=\"let node of nodes; let i = index\"\n          role=\"none\"\n          [esNodesDropTarget]=\"node\"\n          [canDropNodes]=\"canDropNodes\"\n          (nodeDropped)=\"onNodesDropped($event)\"\n          #dropTarget=\"esNodesDropTarget\"\n        >\n          <ng-container *ngIf=\"isCustomTemplate(node)\">\n            <ng-container *ngTemplateOutlet=\"$any(node)\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"!isCustomTemplate(node)\">\n            <es-node-entries-card\n              *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n              #item\n              [node]=\"node\"\n              [dropdown]=\"dropdown\"\n              role=\"listitem\"\n              cdkDrag\n              [cdkDragDisabled]=\"(getDragEnabled() | async) === false\"\n              [cdkDragData]=\"getDragData(node)\"\n              esNodesDrag\n              (cdkDragStarted)=\"onDragStarted(node)\"\n              (cdkDragEnded)=\"onDragEnded()\"\n              [class.card-import-blocked]=\"isBlocked(node)\"\n              [class.selected-when-dragging]=\"\n                isDragging && entriesService.selection.isSelected(node)\n              \"\n            >\n              <ng-container *ngIf=\"entriesService.selection.selected.length > 1\">\n                <es-node-entries-card\n                  *cdkDragPreview\n                  [node]=\"node\"\n                  [matBadge]=\"\n                    entriesService.selection.selected.length > 1\n                      ? entriesService.selection.selected.length\n                      : null\n                  \"\n                  class=\"card-drag-preview\"\n                ></es-node-entries-card>\n              </ng-container>\n            </es-node-entries-card>\n            <es-node-entries-card-small\n              *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n              #item\n              [node]=\"node\"\n              role=\"listitem\"\n              cdkDrag\n              [cdkDragDisabled]=\"(getDragEnabled() | async) === false\"\n              [cdkDragData]=\"[node]\"\n              esNodesDrag\n            >\n            </es-node-entries-card-small>\n          </ng-container>\n          <div\n            *ngIf=\"dropTarget.active?.canDrop?.denyExplicit\"\n            class=\"card-grid-drop-blocked-container\"\n          >\n            <i esIcon=\"cancel\"></i>\n          </div>\n          <div *ngIf=\"dropTarget.active?.canDrop?.accept\" class=\"card-grid-drop-allowed-container\">\n            <i\n              [esIcon]=\"dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'\"\n            ></i>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n<ng-container\n  *ngIf=\"\n    !entriesService.dataSource.isLoading &&\n    entriesService.dataSource.hasMore() &&\n    !visibleItemsLimited &&\n    entriesService.paginationStrategy === 'infinite-scroll' &&\n    layout !== 'scroll'\n  \"\n>\n  <div class=\"load-more\">\n    <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n      <i esIcon=\"refresh\"></i>\n      <span>{{ 'LOAD_MORE' | translate }}</span>\n    </button>\n  </div>\n</ng-container>\n<ng-container\n  *ngIf=\"\n    entriesService.dataSource.isLoading === true ||\n    entriesService.dataSource.isLoading === 'initial' ||\n    (entriesService.dataSource.isLoading === 'page' &&\n      entriesService.paginationStrategy === 'infinite-scroll')\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n</ng-container>\n\n<ng-template #loading>\n  <es-spinner></es-spinner>\n</ng-template>\n<ng-template #scrollHelper>\n  <ng-container *ngIf=\"layout === 'scroll'\">\n    <div\n      class=\"scroll-helper-left\"\n      role=\"presentation\"\n      (click)=\"doScroll('left')\"\n      *ngIf=\"scroll.left\"\n    >\n      <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('left')\">\n        <i esIcon=\"keyboard_arrow_left\" [aria]=\"true\"></i>\n      </button>\n    </div>\n    <div\n      class=\"scroll-helper-right\"\n      role=\"presentation\"\n      (click)=\"doScroll('right')\"\n      *ngIf=\"scroll.right\"\n    >\n      <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('right')\">\n        <i esIcon=\"keyboard_arrow_right\" [aria]=\"true\"></i>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["@keyframes OrderAnimationCards{0%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}to{transform:rotate(-.25deg)}}:host{--scroll-gradient-color: white}.order-panel{margin-left:auto}.load-more{display:flex;justify-content:center}.card-grid-wrapper{position:relative;z-index:0}.card-grid-wrapper.card-grid-wrapper-empty{max-width:fit-content}.card-grid-wrapper.card-grid-wrapper-empty .card-grid{margin-right:20px}.card-grid-wrapper .scroll-helper-left,.card-grid-wrapper .scroll-helper-right{position:absolute;width:15%;min-width:60px;max-width:calc(var(--cardWidth) * .4);display:flex;align-items:center;height:calc(100% - 10px);z-index:5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.card-grid-wrapper .scroll-helper-left>button,.card-grid-wrapper .scroll-helper-right>button{background-color:#fff;color:var(--primary);box-shadow:0 0 25px #00000040}.card-grid-wrapper .scroll-helper-left{left:-1.5em;justify-content:flex-start;background:linear-gradient(to left,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-left>button{margin-left:calc(1.5em - 8px)}.card-grid-wrapper .scroll-helper-right{right:-1.5em;justify-content:flex-end;background:linear-gradient(to right,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-right>button{margin-right:calc(1.5em - 8px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardWidth),1fr));grid-column-gap:20px;grid-row-gap:20px;grid-template-rows:auto;padding-block-start:1em;padding-block-end:1em}.card-grid.card-grid-layout-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;grid-auto-flow:column;grid-template-columns:repeat(auto-fit,var(--cardWidth));grid-auto-columns:minmax(var(--cardWidth),1fr);padding:1.5em;margin:-.5em -1.5em 0}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{margin:0 1.5em}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar{height:6px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-thumb{max-width:20px;border-radius:6px;background-color:var(--palette-primary-200)}.card-grid.card-grid-layout-scroll>.card-grid-drag-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.card-grid .card-import-blocked ::ng-deep .card-meta{opacity:.75;text-decoration:line-through}.card-grid>.card-grid-drag-wrapper{position:relative}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{position:absolute;z-index:1;inset:0;display:flex;justify-content:center;align-items:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{background:radial-gradient(circle,#fff 30%,#fff0 70%);width:200px;height:200px;font-size:80px;display:flex;align-items:center;justify-content:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i{color:var(--colorStatusPositive)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{color:var(--colorStatusNegative)}.card-grid>.card-grid-drag-wrapper .selected-when-dragging{opacity:.5}.card-grid>.card-grid-drag-wrapper.cdk-drop-list-dragging>*:first-child{display:none}.card-grid.card-grid-reorder>.card-grid-order-wrapper{animation-iteration-count:infinite;animation-duration:.5s;animation-name:OrderAnimationCards}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(2n){animation-delay:0s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(odd){animation-delay:-.25s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(3n){animation-delay:-.125s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(5n){animation-delay:-.0625s}.card-grid.card-grid-reorder>.card-grid-order-wrapper .cdk-drag-placeholder{display:none}.card-drag-preview{width:250px}.configure-columns{color:var(--textMediumLight)}::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating{transition:none}\n"] }]
         }], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeEntriesGlobalService }, { type: NodeEntriesTemplatesService }, { type: NodeHelperService }, { type: UIService }, { type: i0.NgZone }], propDecorators: { columnChooserTrigger: [{
                 type: ViewChild,
                 args: ['columnChooserTrigger']
@@ -6798,6 +6937,7 @@ class NodeEntriesTableComponent {
         this.ClickSource = ClickSource;
         this.NodeEntriesDisplayType = NodeEntriesDisplayType;
         this.Target = Target;
+        this.isScroll = false;
         this.isPageSelected = new BehaviorSubject(false);
         this.isAllSelected = new BehaviorSubject(false);
         this.columnChooserVisible = false;
@@ -6806,6 +6946,7 @@ class NodeEntriesTableComponent {
         this.isDragging = false;
         this.maximumColumnsNumber$ = new BehaviorSubject(1);
         this.destroyed = new Subject();
+        this.containerWidth$ = new BehaviorSubject(null);
         this.canDrop = (dragData) => {
             return this.entriesService.dragDrop.dropAllowed?.(dragData);
         };
@@ -6817,6 +6958,7 @@ class NodeEntriesTableComponent {
             .subscribe(() => this.changeDetectorRef.detectChanges());
     }
     ngAfterViewInit() {
+        this.isScroll = this.entriesService.tableConfig?.dataColumnLayout === 'scroll';
         void Promise.resolve().then(() => {
             this.registerSortChanges();
             if (this.entriesService.dataSource instanceof NodeDataSourceRemote) {
@@ -6890,15 +7032,16 @@ class NodeEntriesTableComponent {
     }
     registerMaximumColumnsNumber() {
         BorderBoxObserverDirective.observeElement(this.elementRef)
-            .pipe(takeUntil(this.destroyed), map((box) => this.getMaximumColumnsNumber(box.width)), distinctUntilChanged())
+            .pipe(takeUntil(this.destroyed), tap((box) => this.containerWidth$.next(box.width)), map((box) => this.getMaximumColumnsNumber(box.width)), distinctUntilChanged())
             .subscribe((maximumColumnsNumber) => this.ngZone.run(() => this.maximumColumnsNumber$.next(maximumColumnsNumber)));
     }
     getMaximumColumnsNumber(tableWidth) {
+        if (this.entriesService.tableConfig?.dataColumnLayout === 'scroll') {
+            return 0xffffffff;
+        }
         return Math.max(1, Math.floor(
         // Subtract total width of always visible columns like checkboxes and icons.
-        (tableWidth - 187) /
-            // Divide by with of data columns (including margin).
-            126));
+        (tableWidth - 187) / (this.entriesService.tableConfig?.dataColumnWidth || 126)));
     }
     getVisibleDataColumns() {
         return rxjs
@@ -6913,12 +7056,14 @@ class NodeEntriesTableComponent {
         }), shareReplay(1));
     }
     getVisibleColumnNames() {
-        return this.visibleDataColumns$.pipe(map((visibleDataColumns) => {
+        return combineLatest$1([this.visibleDataColumns$, this.entriesService.showIconColumn]).pipe(map(([visibleDataColumns, showIconColumn]) => {
             const columns = [];
             if (this.entriesService.checkbox) {
                 columns.push('select');
             }
-            columns.push('icon');
+            if (showIconColumn) {
+                columns.push('icon');
+            }
             return columns.concat(visibleDataColumns.map((c) => c.name)).concat(['actions']);
         }), shareReplay(1));
     }
@@ -7001,11 +7146,11 @@ class NodeEntriesTableComponent {
             this.nodeHelperService.isNodeRevoked(node));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesTableComponent, deps: [{ token: NodeEntriesService }, { token: NodeEntriesGlobalService }, { token: i0.ApplicationRef }, { token: Toast }, { token: TranslationsService }, { token: NodeHelperService }, { token: i0.ChangeDetectorRef }, { token: UIService }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesTableComponent, isStandalone: false, selector: "es-node-entries-table", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "columnChooserTrigger", first: true, predicate: ["columnChooserTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n<button\n  #menuTrigger=\"matMenuTrigger\"\n  mat-button\n  class=\"dropdown-dummy cdk-visually-hidden\"\n  [style.left.px]=\"dropdownLeft\"\n  [style.top.px]=\"dropdownTop\"\n  [matMenuTriggerFor]=\"dropdown.menu\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n></button>\n<es-node-entries-global-options\n  *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n  [displayType]=\"NodeEntriesDisplayType.Table\"\n>\n</es-node-entries-global-options>\n<mat-table\n  [dataSource]=\"entriesService.dataSource\"\n  matSort\n  [matSortDisableClear]=\"true\"\n  [matSortActive]=\"entriesService.sort?.active\"\n  [matSortDirection]=\"entriesService.sort?.direction\"\n  esInfiniteScroll\n  (scrolled)=\"loadData('scroll')\"\n>\n  <!-- Checkbox Column -->\n  <ng-container matColumnDef=\"select\">\n    <mat-header-cell *matHeaderCellDef>\n      <mat-checkbox\n        [ngModel]=\"entriesService.selection.selected.length > 0\"\n        [indeterminate]=\"\n          entriesService.selection.selected.length > 0 &&\n          entriesService.selection.selected.length !== entriesService.dataSource.getData().length\n        \"\n        (ngModelChange)=\"toggleAll($event)\"\n        color=\"primary\"\n        aria-label=\"{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}\"\n      ></mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\">\n      <mat-checkbox\n        [checked]=\"entriesService.selection.isSelected(node)\"\n        (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n        aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n        color=\"primary\"\n      ></mat-checkbox>\n    </mat-cell>\n  </ng-container>\n  <div matColumnDef=\"icon\">\n    <mat-header-cell *matHeaderCellDef class=\"cell-icon cell-count\">\n      ({{ entriesService.selection.selected.length\n      }}<ng-container *ngIf=\"entriesService.dataSource?.getTotal() !== undefined\">\n        / {{ entriesService.dataSource?.getTotal() }}</ng-container\n      >)\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\" class=\"cell-icon\">\n      <ng-container\n        *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n      >\n        <ng-container *ngTemplateOutlet=\"icon; context: { node: node }\"></ng-container>\n      </ng-container>\n      <div\n        *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n        (click)=\"\n          entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n        \"\n        (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"icon; context: { node: node }\"\n          (click)=\"\n            entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n          \"\n          (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n        ></ng-container>\n      </div>\n    </mat-cell>\n  </div>\n  <ng-container matColumnDef=\"actions\">\n    <mat-header-cell *matHeaderCellDef>\n      <button\n        *ngIf=\"entriesService.configureColumns\"\n        mat-icon-button\n        (click)=\"columnChooserVisible = !columnChooserVisible\"\n        cdkOverlayOrigin\n        #columnChooserTrigger=\"cdkOverlayOrigin\"\n        [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n        [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n      >\n        <i esIcon=\"settings\"></i>\n      </button>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\">\n      <button\n        mat-icon-button\n        *ngIf=\"entriesService.options?.[Target.List]?.length\"\n        color=\"primary\"\n        (click)=\"openMenu(node)\"\n        [matMenuTriggerFor]=\"dropdown.menu\"\n      >\n        <i esIcon=\"more_vert\" [aria]=\"true\"></i>\n      </button>\n    </mat-cell>\n  </ng-container>\n  <!-- Data Columns -->\n  <ng-container\n    *ngFor=\"let column of visibleDataColumns$ | async; let first = first\"\n    [matColumnDef]=\"column.name\"\n  >\n    <ng-container>\n      <mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        [disabled]=\"!(entriesService.sort?.allowed && isSortable(column))\"\n        [class.mat-column-primary]=\"first\"\n        >{{ column | esListItemLabel | async }}</mat-header-cell\n      >\n    </ng-container>\n    <mat-cell\n      *matCellDef=\"let node\"\n      #cell\n      [class.mat-column-primary]=\"first\"\n      attr.data-test=\"table-cell-{{ column.name }}\"\n    >\n      <ng-container\n        *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n      >\n        <es-node-url cdkMonitorSubtreeFocus [node]=\"node\" [mode]=\"first ? 'link' : 'wrapper'\">\n          <es-list-base\n            [forceText]=\"true\"\n            [node]=\"node\"\n            [item]=\"column\"\n            esCheckTextOverflow\n            #text=\"esCheckTextOverflow\"\n            [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n            matTooltipTouchGestures=\"off\"\n          ></es-list-base>\n        </es-node-url>\n      </ng-container>\n      <es-list-base\n        *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n        [forceText]=\"true\"\n        [node]=\"node\"\n        [item]=\"column\"\n        (click)=\"\n          entriesService.onClicked({\n            event: $event,\n            element: node,\n            source: ClickSource.Metadata,\n            attribute: column,\n          })\n        \"\n        (dblclick)=\"\n          entriesService.dblClickItem.emit({\n            element: node,\n            source: ClickSource.Metadata,\n            attribute: column,\n          })\n        \"\n      ></es-list-base>\n      <ng-container *ngIf=\"first\">\n        <div class=\"childobjects\" *ngIf=\"node.properties?.['virtual:childobjectcount'] > 0\">\n          <div\n            class=\"childobject-count\"\n            matTooltip=\"{{\n              'CHILDOBJECT_COUNT'\n                | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }\n            }}\"\n          >\n            <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span\n            ><i esIcon=\"filter_none\"></i>\n          </div>\n        </div>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n  <mat-header-row mat-header-row *matHeaderRowDef=\"visibleColumnNames$ | async\"></mat-header-row>\n  <mat-row\n    mat-row\n    matRipple\n    cdkDrag\n    esNodesDrag\n    [cdkDragDisabled]=\"!entriesService.dragDrop?.dragAllowed || (ui.isTouchSubject | async)\"\n    [cdkDragData]=\"getDragData(node)\"\n    (cdkDragStarted)=\"onDragStarted(node)\"\n    (cdkDragEnded)=\"onDragEnded()\"\n    [esNodesDropTarget]=\"node\"\n    [canDropNodes]=\"canDrop\"\n    (nodeDropped)=\"drop($event)\"\n    class=\"mat-row\"\n    [class.mat-row-selected]=\"entriesService.selection.isSelected(node)\"\n    [class.mat-row-import-blocked]=\"isBlocked(node)\"\n    [class.selected-when-dragging]=\"isDragging && entriesService.selection.isSelected(node)\"\n    [class.mat-row-virtual]=\"node.virtual\"\n    [class.mat-row-virtual-first]=\"\n      node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual\n    \"\n    [class.mat-row-virtual-last]=\"\n      node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual\n    \"\n    [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n    *matRowDef=\"let node; let i = index; let last = last; columns: visibleColumnNames$ | async\"\n    (contextmenu)=\"onRowContextMenu({ event: $event, node: node })\"\n    (keydown.ContextMenu)=\"onRowContextMenu({ event: $event, node: node })\"\n  >\n    <es-drag-preview\n      *cdkDragPreview\n      [node]=\"node\"\n      [selected]=\"entriesService.selection.selected\"\n      [item]=\"(visibleDataColumns$ | async)[0]\"\n    ></es-drag-preview>\n  </mat-row>\n</mat-table>\n<ng-container\n  *ngIf=\"\n    (entriesService.dataSource.isLoadingSubject | async) === false &&\n    entriesService.dataSource.hasMore() &&\n    entriesService.paginationStrategy === 'infinite-scroll'\n  \"\n>\n  <div class=\"load-more\">\n    <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n      <i esIcon=\"refresh\"></i>\n      <span>{{ 'LOAD_MORE' | translate }}</span>\n    </button>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"entriesService.dataSource.isLoadingSubject | async\">\n  <ng-container *ngTemplateOutlet=\"loading\"> </ng-container>\n</ng-container>\n<!--\n<mat-paginator #paginator [pageSizeOptions]=\"pageSizeOptions\"></mat-paginator>\n-->\n\n<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes\navailable. -->\n<es-column-chooser\n  *ngIf=\"columnChooserTriggerReady\"\n  [(columns)]=\"entriesService.columns\"\n  [(columnChooserVisible)]=\"columnChooserVisible\"\n  [origin]=\"columnChooserTrigger\"\n></es-column-chooser>\n<ng-template #loading>\n  <es-spinner></es-spinner>\n</ng-template>\n<ng-template #icon let-node=\"node\">\n  <div class=\"icon-bg\">\n    <img\n      *ngIf=\"node.iconURL\"\n      [src]=\"node | esNodeIcon | async\"\n      [alt]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n      [matTooltip]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n      matTooltipTouchGestures=\"off\"\n    />\n    <i\n      *ngIf=\"!node.iconURL\"\n      [esIcon]=\"node.authorityType ? (node.authorityType === 'GROUP' ? 'group' : 'person') : null\"\n    ></i>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep mat-header-cell{color:var(--textMediumLight)}:host ::ng-deep mat-cell,:host ::ng-deep mat-header-cell{margin:0!important}:host ::ng-deep mat-cell es-node-url{width:100%}:host ::ng-deep mat-cell es-node-url a{color:#000}:host ::ng-deep mat-cell es-node-url.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}:host ::ng-deep es-list-base{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline;width:100%;padding:20.3px 0;align-items:center}:host ::ng-deep es-list-base>div{display:inline}:host ::ng-deep es-list-base>div>div{display:inline}mat-header-cell,mat-cell{margin:0 3px}mat-header-cell:not(.mat-column-primary),mat-cell:not(.mat-column-primary){flex:0 145px}mat-header-cell.mat-column-primary,mat-cell.mat-column-primary{min-width:30%}mat-header-cell.mat-column-select,mat-cell.mat-column-select{flex:0 58px;min-width:58px;padding-left:14px}mat-header-cell.mat-column-icon,mat-cell.mat-column-icon{flex:0 85px;min-width:85px;justify-content:center}mat-header-cell.mat-column-actions,mat-cell.mat-column-actions{flex:0 58px;min-width:58px;display:flex;justify-content:flex-end;padding-right:5px}.mat-row{background:unset}.mat-row.dynamic-single-click{cursor:pointer}.mat-row.dynamic-single-click:hover{background-color:rgb(var(--palette-primary-50))}.mat-row.mat-row-import-blocked{opacity:.75;text-decoration:line-through}.mat-row.mat-row-selected{background:var(--listItemSelectedBackgroundEffect)}.mat-row.mat-row-selected .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual{background:linear-gradient(to right,var(--nodeVirtualColor) 5px,transparent 5px) no-repeat;border-right:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual.mat-row-selected{background:linear-gradient(to right,var(--nodeVirtualColor) 0,var(--nodeVirtualColor) 5px,var(--listItemSelectedBackground) 5px,var(--listItemSelectedBackground) 5px)}.mat-row.mat-row-virtual-first{border-top:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual-last{border-bottom:2px dashed var(--nodeVirtualColorLight)}.mat-row.selected-when-dragging{opacity:.5}.dropdown-dummy{position:fixed}.childobjects{background-color:#0000000d;border-radius:15px;display:inline-flex;align-items:center;min-width:51px;min-height:26px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px;margin-left:5px}.childobjects>.childobject-count{display:inline-flex;align-items:center}.childobjects>.childobject-count>i{font-size:13px;margin-left:4px}.cell-icon .icon-bg{width:36px;height:36px;padding:3px;margin:1px 0;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 3px #0000004d}.cell-icon .icon-bg>img{width:18px;height:auto}.cell-icon .icon-bg>i{color:#666;font-size:18px}.mat-column-link{flex:0 60px}.mat-column-link a,.load-more{display:flex;justify-content:center}es-node-entries-global-options{padding:20px 0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i2$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CheckTextOverflowDirective, selector: "[esCheckTextOverflow]", inputs: ["esCheckTextOverflow"], exportAs: ["esCheckTextOverflow"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObjects", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[esInfiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollThrottle", "scrollWindow"], outputs: ["scrolled"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: SpinnerComponent, selector: "es-spinner" }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: i5$2.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: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i22.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i22.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i22.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i22.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i22.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i22.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i22.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i22.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i22.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i22.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i24.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i24.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnChooserComponent, selector: "es-column-chooser", inputs: ["origin", "columnChooserVisible", "columns"], outputs: ["columnChooserVisibleChange", "columnsChange"] }, { kind: "component", type: DragPreviewComponent, selector: "es-drag-preview", inputs: ["node", "selected", "item"] }, { kind: "directive", type: NodesDragDirective, selector: "[esNodesDrag]" }, { kind: "directive", type: NodesDropTargetDirective, selector: "[esNodesDropTarget]", inputs: ["esNodesDropTarget", "canDropNodes"], outputs: ["nodeDropped"], exportAs: ["esNodesDropTarget"] }, { kind: "component", type: NodeEntriesGlobalOptionsComponent, selector: "es-node-entries-global-options", inputs: ["displayType"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeIconPipe, name: "esNodeIcon" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesTableComponent, isStandalone: false, selector: "es-node-entries-table", host: { properties: { "class.scroll": "this.isScroll" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "columnChooserTrigger", first: true, predicate: ["columnChooserTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n<button\n  #menuTrigger=\"matMenuTrigger\"\n  mat-button\n  class=\"dropdown-dummy cdk-visually-hidden\"\n  [style.left.px]=\"dropdownLeft\"\n  [style.top.px]=\"dropdownTop\"\n  [matMenuTriggerFor]=\"dropdown.menu\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n></button>\n<es-node-entries-global-options\n  *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n  [displayType]=\"NodeEntriesDisplayType.Table\"\n>\n</es-node-entries-global-options>\n<mat-table\n  [dataSource]=\"entriesService.dataSource\"\n  matSort\n  [matSortDisableClear]=\"true\"\n  [matSortActive]=\"entriesService.sort?.active\"\n  [matSortDirection]=\"entriesService.sort?.direction\"\n  esInfiniteScroll\n  (scrolled)=\"loadData('scroll')\"\n>\n  <!-- Checkbox Column -->\n  <ng-container matColumnDef=\"select\" [sticky]=\"isScroll\">\n    <mat-header-cell *matHeaderCellDef>\n      <mat-checkbox\n        [ngModel]=\"entriesService.selection.selected.length > 0\"\n        [indeterminate]=\"\n          entriesService.selection.selected.length > 0 &&\n          entriesService.selection.selected.length !== entriesService.dataSource.getData().length\n        \"\n        (ngModelChange)=\"toggleAll($event)\"\n        color=\"primary\"\n        aria-label=\"{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}\"\n      ></mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\">\n      <mat-checkbox\n        [checked]=\"entriesService.selection.isSelected(node)\"\n        (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n        aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n        color=\"primary\"\n      ></mat-checkbox>\n    </mat-cell>\n  </ng-container>\n  <div matColumnDef=\"icon\" [sticky]=\"isScroll\">\n    <mat-header-cell *matHeaderCellDef class=\"cell-icon cell-count\">\n      ({{ entriesService.selection.selected.length\n      }}<ng-container *ngIf=\"entriesService.dataSource?.getTotal() !== undefined\">\n        / {{ entriesService.dataSource?.getTotal() }}</ng-container\n      >)\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\" class=\"cell-icon\">\n      <ng-container\n        *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n      >\n        <ng-container *ngTemplateOutlet=\"icon; context: { node: node }\"></ng-container>\n      </ng-container>\n      <div\n        *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n        (click)=\"\n          entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n        \"\n        (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"icon; context: { node: node }\"\n          (click)=\"\n            entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n          \"\n          (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n        ></ng-container>\n      </div>\n    </mat-cell>\n  </div>\n  <ng-container matColumnDef=\"actions\" [stickyEnd]=\"isScroll\">\n    <mat-header-cell *matHeaderCellDef>\n      <button\n        *ngIf=\"entriesService.configureColumns\"\n        mat-icon-button\n        (click)=\"columnChooserVisible = !columnChooserVisible\"\n        cdkOverlayOrigin\n        #columnChooserTrigger=\"cdkOverlayOrigin\"\n        [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n        [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n      >\n        <i esIcon=\"settings\"></i>\n      </button>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\">\n      <button\n        mat-icon-button\n        *ngIf=\"entriesService.options?.[Target.List]?.length\"\n        color=\"primary\"\n        (click)=\"openMenu(node)\"\n        [matMenuTriggerFor]=\"dropdown.menu\"\n      >\n        <i esIcon=\"more_vert\" [aria]=\"true\"></i>\n      </button>\n    </mat-cell>\n  </ng-container>\n  <!-- Data Columns -->\n  <ng-container\n    *ngFor=\"let column of visibleDataColumns$ | async; let first = first\"\n    [matColumnDef]=\"column.name\"\n    [sticky]=\"first && isScroll\"\n  >\n    <ng-container>\n      <mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        [disabled]=\"!(entriesService.sort?.allowed && isSortable(column))\"\n        [class.mat-column-primary]=\"first\"\n        [style.min-width]=\"first ? (containerWidth$ | async) / 3 + 'px' : null\"\n        >{{ column | esListItemLabel | async }}</mat-header-cell\n      >\n    </ng-container>\n    <mat-cell\n      *matCellDef=\"let node\"\n      #cell\n      [class.mat-column-primary]=\"first\"\n      [style.min-width]=\"first ? (containerWidth$ | async) / 3 + 'px' : null\"\n      attr.data-test=\"table-cell-{{ column.name }}\"\n    >\n      <ng-container\n        *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n      >\n        <es-node-url cdkMonitorSubtreeFocus [node]=\"node\" [mode]=\"first ? 'link' : 'wrapper'\">\n          <es-list-base\n            [forceText]=\"true\"\n            [node]=\"node\"\n            [item]=\"column\"\n            esCheckTextOverflow\n            #text=\"esCheckTextOverflow\"\n            [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n            matTooltipTouchGestures=\"off\"\n          ></es-list-base>\n        </es-node-url>\n      </ng-container>\n      <es-list-base\n        *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n        [forceText]=\"true\"\n        [node]=\"node\"\n        [item]=\"column\"\n        (click)=\"\n          entriesService.onClicked({\n            event: $event,\n            element: node,\n            source: ClickSource.Metadata,\n            attribute: column,\n          })\n        \"\n        (dblclick)=\"\n          entriesService.dblClickItem.emit({\n            element: node,\n            source: ClickSource.Metadata,\n            attribute: column,\n          })\n        \"\n      ></es-list-base>\n      <ng-container *ngIf=\"first\">\n        <div class=\"childobjects\" *ngIf=\"node.properties?.['virtual:childobjectcount'] > 0\">\n          <div\n            class=\"childobject-count\"\n            matTooltip=\"{{\n              'CHILDOBJECT_COUNT'\n                | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }\n            }}\"\n          >\n            <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span\n            ><i esIcon=\"filter_none\"></i>\n          </div>\n        </div>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n  <mat-header-row mat-header-row *matHeaderRowDef=\"visibleColumnNames$ | async\"></mat-header-row>\n  <mat-row\n    mat-row\n    matRipple\n    [matRippleDisabled]=\"isScroll\"\n    cdkDrag\n    esNodesDrag\n    [cdkDragDisabled]=\"!entriesService.dragDrop?.dragAllowed || (ui.isTouchSubject | async)\"\n    [cdkDragData]=\"getDragData(node)\"\n    (cdkDragStarted)=\"onDragStarted(node)\"\n    (cdkDragEnded)=\"onDragEnded()\"\n    [esNodesDropTarget]=\"node\"\n    [canDropNodes]=\"canDrop\"\n    (nodeDropped)=\"drop($event)\"\n    class=\"mat-row\"\n    [class.mat-row-selected]=\"entriesService.selection.isSelected(node)\"\n    [class.mat-row-import-blocked]=\"isBlocked(node)\"\n    [class.selected-when-dragging]=\"isDragging && entriesService.selection.isSelected(node)\"\n    [class.mat-row-virtual]=\"node.virtual\"\n    [class.mat-row-virtual-first]=\"\n      node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual\n    \"\n    [class.mat-row-virtual-last]=\"\n      node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual\n    \"\n    [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n    *matRowDef=\"let node; let i = index; let last = last; columns: visibleColumnNames$ | async\"\n    (contextmenu)=\"onRowContextMenu({ event: $event, node: node })\"\n    (keydown.ContextMenu)=\"onRowContextMenu({ event: $event, node: node })\"\n  >\n    <es-drag-preview\n      *cdkDragPreview\n      [node]=\"node\"\n      [selected]=\"entriesService.selection.selected\"\n      [item]=\"(visibleDataColumns$ | async)[0]\"\n    ></es-drag-preview>\n  </mat-row>\n</mat-table>\n<ng-container\n  *ngIf=\"\n    (entriesService.dataSource.isLoadingSubject | async) === false &&\n    entriesService.dataSource.hasMore() &&\n    entriesService.paginationStrategy === 'infinite-scroll'\n  \"\n>\n  <div class=\"load-more\">\n    <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n      <i esIcon=\"refresh\"></i>\n      <span>{{ 'LOAD_MORE' | translate }}</span>\n    </button>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"entriesService.dataSource.isLoadingSubject | async\">\n  <ng-container *ngTemplateOutlet=\"loading\"> </ng-container>\n</ng-container>\n<!--\n<mat-paginator #paginator [pageSizeOptions]=\"pageSizeOptions\"></mat-paginator>\n-->\n\n<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes\navailable. -->\n<es-column-chooser\n  *ngIf=\"columnChooserTriggerReady\"\n  [(columns)]=\"entriesService.columns\"\n  [(columnChooserVisible)]=\"columnChooserVisible\"\n  [origin]=\"columnChooserTrigger\"\n></es-column-chooser>\n<ng-template #loading>\n  <es-spinner></es-spinner>\n</ng-template>\n<ng-template #icon let-node=\"node\">\n  <div class=\"icon-bg\">\n    <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host.scroll{overflow-x:auto}:host.scroll>mat-table{width:fit-content}:host.scroll>mat-table .mat-row{overflow:visible}:host.scroll>mat-table mat-header-cell:not(.mat-mdc-table-sticky),:host.scroll>mat-table mat-cell:not(.mat-mdc-table-sticky){min-width:150px}:host.scroll>mat-table mat-header-cell.mat-column-primary,:host.scroll>mat-table mat-cell.mat-column-primary{box-shadow:4px 0 8px -4px #00000026}:host.scroll>mat-table mat-header-cell.mat-mdc-table-sticky-border-elem-right,:host.scroll>mat-table mat-cell.mat-mdc-table-sticky-border-elem-right{box-shadow:-4px 0 8px -4px #00000026}:host ::ng-deep mat-header-cell{color:var(--textMediumLight)}:host ::ng-deep mat-cell,:host ::ng-deep mat-header-cell{margin:0!important}:host ::ng-deep mat-cell es-node-url{width:100%}:host ::ng-deep mat-cell es-node-url a{color:#000}:host ::ng-deep mat-cell es-node-url.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}:host ::ng-deep es-list-base{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline;width:100%;padding:20.3px 0;align-items:center}:host ::ng-deep es-list-base>div{display:inline}:host ::ng-deep es-list-base>div>div{display:inline}mat-header-cell,mat-cell{margin:0 3px}mat-header-cell.mat-mdc-table-sticky,mat-cell.mat-mdc-table-sticky{background:var(--mat-table-background-color, var(--mat-sys-surface))}mat-header-cell:not(.mat-column-primary),mat-cell:not(.mat-column-primary){flex:0 145px}mat-header-cell.mat-column-primary,mat-cell.mat-column-primary{min-width:30%}mat-header-cell.mat-column-select,mat-cell.mat-column-select{flex:0 58px;min-width:58px;padding-left:14px}mat-header-cell.mat-column-icon,mat-cell.mat-column-icon{flex:0 85px;min-width:85px;justify-content:center}mat-header-cell.mat-column-actions,mat-cell.mat-column-actions{flex:0 58px;min-width:58px;display:flex;justify-content:flex-end;padding-right:5px}.mat-row{background:unset}.mat-row.dynamic-single-click{cursor:pointer}.mat-row.dynamic-single-click:hover{background-color:rgb(var(--palette-primary-50))}.mat-row.mat-row-import-blocked{opacity:.75;text-decoration:line-through}.mat-row.mat-row-selected{background:var(--listItemSelectedBackgroundEffect)}.mat-row.mat-row-selected .mat-mdc-cell{background:var(--listItemSelectedBackground)}.mat-row.mat-row-virtual{background:linear-gradient(to right,var(--nodeVirtualColor) 5px,transparent 5px) no-repeat;border-right:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual.mat-row-selected{background:linear-gradient(to right,var(--nodeVirtualColor) 0,var(--nodeVirtualColor) 5px,var(--listItemSelectedBackground) 5px,var(--listItemSelectedBackground) 5px)}.mat-row.mat-row-virtual-first{border-top:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual-last{border-bottom:2px dashed var(--nodeVirtualColorLight)}.mat-row.selected-when-dragging{opacity:.5}.dropdown-dummy{position:fixed}.childobjects{background-color:#0000000d;border-radius:15px;display:inline-flex;align-items:center;min-width:51px;min-height:26px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px;margin-left:5px}.childobjects>.childobject-count{display:inline-flex;align-items:center}.childobjects>.childobject-count>i{font-size:13px;margin-left:4px}.cell-icon .icon-bg{width:36px;height:36px;padding:3px;margin:1px 0;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 3px #0000004d}.cell-icon .icon-bg>es-node-type-badge{box-shadow:none}.cell-icon .icon-bg>img{width:18px;height:auto}.cell-icon .icon-bg>i{color:#666;font-size:18px}.mat-column-link{flex:0 60px}.mat-column-link a,.load-more{display:flex;justify-content:center}es-node-entries-global-options{padding:20px 0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CheckTextOverflowDirective, selector: "[esCheckTextOverflow]", inputs: ["esCheckTextOverflow"], exportAs: ["esCheckTextOverflow"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObjects", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon", "esIconContext"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[esInfiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollThrottle", "scrollWindow"], outputs: ["scrolled"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: SpinnerComponent, selector: "es-spinner" }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: i5$2.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: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i22.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i22.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i22.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i22.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i22.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i22.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i22.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i22.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i22.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i22.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i24.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i24.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnChooserComponent, selector: "es-column-chooser", inputs: ["origin", "columnChooserVisible", "columns"], outputs: ["columnChooserVisibleChange", "columnsChange"] }, { kind: "component", type: DragPreviewComponent, selector: "es-drag-preview", inputs: ["node", "selected", "item"] }, { kind: "component", type: NodeTypeBadgeComponent, selector: "es-node-type-badge", inputs: ["node"] }, { kind: "directive", type: NodesDragDirective, selector: "[esNodesDrag]" }, { kind: "directive", type: NodesDropTargetDirective, selector: "[esNodesDropTarget]", inputs: ["esNodesDropTarget", "canDropNodes"], outputs: ["nodeDropped"], exportAs: ["esNodesDropTarget"] }, { kind: "component", type: NodeEntriesGlobalOptionsComponent, selector: "es-node-entries-global-options", inputs: ["displayType"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n<button\n  #menuTrigger=\"matMenuTrigger\"\n  mat-button\n  class=\"dropdown-dummy cdk-visually-hidden\"\n  [style.left.px]=\"dropdownLeft\"\n  [style.top.px]=\"dropdownTop\"\n  [matMenuTriggerFor]=\"dropdown.menu\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n></button>\n<es-node-entries-global-options\n  *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n  [displayType]=\"NodeEntriesDisplayType.Table\"\n>\n</es-node-entries-global-options>\n<mat-table\n  [dataSource]=\"entriesService.dataSource\"\n  matSort\n  [matSortDisableClear]=\"true\"\n  [matSortActive]=\"entriesService.sort?.active\"\n  [matSortDirection]=\"entriesService.sort?.direction\"\n  esInfiniteScroll\n  (scrolled)=\"loadData('scroll')\"\n>\n  <!-- Checkbox Column -->\n  <ng-container matColumnDef=\"select\">\n    <mat-header-cell *matHeaderCellDef>\n      <mat-checkbox\n        [ngModel]=\"entriesService.selection.selected.length > 0\"\n        [indeterminate]=\"\n          entriesService.selection.selected.length > 0 &&\n          entriesService.selection.selected.length !== entriesService.dataSource.getData().length\n        \"\n        (ngModelChange)=\"toggleAll($event)\"\n        color=\"primary\"\n        aria-label=\"{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}\"\n      ></mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\">\n      <mat-checkbox\n        [checked]=\"entriesService.selection.isSelected(node)\"\n        (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n        aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n        color=\"primary\"\n      ></mat-checkbox>\n    </mat-cell>\n  </ng-container>\n  <div matColumnDef=\"icon\">\n    <mat-header-cell *matHeaderCellDef class=\"cell-icon cell-count\">\n      ({{ entriesService.selection.selected.length\n      }}<ng-container *ngIf=\"entriesService.dataSource?.getTotal() !== undefined\">\n        / {{ entriesService.dataSource?.getTotal() }}</ng-container\n      >)\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\" class=\"cell-icon\">\n      <ng-container\n        *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n      >\n        <ng-container *ngTemplateOutlet=\"icon; context: { node: node }\"></ng-container>\n      </ng-container>\n      <div\n        *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n        (click)=\"\n          entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n        \"\n        (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"icon; context: { node: node }\"\n          (click)=\"\n            entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n          \"\n          (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n        ></ng-container>\n      </div>\n    </mat-cell>\n  </div>\n  <ng-container matColumnDef=\"actions\">\n    <mat-header-cell *matHeaderCellDef>\n      <button\n        *ngIf=\"entriesService.configureColumns\"\n        mat-icon-button\n        (click)=\"columnChooserVisible = !columnChooserVisible\"\n        cdkOverlayOrigin\n        #columnChooserTrigger=\"cdkOverlayOrigin\"\n        [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n        [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n      >\n        <i esIcon=\"settings\"></i>\n      </button>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\">\n      <button\n        mat-icon-button\n        *ngIf=\"entriesService.options?.[Target.List]?.length\"\n        color=\"primary\"\n        (click)=\"openMenu(node)\"\n        [matMenuTriggerFor]=\"dropdown.menu\"\n      >\n        <i esIcon=\"more_vert\" [aria]=\"true\"></i>\n      </button>\n    </mat-cell>\n  </ng-container>\n  <!-- Data Columns -->\n  <ng-container\n    *ngFor=\"let column of visibleDataColumns$ | async; let first = first\"\n    [matColumnDef]=\"column.name\"\n  >\n    <ng-container>\n      <mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        [disabled]=\"!(entriesService.sort?.allowed && isSortable(column))\"\n        [class.mat-column-primary]=\"first\"\n        >{{ column | esListItemLabel | async }}</mat-header-cell\n      >\n    </ng-container>\n    <mat-cell\n      *matCellDef=\"let node\"\n      #cell\n      [class.mat-column-primary]=\"first\"\n      attr.data-test=\"table-cell-{{ column.name }}\"\n    >\n      <ng-container\n        *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n      >\n        <es-node-url cdkMonitorSubtreeFocus [node]=\"node\" [mode]=\"first ? 'link' : 'wrapper'\">\n          <es-list-base\n            [forceText]=\"true\"\n            [node]=\"node\"\n            [item]=\"column\"\n            esCheckTextOverflow\n            #text=\"esCheckTextOverflow\"\n            [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n            matTooltipTouchGestures=\"off\"\n          ></es-list-base>\n        </es-node-url>\n      </ng-container>\n      <es-list-base\n        *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n        [forceText]=\"true\"\n        [node]=\"node\"\n        [item]=\"column\"\n        (click)=\"\n          entriesService.onClicked({\n            event: $event,\n            element: node,\n            source: ClickSource.Metadata,\n            attribute: column,\n          })\n        \"\n        (dblclick)=\"\n          entriesService.dblClickItem.emit({\n            element: node,\n            source: ClickSource.Metadata,\n            attribute: column,\n          })\n        \"\n      ></es-list-base>\n      <ng-container *ngIf=\"first\">\n        <div class=\"childobjects\" *ngIf=\"node.properties?.['virtual:childobjectcount'] > 0\">\n          <div\n            class=\"childobject-count\"\n            matTooltip=\"{{\n              'CHILDOBJECT_COUNT'\n                | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }\n            }}\"\n          >\n            <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span\n            ><i esIcon=\"filter_none\"></i>\n          </div>\n        </div>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n  <mat-header-row mat-header-row *matHeaderRowDef=\"visibleColumnNames$ | async\"></mat-header-row>\n  <mat-row\n    mat-row\n    matRipple\n    cdkDrag\n    esNodesDrag\n    [cdkDragDisabled]=\"!entriesService.dragDrop?.dragAllowed || (ui.isTouchSubject | async)\"\n    [cdkDragData]=\"getDragData(node)\"\n    (cdkDragStarted)=\"onDragStarted(node)\"\n    (cdkDragEnded)=\"onDragEnded()\"\n    [esNodesDropTarget]=\"node\"\n    [canDropNodes]=\"canDrop\"\n    (nodeDropped)=\"drop($event)\"\n    class=\"mat-row\"\n    [class.mat-row-selected]=\"entriesService.selection.isSelected(node)\"\n    [class.mat-row-import-blocked]=\"isBlocked(node)\"\n    [class.selected-when-dragging]=\"isDragging && entriesService.selection.isSelected(node)\"\n    [class.mat-row-virtual]=\"node.virtual\"\n    [class.mat-row-virtual-first]=\"\n      node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual\n    \"\n    [class.mat-row-virtual-last]=\"\n      node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual\n    \"\n    [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n    *matRowDef=\"let node; let i = index; let last = last; columns: visibleColumnNames$ | async\"\n    (contextmenu)=\"onRowContextMenu({ event: $event, node: node })\"\n    (keydown.ContextMenu)=\"onRowContextMenu({ event: $event, node: node })\"\n  >\n    <es-drag-preview\n      *cdkDragPreview\n      [node]=\"node\"\n      [selected]=\"entriesService.selection.selected\"\n      [item]=\"(visibleDataColumns$ | async)[0]\"\n    ></es-drag-preview>\n  </mat-row>\n</mat-table>\n<ng-container\n  *ngIf=\"\n    (entriesService.dataSource.isLoadingSubject | async) === false &&\n    entriesService.dataSource.hasMore() &&\n    entriesService.paginationStrategy === 'infinite-scroll'\n  \"\n>\n  <div class=\"load-more\">\n    <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n      <i esIcon=\"refresh\"></i>\n      <span>{{ 'LOAD_MORE' | translate }}</span>\n    </button>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"entriesService.dataSource.isLoadingSubject | async\">\n  <ng-container *ngTemplateOutlet=\"loading\"> </ng-container>\n</ng-container>\n<!--\n<mat-paginator #paginator [pageSizeOptions]=\"pageSizeOptions\"></mat-paginator>\n-->\n\n<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes\navailable. -->\n<es-column-chooser\n  *ngIf=\"columnChooserTriggerReady\"\n  [(columns)]=\"entriesService.columns\"\n  [(columnChooserVisible)]=\"columnChooserVisible\"\n  [origin]=\"columnChooserTrigger\"\n></es-column-chooser>\n<ng-template #loading>\n  <es-spinner></es-spinner>\n</ng-template>\n<ng-template #icon let-node=\"node\">\n  <div class=\"icon-bg\">\n    <img\n      *ngIf=\"node.iconURL\"\n      [src]=\"node | esNodeIcon | async\"\n      [alt]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n      [matTooltip]=\"\n        node.mediatype\n          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n          : ''\n      \"\n      matTooltipTouchGestures=\"off\"\n    />\n    <i\n      *ngIf=\"!node.iconURL\"\n      [esIcon]=\"node.authorityType ? (node.authorityType === 'GROUP' ? 'group' : 'person') : null\"\n    ></i>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep mat-header-cell{color:var(--textMediumLight)}:host ::ng-deep mat-cell,:host ::ng-deep mat-header-cell{margin:0!important}:host ::ng-deep mat-cell es-node-url{width:100%}:host ::ng-deep mat-cell es-node-url a{color:#000}:host ::ng-deep mat-cell es-node-url.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}:host ::ng-deep es-list-base{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline;width:100%;padding:20.3px 0;align-items:center}:host ::ng-deep es-list-base>div{display:inline}:host ::ng-deep es-list-base>div>div{display:inline}mat-header-cell,mat-cell{margin:0 3px}mat-header-cell:not(.mat-column-primary),mat-cell:not(.mat-column-primary){flex:0 145px}mat-header-cell.mat-column-primary,mat-cell.mat-column-primary{min-width:30%}mat-header-cell.mat-column-select,mat-cell.mat-column-select{flex:0 58px;min-width:58px;padding-left:14px}mat-header-cell.mat-column-icon,mat-cell.mat-column-icon{flex:0 85px;min-width:85px;justify-content:center}mat-header-cell.mat-column-actions,mat-cell.mat-column-actions{flex:0 58px;min-width:58px;display:flex;justify-content:flex-end;padding-right:5px}.mat-row{background:unset}.mat-row.dynamic-single-click{cursor:pointer}.mat-row.dynamic-single-click:hover{background-color:rgb(var(--palette-primary-50))}.mat-row.mat-row-import-blocked{opacity:.75;text-decoration:line-through}.mat-row.mat-row-selected{background:var(--listItemSelectedBackgroundEffect)}.mat-row.mat-row-selected .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual{background:linear-gradient(to right,var(--nodeVirtualColor) 5px,transparent 5px) no-repeat;border-right:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual.mat-row-selected{background:linear-gradient(to right,var(--nodeVirtualColor) 0,var(--nodeVirtualColor) 5px,var(--listItemSelectedBackground) 5px,var(--listItemSelectedBackground) 5px)}.mat-row.mat-row-virtual-first{border-top:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual-last{border-bottom:2px dashed var(--nodeVirtualColorLight)}.mat-row.selected-when-dragging{opacity:.5}.dropdown-dummy{position:fixed}.childobjects{background-color:#0000000d;border-radius:15px;display:inline-flex;align-items:center;min-width:51px;min-height:26px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px;margin-left:5px}.childobjects>.childobject-count{display:inline-flex;align-items:center}.childobjects>.childobject-count>i{font-size:13px;margin-left:4px}.cell-icon .icon-bg{width:36px;height:36px;padding:3px;margin:1px 0;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 3px #0000004d}.cell-icon .icon-bg>img{width:18px;height:auto}.cell-icon .icon-bg>i{color:#666;font-size:18px}.mat-column-link{flex:0 60px}.mat-column-link a,.load-more{display:flex;justify-content:center}es-node-entries-global-options{padding:20px 0}\n"] }]
+            args: [{ selector: 'es-node-entries-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n<button\n  #menuTrigger=\"matMenuTrigger\"\n  mat-button\n  class=\"dropdown-dummy cdk-visually-hidden\"\n  [style.left.px]=\"dropdownLeft\"\n  [style.top.px]=\"dropdownTop\"\n  [matMenuTriggerFor]=\"dropdown.menu\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n></button>\n<es-node-entries-global-options\n  *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n  [displayType]=\"NodeEntriesDisplayType.Table\"\n>\n</es-node-entries-global-options>\n<mat-table\n  [dataSource]=\"entriesService.dataSource\"\n  matSort\n  [matSortDisableClear]=\"true\"\n  [matSortActive]=\"entriesService.sort?.active\"\n  [matSortDirection]=\"entriesService.sort?.direction\"\n  esInfiniteScroll\n  (scrolled)=\"loadData('scroll')\"\n>\n  <!-- Checkbox Column -->\n  <ng-container matColumnDef=\"select\" [sticky]=\"isScroll\">\n    <mat-header-cell *matHeaderCellDef>\n      <mat-checkbox\n        [ngModel]=\"entriesService.selection.selected.length > 0\"\n        [indeterminate]=\"\n          entriesService.selection.selected.length > 0 &&\n          entriesService.selection.selected.length !== entriesService.dataSource.getData().length\n        \"\n        (ngModelChange)=\"toggleAll($event)\"\n        color=\"primary\"\n        aria-label=\"{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}\"\n      ></mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\">\n      <mat-checkbox\n        [checked]=\"entriesService.selection.isSelected(node)\"\n        (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n        aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n        color=\"primary\"\n      ></mat-checkbox>\n    </mat-cell>\n  </ng-container>\n  <div matColumnDef=\"icon\" [sticky]=\"isScroll\">\n    <mat-header-cell *matHeaderCellDef class=\"cell-icon cell-count\">\n      ({{ entriesService.selection.selected.length\n      }}<ng-container *ngIf=\"entriesService.dataSource?.getTotal() !== undefined\">\n        / {{ entriesService.dataSource?.getTotal() }}</ng-container\n      >)\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\" class=\"cell-icon\">\n      <ng-container\n        *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n      >\n        <ng-container *ngTemplateOutlet=\"icon; context: { node: node }\"></ng-container>\n      </ng-container>\n      <div\n        *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n        (click)=\"\n          entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n        \"\n        (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"icon; context: { node: node }\"\n          (click)=\"\n            entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n          \"\n          (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n        ></ng-container>\n      </div>\n    </mat-cell>\n  </div>\n  <ng-container matColumnDef=\"actions\" [stickyEnd]=\"isScroll\">\n    <mat-header-cell *matHeaderCellDef>\n      <button\n        *ngIf=\"entriesService.configureColumns\"\n        mat-icon-button\n        (click)=\"columnChooserVisible = !columnChooserVisible\"\n        cdkOverlayOrigin\n        #columnChooserTrigger=\"cdkOverlayOrigin\"\n        [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n        [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n      >\n        <i esIcon=\"settings\"></i>\n      </button>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let node\">\n      <button\n        mat-icon-button\n        *ngIf=\"entriesService.options?.[Target.List]?.length\"\n        color=\"primary\"\n        (click)=\"openMenu(node)\"\n        [matMenuTriggerFor]=\"dropdown.menu\"\n      >\n        <i esIcon=\"more_vert\" [aria]=\"true\"></i>\n      </button>\n    </mat-cell>\n  </ng-container>\n  <!-- Data Columns -->\n  <ng-container\n    *ngFor=\"let column of visibleDataColumns$ | async; let first = first\"\n    [matColumnDef]=\"column.name\"\n    [sticky]=\"first && isScroll\"\n  >\n    <ng-container>\n      <mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        [disabled]=\"!(entriesService.sort?.allowed && isSortable(column))\"\n        [class.mat-column-primary]=\"first\"\n        [style.min-width]=\"first ? (containerWidth$ | async) / 3 + 'px' : null\"\n        >{{ column | esListItemLabel | async }}</mat-header-cell\n      >\n    </ng-container>\n    <mat-cell\n      *matCellDef=\"let node\"\n      #cell\n      [class.mat-column-primary]=\"first\"\n      [style.min-width]=\"first ? (containerWidth$ | async) / 3 + 'px' : null\"\n      attr.data-test=\"table-cell-{{ column.name }}\"\n    >\n      <ng-container\n        *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n      >\n        <es-node-url cdkMonitorSubtreeFocus [node]=\"node\" [mode]=\"first ? 'link' : 'wrapper'\">\n          <es-list-base\n            [forceText]=\"true\"\n            [node]=\"node\"\n            [item]=\"column\"\n            esCheckTextOverflow\n            #text=\"esCheckTextOverflow\"\n            [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n            matTooltipTouchGestures=\"off\"\n          ></es-list-base>\n        </es-node-url>\n      </ng-container>\n      <es-list-base\n        *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n        [forceText]=\"true\"\n        [node]=\"node\"\n        [item]=\"column\"\n        (click)=\"\n          entriesService.onClicked({\n            event: $event,\n            element: node,\n            source: ClickSource.Metadata,\n            attribute: column,\n          })\n        \"\n        (dblclick)=\"\n          entriesService.dblClickItem.emit({\n            element: node,\n            source: ClickSource.Metadata,\n            attribute: column,\n          })\n        \"\n      ></es-list-base>\n      <ng-container *ngIf=\"first\">\n        <div class=\"childobjects\" *ngIf=\"node.properties?.['virtual:childobjectcount'] > 0\">\n          <div\n            class=\"childobject-count\"\n            matTooltip=\"{{\n              'CHILDOBJECT_COUNT'\n                | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }\n            }}\"\n          >\n            <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span\n            ><i esIcon=\"filter_none\"></i>\n          </div>\n        </div>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n  <mat-header-row mat-header-row *matHeaderRowDef=\"visibleColumnNames$ | async\"></mat-header-row>\n  <mat-row\n    mat-row\n    matRipple\n    [matRippleDisabled]=\"isScroll\"\n    cdkDrag\n    esNodesDrag\n    [cdkDragDisabled]=\"!entriesService.dragDrop?.dragAllowed || (ui.isTouchSubject | async)\"\n    [cdkDragData]=\"getDragData(node)\"\n    (cdkDragStarted)=\"onDragStarted(node)\"\n    (cdkDragEnded)=\"onDragEnded()\"\n    [esNodesDropTarget]=\"node\"\n    [canDropNodes]=\"canDrop\"\n    (nodeDropped)=\"drop($event)\"\n    class=\"mat-row\"\n    [class.mat-row-selected]=\"entriesService.selection.isSelected(node)\"\n    [class.mat-row-import-blocked]=\"isBlocked(node)\"\n    [class.selected-when-dragging]=\"isDragging && entriesService.selection.isSelected(node)\"\n    [class.mat-row-virtual]=\"node.virtual\"\n    [class.mat-row-virtual-first]=\"\n      node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual\n    \"\n    [class.mat-row-virtual-last]=\"\n      node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual\n    \"\n    [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n    *matRowDef=\"let node; let i = index; let last = last; columns: visibleColumnNames$ | async\"\n    (contextmenu)=\"onRowContextMenu({ event: $event, node: node })\"\n    (keydown.ContextMenu)=\"onRowContextMenu({ event: $event, node: node })\"\n  >\n    <es-drag-preview\n      *cdkDragPreview\n      [node]=\"node\"\n      [selected]=\"entriesService.selection.selected\"\n      [item]=\"(visibleDataColumns$ | async)[0]\"\n    ></es-drag-preview>\n  </mat-row>\n</mat-table>\n<ng-container\n  *ngIf=\"\n    (entriesService.dataSource.isLoadingSubject | async) === false &&\n    entriesService.dataSource.hasMore() &&\n    entriesService.paginationStrategy === 'infinite-scroll'\n  \"\n>\n  <div class=\"load-more\">\n    <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n      <i esIcon=\"refresh\"></i>\n      <span>{{ 'LOAD_MORE' | translate }}</span>\n    </button>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"entriesService.dataSource.isLoadingSubject | async\">\n  <ng-container *ngTemplateOutlet=\"loading\"> </ng-container>\n</ng-container>\n<!--\n<mat-paginator #paginator [pageSizeOptions]=\"pageSizeOptions\"></mat-paginator>\n-->\n\n<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes\navailable. -->\n<es-column-chooser\n  *ngIf=\"columnChooserTriggerReady\"\n  [(columns)]=\"entriesService.columns\"\n  [(columnChooserVisible)]=\"columnChooserVisible\"\n  [origin]=\"columnChooserTrigger\"\n></es-column-chooser>\n<ng-template #loading>\n  <es-spinner></es-spinner>\n</ng-template>\n<ng-template #icon let-node=\"node\">\n  <div class=\"icon-bg\">\n    <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host.scroll{overflow-x:auto}:host.scroll>mat-table{width:fit-content}:host.scroll>mat-table .mat-row{overflow:visible}:host.scroll>mat-table mat-header-cell:not(.mat-mdc-table-sticky),:host.scroll>mat-table mat-cell:not(.mat-mdc-table-sticky){min-width:150px}:host.scroll>mat-table mat-header-cell.mat-column-primary,:host.scroll>mat-table mat-cell.mat-column-primary{box-shadow:4px 0 8px -4px #00000026}:host.scroll>mat-table mat-header-cell.mat-mdc-table-sticky-border-elem-right,:host.scroll>mat-table mat-cell.mat-mdc-table-sticky-border-elem-right{box-shadow:-4px 0 8px -4px #00000026}:host ::ng-deep mat-header-cell{color:var(--textMediumLight)}:host ::ng-deep mat-cell,:host ::ng-deep mat-header-cell{margin:0!important}:host ::ng-deep mat-cell es-node-url{width:100%}:host ::ng-deep mat-cell es-node-url a{color:#000}:host ::ng-deep mat-cell es-node-url.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}:host ::ng-deep es-list-base{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline;width:100%;padding:20.3px 0;align-items:center}:host ::ng-deep es-list-base>div{display:inline}:host ::ng-deep es-list-base>div>div{display:inline}mat-header-cell,mat-cell{margin:0 3px}mat-header-cell.mat-mdc-table-sticky,mat-cell.mat-mdc-table-sticky{background:var(--mat-table-background-color, var(--mat-sys-surface))}mat-header-cell:not(.mat-column-primary),mat-cell:not(.mat-column-primary){flex:0 145px}mat-header-cell.mat-column-primary,mat-cell.mat-column-primary{min-width:30%}mat-header-cell.mat-column-select,mat-cell.mat-column-select{flex:0 58px;min-width:58px;padding-left:14px}mat-header-cell.mat-column-icon,mat-cell.mat-column-icon{flex:0 85px;min-width:85px;justify-content:center}mat-header-cell.mat-column-actions,mat-cell.mat-column-actions{flex:0 58px;min-width:58px;display:flex;justify-content:flex-end;padding-right:5px}.mat-row{background:unset}.mat-row.dynamic-single-click{cursor:pointer}.mat-row.dynamic-single-click:hover{background-color:rgb(var(--palette-primary-50))}.mat-row.mat-row-import-blocked{opacity:.75;text-decoration:line-through}.mat-row.mat-row-selected{background:var(--listItemSelectedBackgroundEffect)}.mat-row.mat-row-selected .mat-mdc-cell{background:var(--listItemSelectedBackground)}.mat-row.mat-row-virtual{background:linear-gradient(to right,var(--nodeVirtualColor) 5px,transparent 5px) no-repeat;border-right:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual.mat-row-selected{background:linear-gradient(to right,var(--nodeVirtualColor) 0,var(--nodeVirtualColor) 5px,var(--listItemSelectedBackground) 5px,var(--listItemSelectedBackground) 5px)}.mat-row.mat-row-virtual-first{border-top:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual-last{border-bottom:2px dashed var(--nodeVirtualColorLight)}.mat-row.selected-when-dragging{opacity:.5}.dropdown-dummy{position:fixed}.childobjects{background-color:#0000000d;border-radius:15px;display:inline-flex;align-items:center;min-width:51px;min-height:26px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px;margin-left:5px}.childobjects>.childobject-count{display:inline-flex;align-items:center}.childobjects>.childobject-count>i{font-size:13px;margin-left:4px}.cell-icon .icon-bg{width:36px;height:36px;padding:3px;margin:1px 0;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 3px #0000004d}.cell-icon .icon-bg>es-node-type-badge{box-shadow:none}.cell-icon .icon-bg>img{width:18px;height:auto}.cell-icon .icon-bg>i{color:#666;font-size:18px}.mat-column-link{flex:0 60px}.mat-column-link a,.load-more{display:flex;justify-content:center}es-node-entries-global-options{padding:20px 0}\n"] }]
         }], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeEntriesGlobalService }, { type: i0.ApplicationRef }, { type: Toast }, { type: TranslationsService }, { type: NodeHelperService }, { type: i0.ChangeDetectorRef }, { type: UIService }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -7021,6 +7166,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], menuTrigger: [{
                 type: ViewChild,
                 args: ['menuTrigger']
+            }], isScroll: [{
+                type: HostBinding,
+                args: ['class.scroll']
             }] } });
 
 /**
@@ -7177,7 +7325,7 @@ class OptionsHelperDataService {
         return this.data;
     }
     setData(data) {
-        this.data = this.optionsHelperService.wrapOptionCallbacks(data);
+        this.data = this.optionsHelperService?.wrapOptionCallbacks(data) || data;
     }
     async refreshComponents() {
         if (this.data == null) {
@@ -7232,7 +7380,7 @@ class OptionsHelperDataService {
         }
     }
     filterOptions(options, target, objects = null) {
-        return this.optionsHelperService.filterOptions(options, target, this.data, objects);
+        return (this.optionsHelperService?.filterOptions(options, target, this.data, objects) || options);
     }
     /**
      * shortcut to simply disable all options on the given compoennts
@@ -7250,25 +7398,31 @@ class OptionsHelperDataService {
     pasteNode(nodes = []) {
         this.optionsHelperService.pasteNode(this.components, this.data, true, nodes);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OptionsHelperDataService, deps: [{ token: i0.NgZone }, { token: i2$1.ActivatedRoute }, { token: LocalEventsService }, { token: i2.AuthenticationService }, { token: Toast }, { token: i2.UserService }, { token: i2.NetworkService }, { token: KeyboardShortcutsService, optional: true }, { token: OptionsHelperService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OptionsHelperDataService, deps: [{ token: i0.NgZone }, { token: i6.ActivatedRoute, optional: true }, { token: LocalEventsService }, { token: i1.AuthenticationService }, { token: Toast }, { token: i1.UserService }, { token: i1.NetworkService }, { token: KeyboardShortcutsService, optional: true }, { token: OptionsHelperService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OptionsHelperDataService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OptionsHelperDataService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i2$1.ActivatedRoute }, { type: LocalEventsService }, { type: i2.AuthenticationService }, { type: Toast }, { type: i2.UserService }, { type: i2.NetworkService }, { type: KeyboardShortcutsService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i6.ActivatedRoute, decorators: [{
+                    type: Optional
+                }] }, { type: LocalEventsService }, { type: i1.AuthenticationService }, { type: Toast }, { type: i1.UserService }, { type: i1.NetworkService }, { type: KeyboardShortcutsService, decorators: [{
                     type: Optional
                 }] }, { type: OptionsHelperService, decorators: [{
                     type: Optional
                 }] }] });
 
 class NodeEntriesComponent {
-    constructor(changeDetectorRef, entriesGlobalService, entriesService, templatesService, globalKeyboardShortcuts, route, translate) {
+    get isEmpty() {
+        return this.entriesService.dataSource?.isEmpty();
+    }
+    constructor(changeDetectorRef, entriesGlobalService, entriesService, templatesService, globalKeyboardShortcuts, route, translationsService, translate) {
         this.changeDetectorRef = changeDetectorRef;
         this.entriesGlobalService = entriesGlobalService;
         this.entriesService = entriesService;
         this.templatesService = templatesService;
         this.globalKeyboardShortcuts = globalKeyboardShortcuts;
         this.route = route;
+        this.translationsService = translationsService;
         this.translate = translate;
         this.NodeEntriesDisplayType = NodeEntriesDisplayType;
         this.destroyed = new Subject();
@@ -7319,21 +7473,17 @@ class NodeEntriesComponent {
             },
             defaultSort: this.entriesService.sort,
         });
-        if (this.entriesService.primaryInstance) {
+        if (this.entriesService.primaryInstance && this.route) {
             // Automatic query-params handling is only supported by node-data-source-remote.
             dataSource.registerQueryParameters(this.route);
         }
     }
     async initPaginator(paginator) {
-        paginator._intl.itemsPerPageLabel = await this.translate
-            .get('PAGINATOR.itemsPerPageLabel')
-            .toPromise();
-        paginator._intl.nextPageLabel = await this.translate
-            .get('PAGINATOR.nextPageLabel')
-            .toPromise();
-        paginator._intl.previousPageLabel = await this.translate
-            .get('PAGINATOR.previousPageLabel')
-            .toPromise();
+        await firstValueFrom(this.translationsService.waitForInit().pipe(first()));
+        this.paginator._intl.itemsPerPageLabel = this.translate.instant('PAGINATOR.itemsPerPageLabel');
+        this.paginator._intl.firstPageLabel = this.translate.instant('PAGINATOR.firstPageLabel');
+        this.paginator._intl.nextPageLabel = this.translate.instant('PAGINATOR.nextPageLabel');
+        this.paginator._intl.previousPageLabel = this.translate.instant('PAGINATOR.previousPageLabel');
         paginator._intl.getRangeLabel = (page, pageSize, length) => this.translate.instant('PAGINATOR.getRangeLabel', {
             page: page + 1,
             pageSize,
@@ -7363,17 +7513,22 @@ class NodeEntriesComponent {
             reset: true,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NodeEntriesGlobalService }, { token: NodeEntriesService }, { token: NodeEntriesTemplatesService }, { token: KeyboardShortcutsService, optional: true }, { token: i2$1.ActivatedRoute }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesComponent, isStandalone: false, selector: "es-node-entries", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"top-matter\">\n  <div class=\"title\">\n    <ng-container *ngTemplateOutlet=\"templatesService.title\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"templatesService.entriesTopMatter\"></ng-container>\n</div>\n<ng-container *ngIf=\"entriesService.dataSource\">\n  <ng-container *ngIf=\"entriesService.displayType === NodeEntriesDisplayType.Table\">\n    <es-node-entries-table></es-node-entries-table>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      entriesService.displayType === NodeEntriesDisplayType.SmallGrid ||\n      entriesService.displayType === NodeEntriesDisplayType.Grid\n    \"\n  >\n    <es-node-entries-card-grid [displayType]=\"entriesService.displayType\">\n    </es-node-entries-card-grid>\n  </ng-container>\n  <ng-container *ngIf=\"entriesService.dataSource.isEmpty() && !entriesService.dataSource.isLoading\">\n    <ng-container *ngTemplateOutlet=\"templatesService.empty\"></ng-container>\n  </ng-container>\n</ng-container>\n<mat-paginator\n  #paginator\n  [pageSizeOptions]=\"entriesGlobalService.getPaginatorSizeOptions(entriesService.scope)\"\n  *ngIf=\"entriesService.paginationStrategy === 'paginator'\"\n  [class.display-none]=\"\n    (entriesService.dataSource.isLoading && entriesService.dataSource.isLoading !== 'page') ||\n    entriesService.dataSource.isEmpty()\n  \"\n  (page)=\"openPage($event)\"\n></mat-paginator>\n", styles: [".top-matter{display:flex;align-items:center;flex-wrap:wrap;gap:12px 10px;position:relative;z-index:1}.top-matter .title{display:flex;flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: NodeEntriesCardGridComponent, selector: "es-node-entries-card-grid", inputs: ["displayType"] }, { kind: "component", type: NodeEntriesTableComponent, selector: "es-node-entries-table" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NodeEntriesGlobalService }, { token: NodeEntriesService }, { token: NodeEntriesTemplatesService }, { token: KeyboardShortcutsService, optional: true }, { token: i6.ActivatedRoute, optional: true }, { token: TranslationsService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesComponent, isStandalone: false, selector: "es-node-entries", host: { properties: { "class.node-entries-empty": "this.isEmpty" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"top-matter\">\n  <div class=\"title\">\n    <ng-container *ngTemplateOutlet=\"templatesService.title\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"templatesService.entriesTopMatter\"></ng-container>\n</div>\n<div\n  *ngIf=\"entriesService.dataSource\"\n  class=\"node-entries-content\"\n  [class.node-entries-content-table]=\"entriesService.displayType === NodeEntriesDisplayType.Table\"\n>\n  <ng-container *ngIf=\"entriesService.displayType === NodeEntriesDisplayType.Table\">\n    <es-node-entries-table></es-node-entries-table>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      entriesService.displayType === NodeEntriesDisplayType.SmallGrid ||\n      entriesService.displayType === NodeEntriesDisplayType.Grid\n    \"\n  >\n    <es-node-entries-card-grid [displayType]=\"entriesService.displayType\">\n    </es-node-entries-card-grid>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      entriesService.dataSource.isEmpty() &&\n      !entriesService.dataSource.isLoading &&\n      templatesService.empty\n    \"\n  >\n    <div class=\"empty-container\">\n      <ng-container *ngTemplateOutlet=\"templatesService.empty\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n<mat-paginator\n  #paginator\n  [pageSizeOptions]=\"entriesGlobalService.getPaginatorSizeOptions(entriesService.scope)\"\n  *ngIf=\"entriesService.paginationStrategy === 'paginator'\"\n  [class.display-none]=\"\n    (entriesService.dataSource.isLoading && entriesService.dataSource.isLoading !== 'page') ||\n    entriesService.dataSource.isEmpty()\n  \"\n  (page)=\"openPage($event)\"\n></mat-paginator>\n", styles: [".top-matter{display:flex;align-items:center;flex-wrap:wrap;gap:12px 10px;width:100%;position:relative;z-index:1}.top-matter .title{display:flex;flex-grow:1}es-node-entries-table{width:100%}:host(.node-entries-empty){display:flex;flex-wrap:wrap}:host(.node-entries-empty)>.node-entries-content{display:flex;justify-content:flex-start;align-items:center;flex-grow:1}@media screen and (max-width: 600px){:host(.node-entries-empty)>.node-entries-content{flex-wrap:wrap}}:host(.node-entries-empty)>.node-entries-content.node-entries-content-table{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i9$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: NodeEntriesCardGridComponent, selector: "es-node-entries-card-grid", inputs: ["displayType"] }, { kind: "component", type: NodeEntriesTableComponent, selector: "es-node-entries-table" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries', standalone: false, template: "<div class=\"top-matter\">\n  <div class=\"title\">\n    <ng-container *ngTemplateOutlet=\"templatesService.title\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"templatesService.entriesTopMatter\"></ng-container>\n</div>\n<ng-container *ngIf=\"entriesService.dataSource\">\n  <ng-container *ngIf=\"entriesService.displayType === NodeEntriesDisplayType.Table\">\n    <es-node-entries-table></es-node-entries-table>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      entriesService.displayType === NodeEntriesDisplayType.SmallGrid ||\n      entriesService.displayType === NodeEntriesDisplayType.Grid\n    \"\n  >\n    <es-node-entries-card-grid [displayType]=\"entriesService.displayType\">\n    </es-node-entries-card-grid>\n  </ng-container>\n  <ng-container *ngIf=\"entriesService.dataSource.isEmpty() && !entriesService.dataSource.isLoading\">\n    <ng-container *ngTemplateOutlet=\"templatesService.empty\"></ng-container>\n  </ng-container>\n</ng-container>\n<mat-paginator\n  #paginator\n  [pageSizeOptions]=\"entriesGlobalService.getPaginatorSizeOptions(entriesService.scope)\"\n  *ngIf=\"entriesService.paginationStrategy === 'paginator'\"\n  [class.display-none]=\"\n    (entriesService.dataSource.isLoading && entriesService.dataSource.isLoading !== 'page') ||\n    entriesService.dataSource.isEmpty()\n  \"\n  (page)=\"openPage($event)\"\n></mat-paginator>\n", styles: [".top-matter{display:flex;align-items:center;flex-wrap:wrap;gap:12px 10px;position:relative;z-index:1}.top-matter .title{display:flex;flex-grow:1}\n"] }]
+            args: [{ selector: 'es-node-entries', standalone: false, template: "<div class=\"top-matter\">\n  <div class=\"title\">\n    <ng-container *ngTemplateOutlet=\"templatesService.title\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"templatesService.entriesTopMatter\"></ng-container>\n</div>\n<div\n  *ngIf=\"entriesService.dataSource\"\n  class=\"node-entries-content\"\n  [class.node-entries-content-table]=\"entriesService.displayType === NodeEntriesDisplayType.Table\"\n>\n  <ng-container *ngIf=\"entriesService.displayType === NodeEntriesDisplayType.Table\">\n    <es-node-entries-table></es-node-entries-table>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      entriesService.displayType === NodeEntriesDisplayType.SmallGrid ||\n      entriesService.displayType === NodeEntriesDisplayType.Grid\n    \"\n  >\n    <es-node-entries-card-grid [displayType]=\"entriesService.displayType\">\n    </es-node-entries-card-grid>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      entriesService.dataSource.isEmpty() &&\n      !entriesService.dataSource.isLoading &&\n      templatesService.empty\n    \"\n  >\n    <div class=\"empty-container\">\n      <ng-container *ngTemplateOutlet=\"templatesService.empty\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n<mat-paginator\n  #paginator\n  [pageSizeOptions]=\"entriesGlobalService.getPaginatorSizeOptions(entriesService.scope)\"\n  *ngIf=\"entriesService.paginationStrategy === 'paginator'\"\n  [class.display-none]=\"\n    (entriesService.dataSource.isLoading && entriesService.dataSource.isLoading !== 'page') ||\n    entriesService.dataSource.isEmpty()\n  \"\n  (page)=\"openPage($event)\"\n></mat-paginator>\n", styles: [".top-matter{display:flex;align-items:center;flex-wrap:wrap;gap:12px 10px;width:100%;position:relative;z-index:1}.top-matter .title{display:flex;flex-grow:1}es-node-entries-table{width:100%}:host(.node-entries-empty){display:flex;flex-wrap:wrap}:host(.node-entries-empty)>.node-entries-content{display:flex;justify-content:flex-start;align-items:center;flex-grow:1}@media screen and (max-width: 600px){:host(.node-entries-empty)>.node-entries-content{flex-wrap:wrap}}:host(.node-entries-empty)>.node-entries-content.node-entries-content-table{flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: NodeEntriesGlobalService }, { type: NodeEntriesService }, { type: NodeEntriesTemplatesService }, { type: KeyboardShortcutsService, decorators: [{
                     type: Optional
-                }] }, { type: i2$1.ActivatedRoute }, { type: i1.TranslateService }], propDecorators: { paginator: [{
+                }] }, { type: i6.ActivatedRoute, decorators: [{
+                    type: Optional
+                }] }, { type: TranslationsService }, { type: i1$1.TranslateService }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
+            }], isEmpty: [{
+                type: HostBinding,
+                args: ['class.node-entries-empty']
             }] } });
 
 class NodeEntriesWrapperComponent {
@@ -7400,6 +7555,7 @@ class NodeEntriesWrapperComponent {
         this.columnsChange = new EventEmitter();
         this.displayType = NodeEntriesDisplayType.Grid;
         this.displayTypeChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
         this.elementInteractionType = InteractionType.DefaultActionLink;
         /**
          * This color defines the base color of gradients visually limiting a grid in scroll direction.
@@ -7424,10 +7580,16 @@ class NodeEntriesWrapperComponent {
          * Do not load more data on scroll.
          */
         this.disableInfiniteScroll = false;
+        /**
+         *  show the icon column (table view only)
+         */
+        this.showIconColumn = true;
         this.fetchData = new EventEmitter();
         this.clickItem = new EventEmitter();
         this.dblClickItem = new EventEmitter();
         this.sortChange = new EventEmitter();
+        this.lastLoadingCompleted = -1;
+        this.dataSourceDestroy$ = new Subject();
         this.destroyed = new Subject();
         // regulary re-bind template since it might have updated without ngChanges trigger
         /*
@@ -7437,7 +7599,8 @@ class NodeEntriesWrapperComponent {
         */
         this.virtualNodesAdded = this.optionsHelper.virtualNodesAdded;
         this.displayTypeChanged = this.optionsHelper.displayTypeChanged;
-        this.entriesService.selection.changed.subscribe(() => {
+        this.entriesService.selection.changed.subscribe((event) => {
+            this.selectionChange.emit(event);
             if (this.optionsHelper.getData()) {
                 this.optionsHelper.getData().selectedObjects =
                     this.entriesService.selection.selected;
@@ -7463,10 +7626,26 @@ class NodeEntriesWrapperComponent {
         }
         this.entriesService.list = this;
         this.entriesService.dataSource = this.dataSource;
+        if (changes.dataSource &&
+            changes.dataSource.currentValue !== changes.dataSource.previousValue) {
+            this.dataSourceDestroy$.next();
+            this.entriesService.dataSource
+                .connect()
+                .pipe(distinctUntilChanged(), takeUntil(this.dataSourceDestroy$))
+                .subscribe((o) => {
+                if (this.optionsHelper.getData()) {
+                    this.optionsHelper.getData().allObjects = o;
+                    void this.optionsHelper.refreshComponents();
+                }
+            });
+            this.entriesService.dataSource.isLoadingSubject
+                .pipe(distinctUntilChanged(), skip(1), filter((l) => l === false), debounceTime(10), takeUntil(this.dataSourceDestroy$))
+                .subscribe(() => (this.lastLoadingCompleted = Date.now()));
+        }
         this.entriesService.scope = this.scope;
-        if (changes.columns) {
+        if (changes.columns || changes.displayType) {
             this.entriesService.columnsSubject.next({
-                columns: this.columns,
+                columns: this.columns[this.displayType === NodeEntriesDisplayType.Table ? 'Table' : 'Default'] || this.columns?.Default,
                 fromUser: false,
             });
         }
@@ -7475,6 +7654,9 @@ class NodeEntriesWrapperComponent {
         this.entriesService.displayType = this.displayType;
         this.entriesService.elementInteractionType = this.elementInteractionType;
         this.entriesService.gridConfig = this.gridConfig;
+        if (this.tableConfig) {
+            this.entriesService.tableConfig = this.tableConfig;
+        }
         this.entriesService.options = this.options;
         this.entriesService.globalOptions = this.globalOptions;
         this.entriesService.sort = this.sort;
@@ -7486,6 +7668,9 @@ class NodeEntriesWrapperComponent {
         this.entriesService.primaryInstance = this.primaryInstance;
         this.entriesService.singleClickHint = this.singleClickHint;
         this.entriesService.disableInfiniteScroll = this.disableInfiniteScroll;
+        if (changes.showIconColumn) {
+            this.entriesService.showIconColumn.next(this.showIconColumn);
+        }
         this.entriesService.scrollGradientColor.set(this.scrollGradientColor);
         if (changes['initConfig']) {
             void this.initOptionsGenerator(this.initConfig);
@@ -7497,6 +7682,8 @@ class NodeEntriesWrapperComponent {
         this.updateTemplates();
     }
     ngOnDestroy() {
+        this.dataSourceDestroy$.next();
+        this.dataSourceDestroy$.complete();
         this.destroyed.next();
         this.destroyed.complete();
     }
@@ -7639,12 +7826,22 @@ class NodeEntriesWrapperComponent {
     resetPagination() {
         this.nodeEntriesComponentRef?.paginator?.firstPage();
     }
+    /**
+     * inform the paginator about the current config set
+     * @param config
+     */
+    setPaginator(config) {
+        if (this.nodeEntriesComponentRef?.paginator) {
+            this.nodeEntriesComponentRef.paginator.pageIndex = config.skipCount / config.maxItems;
+            this.nodeEntriesComponentRef.paginator.pageSize = config.maxItems;
+        }
+    }
     deleteNodes(objects) {
         this.dataSource.removeData(objects);
         this.getSelection().clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesWrapperComponent, deps: [{ token: i0.ViewContainerRef }, { token: TemporaryStorageService }, { token: i0.NgZone }, { token: NodeEntriesService }, { token: i2.NodeService }, { token: OptionsHelperDataService }, { token: NodeHelperService }, { token: UIService }, { token: NodeEntriesTemplatesService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesWrapperComponent, isStandalone: false, selector: "es-node-entries-wrapper", inputs: { dataSource: "dataSource", scope: "scope", columns: "columns", configureColumns: "configureColumns", checkbox: "checkbox", globalOptions: "globalOptions", displayType: "displayType", elementInteractionType: "elementInteractionType", sort: "sort", dragDrop: "dragDrop", gridConfig: "gridConfig", scrollGradientColor: "scrollGradientColor", initConfig: "initConfig", primaryInstance: "primaryInstance", singleClickHint: "singleClickHint", disableInfiniteScroll: "disableInfiniteScroll" }, outputs: { columnsChange: "columnsChange", displayTypeChange: "displayTypeChange", fetchData: "fetchData", clickItem: "clickItem", dblClickItem: "dblClickItem", sortChange: "sortChange", virtualNodesAdded: "virtualNodesAdded", displayTypeChanged: "displayTypeChanged" }, providers: [NodeEntriesService, OptionsHelperDataService, NodeEntriesTemplatesService], queries: [{ propertyName: "titleRef", first: true, predicate: ["title"], descendants: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true }, { propertyName: "actionAreaRef", first: true, predicate: ["actionArea"], descendants: true }, { propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true }], viewQueries: [{ propertyName: "nodeEntriesComponentRef", first: true, predicate: ["nodeEntriesComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<es-node-entries
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesWrapperComponent, deps: [{ token: i0.ViewContainerRef }, { token: TemporaryStorageService }, { token: i0.NgZone }, { token: NodeEntriesService }, { token: i1.NodeService }, { token: OptionsHelperDataService }, { token: NodeHelperService }, { token: UIService }, { token: NodeEntriesTemplatesService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeEntriesWrapperComponent, isStandalone: false, selector: "es-node-entries-wrapper", inputs: { dataSource: "dataSource", scope: "scope", columns: "columns", configureColumns: "configureColumns", checkbox: "checkbox", globalOptions: "globalOptions", displayType: "displayType", elementInteractionType: "elementInteractionType", sort: "sort", dragDrop: "dragDrop", gridConfig: "gridConfig", tableConfig: "tableConfig", scrollGradientColor: "scrollGradientColor", initConfig: "initConfig", primaryInstance: "primaryInstance", singleClickHint: "singleClickHint", disableInfiniteScroll: "disableInfiniteScroll", showIconColumn: "showIconColumn" }, outputs: { columnsChange: "columnsChange", displayTypeChange: "displayTypeChange", selectionChange: "selectionChange", fetchData: "fetchData", clickItem: "clickItem", dblClickItem: "dblClickItem", sortChange: "sortChange", virtualNodesAdded: "virtualNodesAdded", displayTypeChanged: "displayTypeChanged" }, host: { properties: { "attr.data-last-loading-completed": "this.lastLoadingCompleted" } }, providers: [NodeEntriesService, OptionsHelperDataService, NodeEntriesTemplatesService], queries: [{ propertyName: "titleRef", first: true, predicate: ["title"], descendants: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true }, { propertyName: "actionAreaRef", first: true, predicate: ["actionArea"], descendants: true }, { propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true }], viewQueries: [{ propertyName: "nodeEntriesComponentRef", first: true, predicate: ["nodeEntriesComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<es-node-entries
         #nodeEntriesComponent
         *ngIf="!customNodeListComponent"
     ></es-node-entries>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NodeEntriesComponent, selector: "es-node-entries" }] }); }
@@ -7660,7 +7857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     providers: [NodeEntriesService, OptionsHelperDataService, NodeEntriesTemplatesService],
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: TemporaryStorageService }, { type: i0.NgZone }, { type: NodeEntriesService }, { type: i2.NodeService }, { type: OptionsHelperDataService }, { type: NodeHelperService }, { type: UIService }, { type: NodeEntriesTemplatesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { titleRef: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: TemporaryStorageService }, { type: i0.NgZone }, { type: NodeEntriesService }, { type: i1.NodeService }, { type: OptionsHelperDataService }, { type: NodeHelperService }, { type: UIService }, { type: NodeEntriesTemplatesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { titleRef: [{
                 type: ContentChild,
                 args: ['title']
             }], emptyRef: [{
@@ -7693,6 +7890,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], displayTypeChange: [{
                 type: Output
+            }], selectionChange: [{
+                type: Output
             }], elementInteractionType: [{
                 type: Input
             }], sort: [{
@@ -7701,6 +7900,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], gridConfig: [{
                 type: Input
+            }], tableConfig: [{
+                type: Input
             }], scrollGradientColor: [{
                 type: Input
             }], initConfig: [{
@@ -7711,6 +7912,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], disableInfiniteScroll: [{
                 type: Input
+            }], showIconColumn: [{
+                type: Input
             }], fetchData: [{
                 type: Output
             }], clickItem: [{
@@ -7723,6 +7926,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], displayTypeChanged: [{
                 type: Output
+            }], lastLoadingCompleted: [{
+                type: HostBinding,
+                args: ['attr.data-last-loading-completed']
             }] } });
 
 class NodeEntriesModule {
@@ -7765,11 +7971,15 @@ class NodeEntriesModule {
             MatSlideToggleModule,
             MatSortModule,
             MatTooltipModule,
-            TranslateModule], exports: [NodeEntriesWrapperComponent,
+            TranslateModule], exports: [ListItemLabelPipe,
+            NodeEntriesWrapperComponent,
+            NodeEntriesCardComponent,
+            NodeRatingComponent,
             NodesDragDirective,
             NodesDragSourceDirective,
             NodesDropTargetDirective,
-            ListItemLabelPipe] }); }
+            NodeStatsBadgesComponent,
+            NodeTypeBadgeComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntriesModule, imports: [CommonModule,
             FormsModule,
             A11yModule,
@@ -7838,20 +8048,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         TranslateModule,
                     ],
                     exports: [
+                        ListItemLabelPipe,
                         NodeEntriesWrapperComponent,
+                        NodeEntriesCardComponent,
+                        NodeRatingComponent,
                         NodesDragDirective,
                         NodesDragSourceDirective,
                         NodesDropTargetDirective,
-                        ListItemLabelPipe,
+                        NodeStatsBadgesComponent,
+                        NodeTypeBadgeComponent,
                     ],
                 }]
         }] });
 
 class EduSharingUiModule {
-    static forRoot(config) {
+    static forRoot(config, providers = []) {
         return {
             ngModule: EduSharingUiModule,
-            providers: [getConfigProvider(config)],
+            providers: [getConfigProvider(config), ...providers],
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EduSharingUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -8035,10 +8249,10 @@ class RenderHelperService {
         this.userService = userService;
         this.optionsHelperDataService = optionsHelperDataService;
     }
-    async getRenderData(nodeId, version = null) {
+    async getRenderData(nodeId, version = null, repository = HOME_REPOSITORY) {
         const about = await firstValueFrom(this.aboutService.getAbout());
         const securedNode = await firstValueFrom(this.nodeApiUnwrapped.getMetadataSigned({
-            repository: HOME_REPOSITORY,
+            repository: repository || HOME_REPOSITORY,
             node: nodeId,
         }));
         const node = securedNode.node;
@@ -8070,12 +8284,7 @@ class RenderHelperService {
             };
         }
         console.info(about.renderingService2?.url);
-        if (this.configuration.production) {
-            this.injector.get(RSApiConfiguration).rootUrl = about.renderingService2.url.replace(/\/$/g, '');
-        }
-        else {
-            this.injector.get(RSApiConfiguration).rootUrl = '/rendering2';
-        }
+        this.prepareRootUrl();
         console.info(this.injector.get(RSApiConfiguration));
         const token = securedNode.jwt;
         console.info(token, node);
@@ -8120,12 +8329,24 @@ class RenderHelperService {
             request,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RenderHelperService, deps: [{ token: i0.Injector }, { token: i2.AboutService }, { token: i2.NodeServiceUnwrapped }, { token: EduSharingUiConfiguration }, { token: i2.UserService }, { token: OptionsHelperDataService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RenderHelperService }); }
+    async prepareRootUrl() {
+        const about = await firstValueFrom(this.aboutService.getAbout());
+        if (this.configuration.production) {
+            this.injector.get(RSApiConfiguration).rootUrl = about.renderingService2.url.replace(/\/$/g, '');
+        }
+        else {
+            console.info('dev mode active, routing rendering to proxy');
+            this.injector.get(RSApiConfiguration).rootUrl = '/rendering2';
+        }
+        console.info(this.injector.get(RSApiConfiguration));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RenderHelperService, deps: [{ token: i0.Injector }, { token: i1.AboutService }, { token: i1.NodeServiceUnwrapped }, { token: EduSharingUiConfiguration }, { token: i1.UserService }, { token: OptionsHelperDataService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RenderHelperService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RenderHelperService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i2.AboutService }, { type: i2.NodeServiceUnwrapped }, { type: EduSharingUiConfiguration }, { type: i2.UserService }, { type: OptionsHelperDataService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AboutService }, { type: i1.NodeServiceUnwrapped }, { type: EduSharingUiConfiguration }, { type: i1.UserService }, { type: OptionsHelperDataService, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -8163,6 +8384,7 @@ const TRANSLATION_LIST = [
     'workspace',
     'search',
     'collections',
+    'editorial',
     'login',
     'permissions',
     'oer',
@@ -8174,15 +8396,14 @@ const TRANSLATION_LIST = [
     'override',
 ];
 let TranslationLoader = TranslationLoader_1 = class TranslationLoader {
-    static create(http, configService, configuration, assetsBasePath, additionalI18nProvider) {
-        return new TranslationLoader_1(assetsBasePath, additionalI18nProvider, http, configService, configuration);
+    static create(http, configService, configuration, i18nConfig) {
+        return new TranslationLoader_1(http, configService, configuration, i18nConfig);
     }
-    constructor(assetsBasePath, additionalI18nProvider, http, configService, configuration, prefix = (assetsBasePath ?? '') + 'assets/i18n', suffix = '.json') {
-        this.assetsBasePath = assetsBasePath;
-        this.additionalI18nProvider = additionalI18nProvider;
+    constructor(http, configService, configuration, i18nConfig, prefix = (configuration.assetsBasePath ?? '') + 'assets/i18n', suffix = '.json') {
         this.http = http;
         this.configService = configService;
         this.configuration = configuration;
+        this.i18nConfig = i18nConfig;
         this.prefix = prefix;
         this.suffix = suffix;
         // If you need to configure this, define an injectable configuration object. See
@@ -8216,10 +8437,10 @@ let TranslationLoader = TranslationLoader_1 = class TranslationLoader {
             // FIXME: This will alter the object returned by `getOriginalTranslations`.
             return this.applyOverrides(originalTranslations, translationOverrides);
         }), switchMap((translations) => {
-            if (!this.additionalI18nProvider) {
+            if (!this.i18nConfig?.additionalI18nProvider) {
                 return of(translations);
             }
-            const files = this.additionalI18nProvider(lang);
+            const files = this.i18nConfig.additionalI18nProvider(lang);
             console.info('additional i18n provided', files);
             return forkJoin(files.map((f) => this.http.get(f))).pipe(map((value) => {
                 for (let dictionary of value) {
@@ -8345,16 +8566,11 @@ let TranslationLoader = TranslationLoader_1 = class TranslationLoader {
     }
 };
 __decorate([
-    __param(3, Optional()),
-    __param(3, Inject(ASSETS_BASE_PATH)),
-    __param(4, Optional()),
-    __param(4, Inject(ADDITIONAL_I18N_PROVIDER))
+    __param(3, Inject(I18N_CONFIG))
 ], TranslationLoader, "create", null);
 TranslationLoader = TranslationLoader_1 = __decorate([
-    __param(0, Optional()),
-    __param(0, Inject(ASSETS_BASE_PATH)),
-    __param(1, Optional()),
-    __param(1, Inject(ADDITIONAL_I18N_PROVIDER))
+    __param(3, Optional()),
+    __param(3, Inject(I18N_CONFIG))
 ], TranslationLoader);
 
 /**
@@ -8378,7 +8594,7 @@ class TranslationsModule {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationsModule, deps: [{ token: TranslationsModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TranslationsModule, imports: [i1.TranslateModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TranslationsModule, imports: [i1$1.TranslateModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationsModule, imports: [TranslateModule.forRoot({
                 loader: {
                     provide: TranslateLoader,
@@ -8388,8 +8604,6 @@ class TranslationsModule {
                         ConfigService,
                         EduSharingUiConfiguration,
                         [new Optional(), I18N_CONFIG],
-                        [new Optional(), ASSETS_BASE_PATH],
-                        [new Optional(), ADDITIONAL_I18N_PROVIDER],
                     ],
                 },
                 missingTranslationHandler: {
@@ -8412,8 +8626,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                                     ConfigService,
                                     EduSharingUiConfiguration,
                                     [new Optional(), I18N_CONFIG],
-                                    [new Optional(), ASSETS_BASE_PATH],
-                                    [new Optional(), ADDITIONAL_I18N_PROVIDER],
                                 ],
                             },
                             missingTranslationHandler: {
@@ -8485,5 +8697,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ADDITIONAL_I18N_PROVIDER, ASSETS_BASE_PATH, AccessibilityService, AccessibilitySettings, ActionbarComponent, AppContainerService, AppService, BorderBoxObserverDirective, CheckTextOverflowDirective, ClickSource, ColorHelper, CombinedDataSource, Constrain, CustomFieldSpecialType, CustomOptions, CustomSelectionModel, CustomTemplatesDataSource, DateHelper, DefaultGroups, DropdownComponent, DurationFormat, DurationHelper, EDU_SHARING_UI_CONFIG, EduSharingUiCommonModule, EduSharingUiConfiguration, EduSharingUiModule, ElementType, FallbackTranslationHandler, FocusStateDirective, FormatDatePipe, FormatDurationPipe, FormatOptions, FormatSizePipe, Helper, HideMode, I18N_CONFIG, I18nConfig, IconDirective, InfiniteScrollDirective, InteractionType, ItemsCap, KeyboardShortcutsService, ListBaseComponent, ListCountsComponent, ListItem, ListItemLabelPipe, ListItemSort, ListItemsModule, ListTextComponent, LocalEventsService, MdsDurationPipe, MdsEditorInstanceServiceAbstract, MdsHelperService, MdsModule, MdsType, MdsViewerComponent, MdsViewerService, MdsWidgetComponent, MdsWidgetType, NodeCache, NodeDataSource, NodeDataSourceRemote, NodeEntriesDisplayType, NodeEntriesGlobalService, NodeEntriesModule, NodeEntriesService, NodeEntriesWrapperComponent, NodeHelperService, NodeIconPipe, NodeImagePipe, NodeImageSizePipe, NodeLicensePipe, NodePersonNamePipe, NodeRowComponent, NodeTitlePipe, NodeUrlComponent, NodesDragDirective, NodesDragDropService, NodesDragSourceDirective, NodesDropTargetDirective, NodesRightMode, OPEN_URL_MODE, OptionGroup, OptionItem, OptionsHelperDataService, OptionsHelperService, PreferredColor, PropertySlugPipe, RelativeMode, RenderHelperService, RepoUrlService, RestHelper, Scope, SearchHelperService, SortDropdownComponent, SortEvent, SpinnerComponent, SpinnerSmallComponent, TRANSLATION_LIST, Target, TemporaryStorageService, Toast, ToastDuration, TranslationLoader, TranslationsModule, TranslationsService, UIAnimation, UIConstants, UIService, VCard, VCardNamePipe, ValueType, ViewInstanceService, WORKFLOW_STATUS_CHECKED, WORKFLOW_STATUS_HASFLAWS, WORKFLOW_STATUS_TO_CHECK, WORKFLOW_STATUS_UNCHECKED, clearDraggedNodes, dragNodesTransferType, getConfigProvider, isNumeric, isTrue, macroTick, matchesShortcutCondition, microTick, notNull, readDraggedNodes, replaceElementWithDiv, saveDraggedNodes };
+export { AccessibilityService, AccessibilitySettings, ActionbarComponent, AppContainerService, AppService, BorderBoxObserverDirective, CheckTextOverflowDirective, ClickSource, ColorHelper, CombinedDataSource, Constrain, CustomFieldSpecialType, CustomOptions, CustomSelectionModel, CustomTemplatesDataSource, DateHelper, DefaultGroups, DropdownComponent, DurationFormat, DurationHelper, EDU_SHARING_UI_CONFIG, EduSharingUiCommonModule, EduSharingUiConfiguration, EduSharingUiModule, ElementType, FallbackTranslationHandler, FocusStateDirective, FormatDatePipe, FormatDurationPipe, FormatOptions, FormatSizePipe, Helper, HideMode, I18N_CONFIG, I18nConfig, IconDirective, InfiniteScrollDirective, InfoMessageComponent, InteractionType, ItemsCap, KeyboardShortcutsService, ListBaseComponent, ListCountsComponent, ListItem, ListItemLabelPipe, ListItemSort, ListItemsModule, ListTextComponent, LocalEventsService, MdsDurationPipe, MdsEditorInstanceServiceAbstract, MdsHelperService, MdsModule, MdsType, MdsViewerComponent, MdsViewerService, MdsWidgetComponent, MdsWidgetType, NodeCache, NodeDataSource, NodeDataSourceRemote, NodeEntriesCardComponent, NodeEntriesDisplayType, NodeEntriesGlobalService, NodeEntriesModule, NodeEntriesService, NodeEntriesWrapperComponent, NodeHelperService, NodeIconPipe, NodeImagePipe, NodeImageSizePipe, NodeLicensePipe, NodePersonNamePipe, NodeRatingComponent, NodeRowComponent, NodeStatsBadgesComponent, NodeTitlePipe, NodeTypeBadgeComponent, NodeUrlComponent, NodeUrlPipe, NodesDragDirective, NodesDragDropService, NodesDragSourceDirective, NodesDropTargetDirective, NodesRightMode, OPEN_URL_MODE, OptionGroup, OptionItem, OptionItemToggle, OptionsHelperDataService, OptionsHelperService, PreferredColor, PropertySlugPipe, RelativeMode, RenderHelperService, RepoUrlService, RestHelper, Scope, SearchHelperService, SortDropdownComponent, SortEvent, SpinnerComponent, SpinnerSmallComponent, TRANSLATION_LIST, Target, TemporaryStorageService, Toast, ToastDuration, ToolpermissionPipe, TranslationLoader, TranslationsModule, TranslationsService, UIAnimation, UIConstants, UIService, VCard, VCardNamePipe, ValueType, ViewInstanceService, WORKFLOW_STATUS_CHECKED, WORKFLOW_STATUS_HASFLAWS, WORKFLOW_STATUS_TO_CHECK, WORKFLOW_STATUS_UNCHECKED, clearDraggedNodes, dragNodesTransferType, getConfigProvider, isNumeric, isTrue, macroTick, matchesShortcutCondition, microTick, notNull, readDraggedNodes, replaceElementWithDiv, saveDraggedNodes };
 //# sourceMappingURL=ngx-edu-sharing-ui.mjs.map