ngx-edu-sharing-ui 9.1.1 → 9.1.2

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

@@ -387,6 +387,21 @@ class UIService {
         }
         return optionsFiltered;
     }
+    /**
+     * helper that updates the "isEnabled" flag on all options for the given, selected node
+     * can be used by dropdown or action menus to update the state for the current element
+     * @param options
+     */
+    async updateOptionEnabledState(options, object = null) {
+        options.value.forEach((o) => {
+            o.isEnabled = !o.customEnabledCallback;
+            o.enabledCallback(object).then((result) => {
+                o.isEnabled = result;
+                options.next(options.value);
+            });
+        });
+        options.next(options.value);
+    }
     filterToggleOptions(options, toggle) {
         let result = [];
         for (let option of options) {
@@ -500,9 +515,10 @@ class IconDirective {
     set esIcon(id) {
         this.originalId$.next(id);
     }
-    constructor(element, translate, config) {
+    constructor(element, translate, renderer, config) {
         this.element = element;
         this.translate = translate;
+        this.renderer = renderer;
         this.config = config;
         this.originalId$ = new BehaviorSubject(null);
         this.isReady = false;
@@ -526,6 +542,19 @@ class IconDirective {
     setIcon(id, iconsConfig) {
         if (this._id) {
             this.element.nativeElement.classList.remove('edu-icons', 'custom-icons', 'material-icons');
+            if (this.svg) {
+                this.renderer.removeChild(this.element.nativeElement, this.svg);
+            }
+        }
+        if (id.startsWith('svg-')) {
+            this.svg = document.createElement('img');
+            this.svg.classList.add('svg-icons');
+            this.svg.src = 'assets/images/icons/' + id.substring(4);
+            this.renderer.appendChild(this.element.nativeElement, this.svg);
+            if (this._aria) {
+                this.updateAria();
+            }
+            return;
         }
         let customClass = null;
         const mapping = iconsConfig?.filter((i) => i.original === id);
@@ -540,11 +569,11 @@ class IconDirective {
         let cssClass;
         if (id?.startsWith('edu-') && !customClass) {
             cssClass = 'edu-icons';
-            id = id.substr(4);
+            id = id.substring(4);
         }
         else if (id?.startsWith('custom-') || customClass) {
             cssClass = 'custom-icons';
-            id = id.substr(7);
+            id = id.substring(7);
         }
         else {
             cssClass = 'material-icons';
@@ -568,6 +597,9 @@ class IconDirective {
         }
     }
     setAltText(altText) {
+        if (this.svg) {
+            this.svg.alt = altText;
+        }
         if (altText && !this.altTextSpan) {
             this.insertAltTextSpan();
         }
@@ -580,7 +612,7 @@ 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: "16.2.6", ngImport: i0, type: IconDirective, deps: [{ token: i0.ElementRef }, { token: i1.TranslateService }, { token: i2.ConfigService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: IconDirective, deps: [{ token: i0.ElementRef }, { 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: "16.2.6", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: { altText: "altText", aria: "aria", esIcon: "esIcon" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: IconDirective, decorators: [{
@@ -588,7 +620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
             args: [{
                     selector: 'i[esIcon], i.material-icons',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.TranslateService }, { type: i2.ConfigService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.TranslateService }, { type: i0.Renderer2 }, { type: i2.ConfigService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { altText: [{
                 type: Input
@@ -602,8 +634,8 @@ class OptionTooltipPipe {
     constructor(translate) {
         this.translate = translate;
     }
-    transform(option, args = null) {
-        return (this.translate.instant(option.name) +
+    async transform(option, args = null) {
+        return ((await this.translate.get(option.name).toPromise()) +
             (option.keyboardShortcut ? ' (' + this.getKeyInfo(option) + ')' : ''));
     }
     getKeyInfo(option) {
@@ -659,17 +691,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
  * but can also be used standalone.
  */
 class DropdownComponent {
-    set options(options) {
-        this._options = this.ui.filterValidOptions(Helper.deepCopyArray(options));
-    }
     constructor(ui) {
         this.ui = ui;
         this.position = 'left';
+        this.options$ = new BehaviorSubject([]);
         /**
          * Should disabled ("greyed out") options be shown or hidden?
          */
         this.showDisabled = true;
     }
+    ngOnChanges(changes) {
+        if (changes == null || changes?.options || changes?.callbackObject) {
+            this.options$.next(this.ui.filterValidOptions(Helper.deepCopyArray(this.options)));
+            if (this.callbackObject) {
+                this.ui.updateOptionEnabledState(this.options$, this.callbackObject);
+            }
+        }
+    }
     click(option) {
         if (!option.isEnabled) {
             return;
@@ -678,7 +716,7 @@ class DropdownComponent {
     }
     isNewGroup(i) {
         if (i > 0) {
-            return this._options[i].group !== this._options[i - 1].group;
+            return this.options$.value[i].group !== this.options$.value[i - 1].group;
         }
         return false;
     }
@@ -687,14 +725,14 @@ class DropdownComponent {
         // We can only open the dropdown menu, when there is at least one enabled option. Even when
         // there are options with `showDisabled: true`, showing a menu with no selectable option
         // causes a11y issues.
-        return this._options?.some((o) => o.isEnabled);
+        return this.options$.value?.some((o) => o.isEnabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DropdownComponent, deps: [{ token: UIService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: DropdownComponent, selector: "es-dropdown", inputs: { position: "position", options: "options", callbackObject: "callbackObject", showDisabled: "showDisabled", menuClass: "menuClass" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: 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; 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 }}\"\n          matTooltipPosition=\"right\"\n          matTooltipTouchGestures=\"off\"\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:var(--focusWidth) 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: calc(var(--mobileWidth) - var(--mobileStage) * 1)){::ng-deep .mat-dropdown-menu ul li.cdk-overlay-backdrop{background:rgba(0,0,0,.8)}::ng-deep .mat-dropdown-menu ul li.mat-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius: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: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { 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: "16.2.6", type: DropdownComponent, selector: "es-dropdown", inputs: { position: "position", options: "options", callbackObject: "callbackObject", 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:var(--focusWidth) 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: calc(var(--mobileWidth) - var(--mobileStage) * 1)){::ng-deep .mat-dropdown-menu ul li.cdk-overlay-backdrop{background:rgba(0,0,0,.8)}::ng-deep .mat-dropdown-menu ul li.mat-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius: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: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-dropdown', 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; 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 }}\"\n          matTooltipPosition=\"right\"\n          matTooltipTouchGestures=\"off\"\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:var(--focusWidth) 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: calc(var(--mobileWidth) - var(--mobileStage) * 1)){::ng-deep .mat-dropdown-menu ul li.cdk-overlay-backdrop{background:rgba(0,0,0,.8)}::ng-deep .mat-dropdown-menu ul li.mat-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius:0}}\n"] }]
+            args: [{ selector: 'es-dropdown', 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:var(--focusWidth) 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: calc(var(--mobileWidth) - var(--mobileStage) * 1)){::ng-deep .mat-dropdown-menu ul li.cdk-overlay-backdrop{background:rgba(0,0,0,.8)}::ng-deep .mat-dropdown-menu ul li.mat-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: UIService }]; }, propDecorators: { menu: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
@@ -768,26 +806,36 @@ class ActionbarComponent {
          * Should disabled ("greyed out") options be shown or hidden?
          */
         this.showDisabled = true;
+        /**
+         * the position of the mat tooltips
+         */
+        this.tooltipPosition = 'below';
+        /**
+         * breakpoint width at which point the mobile display count is used
+         */
+        this.mobileBreakpoint = UIConstants.MOBILE_WIDTH;
         this.optionsIn = [];
-        this.optionsAlways = [];
-        this.optionsMenu = [];
+        this.optionsAlways$ = new BehaviorSubject([]);
+        this.optionsMenu$ = new BehaviorSubject([]);
         this.optionsToggle = [];
     }
     prepareOptions(options) {
         options = this.uiService.filterValidOptions(Helper.deepCopyArray(options));
         if (options == null) {
-            this.optionsAlways = [];
-            this.optionsMenu = [];
+            this.optionsAlways$.next([]);
+            this.optionsMenu$.next([]);
             return;
         }
         this.optionsToggle = this.uiService.filterToggleOptions(options, true);
-        this.optionsAlways = this.getActionOptions(this.uiService.filterToggleOptions(options, false)).slice(0, this.getNumberOptions());
-        if (!this.optionsAlways.length) {
-            this.optionsAlways = this.uiService
+        this.optionsAlways$.next(this.getActionOptions(this.uiService.filterToggleOptions(options, false)).slice(0, this.getNumberOptions()));
+        if (!this.optionsAlways$.value.length) {
+            this.optionsAlways$.next(this.uiService
                 .filterToggleOptions(options, false)
-                .slice(0, this.getNumberOptions());
+                .slice(0, this.getNumberOptions()));
         }
-        this.optionsMenu = this.hideActionOptions(this.uiService.filterToggleOptions(options, false), this.optionsAlways);
+        this.optionsMenu$.next(this.hideActionOptions(this.uiService.filterToggleOptions(options, false), this.optionsAlways$.value));
+        this.uiService.updateOptionEnabledState(this.optionsAlways$);
+        this.uiService.updateOptionEnabledState(this.optionsMenu$);
         // may causes weird looking
         /*if(this.optionsMenu.length<2) {
       this.optionsAlways = this.optionsAlways.concat(this.optionsMenu);
@@ -795,7 +843,7 @@ class ActionbarComponent {
     }*/
     }
     getNumberOptions() {
-        if (window.innerWidth < UIConstants.MOBILE_WIDTH) {
+        if (window.innerWidth < this.mobileBreakpoint) {
             return this.numberOfAlwaysVisibleOptionsMobile;
         }
         return this.numberOfAlwaysVisibleOptions;
@@ -842,17 +890,17 @@ class ActionbarComponent {
         return filtered;
     }
     canShowDropdown() {
-        if (!this.optionsMenu.length) {
+        if (!this.optionsMenu$.value.length) {
             return false;
         }
-        return this.optionsMenu.filter((o) => o.isEnabled).length > 0;
+        return this.optionsMenu$.value.filter((o) => o.isEnabled).length > 0;
     }
     shouldHighlight(optionIndex, option) {
         switch (this.highlight) {
             case 'first':
                 return optionIndex === 0;
             case 'last':
-                return optionIndex === this.optionsAlways.length - 1;
+                return optionIndex === this.optionsAlways$.value.length - 1;
             case 'manual':
                 return option.isPrimary;
         }
@@ -861,11 +909,11 @@ class ActionbarComponent {
         this.invalidate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ActionbarComponent, deps: [{ token: UIService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: ActionbarComponent, selector: "es-actionbar", inputs: { numberOfAlwaysVisibleOptions: "numberOfAlwaysVisibleOptions", numberOfAlwaysVisibleOptionsMobile: "numberOfAlwaysVisibleOptionsMobile", appearance: "appearance", dropdownPosition: "dropdownPosition", backgroundType: "backgroundType", style: "style", highlight: "highlight", showDisabled: "showDisabled", options: "options" }, usesOnChanges: true, ngImport: i0, template: "<es-dropdown\n  #dropdownRef\n  [options]=\"optionsMenu\"\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  <ng-container *ngFor=\"let option of optionsAlways; 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 }}\"\n      [attr.aria-label]=\"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 }}\"\n      [attr.aria-label]=\"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=\"optionsToggle.length\"\n    class=\"actionToggle\"\n    [class.actionToggleDivider]=\"optionsAlways.length\"\n  >\n    <button\n      *ngFor=\"let option of optionsToggle\"\n      mat-icon-button\n      matTooltip=\"{{ option.name | translate }}\"\n      [attr.aria-label]=\"option.name | translate\"\n      (click)=\"click(option)\"\n      [class.disabled]=\"!option.isEnabled\"\n      attr.data-test=\"toggle-{{ option.name }}\"\n    >\n      <i [esIcon]=\"option.icon\" [aria]=\"false\"></i>\n    </button>\n  </div>\n</div>\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}.actionToggleDivider{padding-left:10px;border-left: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 .mat-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-primary .mat-flat-button{background-color:#fff;color:var(--primary)}.actionbar-background-primary .mat-flat-button:disabled{color:var(--textLight)}.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:white;color:var(--primary)!important}.actionbar-round.actionbar-all-flat button:disabled{color:var(--textLight)!important}.actionbar-round .more,.actionbar-round .actionAlways{background:white;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: calc(var(--mobileWidth) + var(--mobileStage) * 4)){.action-always{padding:0 1rem}.action-always-caption{display:none}.mat-flat-button{padding:5px}}.actionbar-icon-button .action-always{padding:0 1rem}.actionbar-icon-button .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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObject", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OptionTooltipPipe, name: "optionTooltip" }], animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: ActionbarComponent, 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  <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=\"optionsToggle.length\"\n    class=\"actionToggle\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <button\n      *ngFor=\"let option of optionsToggle\"\n      mat-icon-button\n      matTooltip=\"{{ option.name | translate }}\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n      [class.disabled]=\"!option.isEnabled\"\n      attr.data-test=\"toggle-{{ option.name }}\"\n    >\n      <i [esIcon]=\"option.icon\" [aria]=\"false\"></i>\n    </button>\n  </div>\n</div>\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}.actionToggleDivider{padding-left:10px;border-left: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:white;color:var(--primary)!important}.actionbar-round.actionbar-all-flat button:disabled{color:var(--textLight)!important}.actionbar-round .more,.actionbar-round .actionAlways{background:white;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: calc(var(--mobileWidth) + var(--mobileStage) * 4)){.action-always{padding:0 1rem}.action-always-caption{display:none}.mat-flat-button{padding:5px}}.actionbar-icon-button .action-always{padding:0 1rem}.actionbar-icon-button .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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObject", "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" }], animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ActionbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-actionbar', animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))], template: "<es-dropdown\n  #dropdownRef\n  [options]=\"optionsMenu\"\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  <ng-container *ngFor=\"let option of optionsAlways; 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 }}\"\n      [attr.aria-label]=\"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 }}\"\n      [attr.aria-label]=\"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=\"optionsToggle.length\"\n    class=\"actionToggle\"\n    [class.actionToggleDivider]=\"optionsAlways.length\"\n  >\n    <button\n      *ngFor=\"let option of optionsToggle\"\n      mat-icon-button\n      matTooltip=\"{{ option.name | translate }}\"\n      [attr.aria-label]=\"option.name | translate\"\n      (click)=\"click(option)\"\n      [class.disabled]=\"!option.isEnabled\"\n      attr.data-test=\"toggle-{{ option.name }}\"\n    >\n      <i [esIcon]=\"option.icon\" [aria]=\"false\"></i>\n    </button>\n  </div>\n</div>\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}.actionToggleDivider{padding-left:10px;border-left: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 .mat-button{color:rgb(var(--palette-foreground-text-dark))}.actionbar-background-primary .mat-flat-button{background-color:#fff;color:var(--primary)}.actionbar-background-primary .mat-flat-button:disabled{color:var(--textLight)}.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:white;color:var(--primary)!important}.actionbar-round.actionbar-all-flat button:disabled{color:var(--textLight)!important}.actionbar-round .more,.actionbar-round .actionAlways{background:white;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: calc(var(--mobileWidth) + var(--mobileStage) * 4)){.action-always{padding:0 1rem}.action-always-caption{display:none}.mat-flat-button{padding:5px}}.actionbar-icon-button .action-always{padding:0 1rem}.actionbar-icon-button .action-always-caption{display:none}.actionbar-icon-button .mat-flat-button{padding:5px}\n"] }]
+            args: [{ selector: 'es-actionbar', animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))], 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  <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=\"optionsToggle.length\"\n    class=\"actionToggle\"\n    [class.actionToggleDivider]=\"(optionsAlways$ | async).length\"\n  >\n    <button\n      *ngFor=\"let option of optionsToggle\"\n      mat-icon-button\n      matTooltip=\"{{ option.name | translate }}\"\n      [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n      (click)=\"click(option)\"\n      [class.disabled]=\"!option.isEnabled\"\n      attr.data-test=\"toggle-{{ option.name }}\"\n    >\n      <i [esIcon]=\"option.icon\" [aria]=\"false\"></i>\n    </button>\n  </div>\n</div>\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}.actionToggleDivider{padding-left:10px;border-left: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:white;color:var(--primary)!important}.actionbar-round.actionbar-all-flat button:disabled{color:var(--textLight)!important}.actionbar-round .more,.actionbar-round .actionAlways{background:white;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: calc(var(--mobileWidth) + var(--mobileStage) * 4)){.action-always{padding:0 1rem}.action-always-caption{display:none}.mat-flat-button{padding:5px}}.actionbar-icon-button .action-always{padding:0 1rem}.actionbar-icon-button .action-always-caption{display:none}.actionbar-icon-button .mat-flat-button{padding:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: UIService }, { type: i1.TranslateService }]; }, propDecorators: { numberOfAlwaysVisibleOptions: [{
                 type: Input
             }], numberOfAlwaysVisibleOptionsMobile: [{
@@ -882,8 +930,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 type: Input
             }], showDisabled: [{
                 type: Input
+            }], tooltipPosition: [{
+                type: Input
             }], options: [{
                 type: Input
+            }], mobileBreakpoint: [{
+                type: Input
             }] } });
 
 /**
@@ -1412,7 +1464,7 @@ class NodeHelperService {
         if (icon == 'none' && !useNoneAsFallback)
             return null;
         const result = this.apiHelpersService.getServerUrl() + '/../ccimages/licenses/' + icon + '.svg';
-        return this.repoUrlService.withCurrentOrigin(result);
+        return result;
     }
     /**
      * Return a translated name of a license name for a node
@@ -1509,6 +1561,9 @@ class NodeHelperService {
         target.properties = source.properties;
         target.name = source.name;
         target.title = source.title;
+        target.authorityName = source.authorityName;
+        target.profile = source.profile;
+        target.status = source.status;
     }
     isNodeCollection(node) {
         return node.aspects?.includes(RestConstants.CCM_ASPECT_COLLECTION) || !!node.collection;
@@ -1720,10 +1775,11 @@ class FormatSizePipe {
             value /= 1024;
             i++;
         }
-        //return value+" "+names[i];
-        return (value.toLocaleString(this.translate.currentLang === 'none' ? 'en' : this.translate.currentLang, { maximumFractionDigits: 1 }) +
-            ' ' +
-            names[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: "16.2.6", ngImport: i0, type: FormatSizePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: FormatSizePipe, name: "formatSize" }); }
@@ -2127,6 +2183,12 @@ class RestHelper {
 
 class NodeTitlePipe {
     transform(node, args = null) {
+        if (!node.name) {
+            if (node === 'HOME') {
+                return this.translate.instant('WORKSPACE.' + node);
+            }
+            return this.translate.instant('WORKSPACE.' + node);
+        }
         return RestHelper.getTitle(node);
     }
     constructor(translate) {
@@ -2619,6 +2681,222 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 }]
         }] });
 
+/**
+ * A list item info, which is basically a column
+ * Example:
+ this.columns.push(new ListItem(RestConstants.CM_NAME));
+ this.columns.push(new ListItem(RestConstants.CM_ARCHIVED_DATE));
+ */
+class ListItem {
+    constructor(type, name, config = {
+        showLabel: false,
+    }) {
+        this.type = type;
+        this.name = name;
+        this.config = config;
+        /**
+         * Should this item be shown by default
+         * @type {boolean}
+         */
+        this.visible = true;
+    }
+    static getCollectionDefaults() {
+        let columns = [];
+        columns.push(new ListItem('COLLECTION', 'title'));
+        columns.push(new ListItem('COLLECTION', 'info'));
+        columns.push(new ListItem('COLLECTION', 'scope'));
+        return columns;
+    }
+}
+class ListItemSort extends ListItem {
+    constructor(type, name, mode = null, config = {
+        showLabel: false,
+    }) {
+        super(type, name, config);
+        this.type = type;
+        this.name = name;
+        this.mode = mode;
+        this.config = config;
+    }
+}
+class SortEvent extends ListItemSort {
+}
+
+class MdsHelperService {
+    static getSortInfo(mdsSet, name) {
+        if (mdsSet) {
+            if (mdsSet.sorts) {
+                for (const list of mdsSet.sorts) {
+                    if (list.id == name) {
+                        return list;
+                    }
+                }
+            }
+            console.error('mds does not define sort info for ' + name + ', invalid configuration!');
+        }
+        return null;
+    }
+    static getColumns(translate, mdsSet, name) {
+        let columns = [];
+        if (mdsSet) {
+            for (const list of mdsSet.lists) {
+                if (list.id === name) {
+                    for (const column of list.columns) {
+                        let type = 'NODE';
+                        if (name === 'mediacenterGroups') {
+                            type = 'GROUP';
+                        }
+                        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);
+                    }
+                    break;
+                }
+            }
+        }
+        if (!columns.length) {
+            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));
+            }
+            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));
+            }
+            else if (name === 'mediacenterGroups') {
+                columns.push(new ListItem('GROUP', RestConstants.AUTHORITY_DISPLAYNAME));
+                columns.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'));
+            }
+        }
+        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;
+    }
+    /**
+     * Finds the appropriate widget with the id, but will not check any widget conditions
+     * @param cid
+     * @param template
+     * @param widgets
+     */
+    static getWidget(cid, template, widgets) {
+        if (widgets == null) {
+            console.warn('Could not iterate widget ' + cid + ': no widgets data provided');
+            return null;
+        }
+        for (let w of widgets) {
+            if (w.id == cid) {
+                if (template === undefined || w.template === template) {
+                    return w;
+                }
+            }
+        }
+        return null;
+    }
+    constructor(authentication) {
+        this.authentication = authentication;
+    }
+    /**
+     * Same as getWidget, but will also check the widget conditions
+     * @param connector
+     * @param properties
+     * @param id
+     * @param template
+     * @param widgets
+     */
+    async getWidgetWithCondition(properties, id, template = null, widgets) {
+        for (let w of widgets) {
+            if (w.id == id) {
+                if ((template == null || w.template == template) &&
+                    (await this.isWidgetConditionTrue(w, properties))) {
+                    return w;
+                }
+            }
+        }
+        return null;
+    }
+    async isWidgetConditionTrue(widget, properties) {
+        if (!widget.condition)
+            return true;
+        let condition = widget.condition;
+        if (condition.type == 'PROPERTY' && properties) {
+            if ((!properties[condition.value] && !condition.negate) ||
+                (properties[condition.value] && condition.negate)) {
+                return false;
+            }
+        }
+        if (condition.type == 'TOOLPERMISSION') {
+            let tp = await this.authentication.hasToolpermission(condition.value);
+            if (tp == condition.negate) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Find a template by id in the given mds
+     */
+    static findTemplate(mds, id) {
+        return mds.views.find((v) => v.id === id);
+    }
+    /**
+     * Returns all widgets used by the given template
+     */
+    static getUsedWidgets(mds, template = null) {
+        const used = [];
+        const templateData = MdsHelperService.findTemplate(mds, template);
+        for (const w of mds.widgets) {
+            if (templateData.html.indexOf('<' + w.id) !== -1 &&
+                !used.find((w2) => w2.id === w.id)) {
+                used.push(w);
+            }
+        }
+        return used;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MdsHelperService, deps: [{ token: i2.AuthenticationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MdsHelperService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MdsHelperService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2.AuthenticationService }]; } });
+
+class MdsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MdsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: MdsModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MdsModule, providers: [MdsHelperService] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MdsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    providers: [MdsHelperService],
+                }]
+        }] });
+
 const dragNodesTransferType = 'application/nodes';
 const storageKey = 'app-drag-nodes';
 function readDraggedNodes() {
@@ -3123,47 +3401,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 }]
         }] });
 
-/**
- * A list item info, which is basically a column
- * Example:
- this.columns.push(new ListItem(RestConstants.CM_NAME));
- this.columns.push(new ListItem(RestConstants.CM_ARCHIVED_DATE));
- */
-class ListItem {
-    constructor(type, name, config = {
-        showLabel: false,
-    }) {
-        this.type = type;
-        this.name = name;
-        this.config = config;
-        /**
-         * Should this item be shown by default
-         * @type {boolean}
-         */
-        this.visible = true;
-    }
-    static getCollectionDefaults() {
-        let columns = [];
-        columns.push(new ListItem('COLLECTION', 'title'));
-        columns.push(new ListItem('COLLECTION', 'info'));
-        columns.push(new ListItem('COLLECTION', 'scope'));
-        return columns;
-    }
-}
-class ListItemSort extends ListItem {
-    constructor(type, name, mode = null, config = {
-        showLabel: false,
-    }) {
-        super(type, name, config);
-        this.type = type;
-        this.name = name;
-        this.mode = mode;
-        this.config = config;
-    }
-}
-class SortEvent extends ListItemSort {
-}
-
 class ListWidget {
     get node() {
         return this.nodeSubject.value;
@@ -3556,9 +3793,7 @@ class ListTextComponent extends ListWidget {
             metadataSet: node.metadataset || i2.DEFAULT,
         })
             .toPromise();
-        // @TODO
-        /*
-        const widget = MdsHelper.getWidget(this.item.name, null, mds.widgets);
+        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)
@@ -3567,7 +3802,6 @@ class ListTextComponent extends ListWidget {
                 this.displayName$.next(i18n.join(', '));
             }
         }
-         */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", 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: "16.2.6", type: ListTextComponent, selector: "es-list-text", usesInheritance: true, usesOnChanges: 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    {{ ('PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]) | translate:{fallback: ''} }}\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()).title || $any(getNode()).name }}\n    </ng-container>\n    <ng-container *ngIf=\"!['title', 'cm:title', 'cclom:title'].includes(item.name)\">\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        {{ $any(getNode()).properties[item.name]?.[0] | formatDate: { async: true, time: true, relative: true } | async }}\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][0] | 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]", 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: VCardNamePipe, name: "vcardName" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NodeSourcePipe, name: "appNodeSource" }, { kind: "pipe", type: FormatDurationPipe, name: "formatDuration" }] }); }
@@ -3654,6 +3888,11 @@ class OptionItem {
          * @type {boolean}
          */
         this.onlyMobile = false;
+        /**
+         * custom aria-label
+         * @type {string}
+         */
+        this.ariaLabel = '';
         /**
          * If true, only displayed on a desktop device (based on the navigator agent)
          * @type {boolean}
@@ -3928,11 +4167,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
 
 class DragPreviewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DragPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: DragPreviewComponent, selector: "es-drag-preview", inputs: { node: "node", selected: "selected", item: "item" }, ngImport: i0, template: "<div class=\"drag-preview\" [matBadge]=\"selected.length > 1 ? selected.length : null\">\n  <div class=\"drag-preview-icon\">\n    <img *ngIf=\"node.iconURL\" [src]=\"node | esNodeIcon\" />\n  </div>\n  <es-list-text class=\"drag-preview-text\" [node]=\"node\" [item]=\"item\"></es-list-text>\n</div>\n", styles: [".drag-preview{display:flex;align-items:center;gap:16px;height:48px;padding:0 12px;background-color:var(--palette-primary-50)}.drag-preview-icon{width:30px;height:30px;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}.drag-preview-icon>img{width:18px;height:auto}.drag-preview-text{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListTextComponent, selector: "es-list-text" }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: NodeIconPipe, name: "esNodeIcon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: DragPreviewComponent, selector: "es-drag-preview", inputs: { node: "node", selected: "selected", item: "item" }, ngImport: i0, template: "<div class=\"drag-preview\" [matBadge]=\"selected.length > 1 ? selected.length : null\">\n  <div class=\"drag-preview-icon\">\n    <img *ngIf=\"node.iconURL\" [src]=\"node | esNodeIcon | async\" />\n  </div>\n  <es-list-text class=\"drag-preview-text\" [node]=\"node\" [item]=\"item\"></es-list-text>\n</div>\n", styles: [".drag-preview{display:flex;align-items:center;gap:16px;height:48px;padding:0 12px;background-color:var(--palette-primary-50)}.drag-preview-icon{width:30px;height:30px;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}.drag-preview-icon>img{width:18px;height:auto}.drag-preview-text{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListTextComponent, selector: "es-list-text" }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: NodeIconPipe, name: "esNodeIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DragPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-drag-preview', template: "<div class=\"drag-preview\" [matBadge]=\"selected.length > 1 ? selected.length : null\">\n  <div class=\"drag-preview-icon\">\n    <img *ngIf=\"node.iconURL\" [src]=\"node | esNodeIcon\" />\n  </div>\n  <es-list-text class=\"drag-preview-text\" [node]=\"node\" [item]=\"item\"></es-list-text>\n</div>\n", styles: [".drag-preview{display:flex;align-items:center;gap:16px;height:48px;padding:0 12px;background-color:var(--palette-primary-50)}.drag-preview-icon{width:30px;height:30px;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}.drag-preview-icon>img{width:18px;height:auto}.drag-preview-text{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'es-drag-preview', template: "<div class=\"drag-preview\" [matBadge]=\"selected.length > 1 ? selected.length : null\">\n  <div class=\"drag-preview-icon\">\n    <img *ngIf=\"node.iconURL\" [src]=\"node | esNodeIcon | async\" />\n  </div>\n  <es-list-text class=\"drag-preview-text\" [node]=\"node\" [item]=\"item\"></es-list-text>\n</div>\n", styles: [".drag-preview{display:flex;align-items:center;gap:16px;height:48px;padding:0 12px;background-color:var(--palette-primary-50)}.drag-preview-icon{width:30px;height:30px;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}.drag-preview-icon>img{width:18px;height:auto}.drag-preview-text{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { node: [{
                 type: Input
             }], selected: [{
@@ -4727,13 +4966,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
 class OptionButtonComponent {
     constructor() {
         this.isShown = false;
+        this.isEnabled = false;
     }
     async ngOnChanges(changes) {
+        this.isEnabled = await this.optionIsValid(this.option, this.node);
         this.isShown = await this.optionIsShown(this.option, this.node);
     }
-    optionIsValid(optionItem, node) {
+    async optionIsValid(optionItem, node) {
         if (optionItem.enabledCallback) {
-            return optionItem.enabledCallback(node);
+            return await optionItem.enabledCallback(node);
         }
         return optionItem.isEnabled;
     }
@@ -4755,7 +4996,7 @@ class OptionButtonComponent {
             color="primary"
             matTooltip="{{ option.name | translate }}"
             [class.display-none]="!isShown"
-            [disabled]="!optionIsValid(option, node)"
+            [disabled]="!isEnabled"
             (click)="click(option, node)"
             attr.data-test="option-button-{{ option.name }}"
         >
@@ -4773,7 +5014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
             color="primary"
             matTooltip="{{ option.name | translate }}"
             [class.display-none]="!isShown"
-            [disabled]="!optionIsValid(option, node)"
+            [disabled]="!isEnabled"
             (click)="click(option, node)"
             attr.data-test="option-button-{{ option.name }}"
         >
@@ -4861,7 +5102,7 @@ class NodeEntriesCardComponent {
         return [];
         // return options.filter((o) => o.showAsAction && o.showCallback(this.node)).slice(0, 3);
     }
-    openContextmenu(event) {
+    openContextmenu(event, node) {
         event.stopPropagation();
         event.preventDefault();
         if (!this.dropdown) {
@@ -4881,6 +5122,8 @@ class NodeEntriesCardComponent {
         }
         // Wait for the menu to reflect changed options.
         setTimeout(() => {
+            this.dropdown.callbackObject = node;
+            this.dropdown.ngOnChanges();
             if (this.dropdown.canShowDropdown()) {
                 this.menuTrigger.openMenu();
             }
@@ -4911,11 +5154,11 @@ class NodeEntriesCardComponent {
         }, this.node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", 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: "16.2.6", type: NodeEntriesCardComponent, 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)\"\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  <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: this.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:var(--focusWidth) 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 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:var(--focusWidth) 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: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: NodeEntriesCardComponent, 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: this.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:var(--focusWidth) 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:var(--focusWidth) 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: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$2.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NodeEntriesCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-card', 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)\"\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  <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: this.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:var(--focusWidth) 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 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:var(--focusWidth) 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"] }]
+            args: [{ selector: 'es-node-entries-card', 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: this.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:var(--focusWidth) 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:var(--focusWidth) 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: function () { return [{ type: NodeEntriesService }, { type: NodeHelperService }, { type: i0.ApplicationRef }, { type: i2.ConfigService }, { type: i2.AuthenticationService }, { type: NodeEntriesTemplatesService }, { type: NodeEntriesGlobalService }, { type: Toast, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { dropdown: [{
@@ -4950,11 +5193,11 @@ class NodeEntriesCardSmallComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", 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: "16.2.6", type: NodeEntriesCardSmallComponent, selector: "es-node-entries-card-small", inputs: { node: "node" }, usesOnChanges: true, 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    (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:var(--focusWidth) 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 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:var(--focusWidth) 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:rgba(255,255,255,.5);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: "16.2.6", type: NodeEntriesCardSmallComponent, selector: "es-node-entries-card-small", inputs: { node: "node" }, usesOnChanges: true, 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    (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:var(--focusWidth) 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:var(--focusWidth) 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:rgba(255,255,255,.5);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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NodeEntriesCardSmallComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-card-small', 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    (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:var(--focusWidth) 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 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:var(--focusWidth) 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:rgba(255,255,255,.5);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', 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    (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:var(--focusWidth) 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:var(--focusWidth) 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:rgba(255,255,255,.5);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"] }]
         }], ctorParameters: function () { return [{ type: NodeEntriesService }, { type: NodeHelperService }, { type: NodeEntriesTemplatesService }]; }, propDecorators: { node: [{
                 type: Input
             }] } });
@@ -4964,12 +5207,15 @@ class NodeEntriesGlobalOptionsComponent {
         this.entriesService = entriesService;
         this.NodeEntriesDisplayType = NodeEntriesDisplayType;
     }
+    getEnabledOptions() {
+        return this.entriesService.globalOptionsSubject.pipe(map((options) => options.filter((e) => e.isEnabled)));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NodeEntriesGlobalOptionsComponent, deps: [{ token: NodeEntriesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: NodeEntriesGlobalOptionsComponent, selector: "es-node-entries-global-options", inputs: { displayType: "displayType" }, ngImport: i0, template: "<div\n  *ngIf=\"(entriesService.globalOptionsSubject | 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 entriesService.globalOptionsSubject | 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: this.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;--tableIconSize: 38px;--textLight: #585858;--textMediumLight: #888;--textMain: #383838;--cardWidth: 240px;--colorStatusPositive: #40bf8e;--colorStatusNegative: var(--warning);--colorStarActive: #ba7c00;--nodeVirtualColor: #42ca8d;--nodeVirtualColorLight: #b8fcdd;--transitionNormal: .2s;--focusWidth: 2px;--fontSizeXSmall: 85%;--mobileWidth: 700px;--mobileStage: 100px;--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]  ", inputs: ["disabled", "disableRipple", "color"], 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: "16.2.6", type: NodeEntriesGlobalOptionsComponent, 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: this.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;--tableIconSize: 38px;--textLight: #585858;--textMediumLight: #888;--textMain: #383838;--cardWidth: 240px;--colorStatusPositive: #40bf8e;--colorStatusNegative: var(--warning);--colorStarActive: #ba7c00;--nodeVirtualColor: #42ca8d;--nodeVirtualColorLight: #b8fcdd;--transitionNormal: .2s;--focusWidth: 2px;--fontSizeXSmall: 85%;--mobileWidth: 700px;--mobileStage: 100px;--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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NodeEntriesGlobalOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-global-options', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"(entriesService.globalOptionsSubject | 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 entriesService.globalOptionsSubject | 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: this.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;--tableIconSize: 38px;--textLight: #585858;--textMediumLight: #888;--textMain: #383838;--cardWidth: 240px;--colorStatusPositive: #40bf8e;--colorStatusNegative: var(--warning);--colorStarActive: #ba7c00;--nodeVirtualColor: #42ca8d;--nodeVirtualColorLight: #b8fcdd;--transitionNormal: .2s;--focusWidth: 2px;--fontSizeXSmall: 85%;--mobileWidth: 700px;--mobileStage: 100px;--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, 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: this.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;--tableIconSize: 38px;--textLight: #585858;--textMediumLight: #888;--textMain: #383838;--cardWidth: 240px;--colorStatusPositive: #40bf8e;--colorStatusNegative: var(--warning);--colorStarActive: #ba7c00;--nodeVirtualColor: #42ca8d;--nodeVirtualColorLight: #b8fcdd;--transitionNormal: .2s;--focusWidth: 2px;--fontSizeXSmall: 85%;--mobileWidth: 700px;--mobileStage: 100px;--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: function () { return [{ type: NodeEntriesService }]; }, propDecorators: { displayType: [{
                 type: Input
             }] } });
@@ -5264,15 +5510,33 @@ class AppService {
 }
 
 // 'none' means that only labels should be shown (for dev)
-const DEFAULT_SUPPORTED_LANGUAGES = ['de', 'de-informal', 'en', 'fr', 'it', 'none'];
+const DEFAULT_SUPPORTED_LANGUAGES = [
+    'de',
+    'de-informal',
+    'de-no-binnen-i',
+    'en',
+    'fr',
+    'it',
+    'none',
+];
 class TranslationsService {
-    constructor(config, route, storage, translate, appService) {
+    constructor(config, route, storage, translate, sessionStorage, ref, appService) {
         this.config = config;
         this.route = route;
         this.storage = storage;
         this.translate = translate;
+        this.sessionStorage = sessionStorage;
+        this.ref = ref;
         this.appService = appService;
         this.languageLoaded = new BehaviorSubject(false);
+        this.sessionStorage?.observe('language').subscribe((lang) => {
+            // language has changed, i.e. user has different preference
+            if (this.translate.currentLang && this.translate.currentLang !== lang) {
+                this.initialize().subscribe(() => {
+                    this.ref.tick();
+                });
+            }
+        });
     }
     /**
      * Determines and configures the language to use and triggers loading of translations with
@@ -5367,7 +5631,7 @@ class TranslationsService {
             if (selectedLanguage === 'none') {
                 this.translate.setDefaultLang('none');
             }
-            else if (selectedLanguage === 'de-informal') {
+            else if (selectedLanguage?.startsWith('de-')) {
                 this.translate.setDefaultLang('de');
             }
             else {
@@ -5415,13 +5679,13 @@ class TranslationsService {
     getISOLanguage() {
         return LANGUAGES[this.language];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TranslationsService, deps: [{ token: i2.ConfigService }, { token: i2$1.ActivatedRoute }, { token: i2.SessionStorageService }, { token: i1.TranslateService }, { token: AppService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TranslationsService, deps: [{ token: i2.ConfigService }, { token: i2$1.ActivatedRoute }, { token: i2.SessionStorageService }, { token: i1.TranslateService }, { token: i2.SessionStorageService }, { token: i0.ApplicationRef }, { token: AppService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TranslationsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TranslationsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i2.ConfigService }, { type: i2$1.ActivatedRoute }, { type: i2.SessionStorageService }, { type: i1.TranslateService }, { type: AppService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2.ConfigService }, { type: i2$1.ActivatedRoute }, { type: i2.SessionStorageService }, { type: i1.TranslateService }, { type: i2.SessionStorageService }, { type: i0.ApplicationRef }, { type: AppService, decorators: [{
                     type: Optional
                 }] }]; } });
 
@@ -5502,6 +5766,8 @@ class NodeEntriesTableComponent {
         }
         // Wait for the menu to reflect changed options.
         setTimeout(() => {
+            this.dropdown.callbackObject = node;
+            this.dropdown.ngOnChanges();
             if (this.dropdown.canShowDropdown()) {
                 this.menuTrigger.openMenu();
             }
@@ -5656,11 +5922,11 @@ class NodeEntriesTableComponent {
         return node.properties?.[RestConstants.CCM_PROP_IMPORT_BLOCKED]?.[0] === 'true';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NodeEntriesTableComponent, deps: [{ token: NodeEntriesService }, { token: NodeEntriesGlobalService }, { token: i0.ApplicationRef }, { token: Toast }, { token: TranslationsService }, { 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: "16.2.6", type: NodeEntriesTableComponent, 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: this.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: this.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        esCheckTextOverflow\n        #text=\"esCheckTextOverflow\"\n        [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n        matTooltipTouchGestures=\"off\"\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:var(--focusWidth) 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i2$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.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", "callbackObject", "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: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i21.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i23.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i23.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", 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: "16.2.6", type: NodeEntriesTableComponent, 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: this.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: this.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:var(--focusWidth) 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i2$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.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", "callbackObject", "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: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i21.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i23.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i23.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NodeEntriesTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-node-entries-table', changeDetection: ChangeDetectionStrategy.OnPush, 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: this.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: this.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        esCheckTextOverflow\n        #text=\"esCheckTextOverflow\"\n        [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n        matTooltipTouchGestures=\"off\"\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:var(--focusWidth) 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, 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: this.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: this.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:var(--focusWidth) 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"] }]
         }], ctorParameters: function () { return [{ type: NodeEntriesService }, { type: NodeEntriesGlobalService }, { type: i0.ApplicationRef }, { type: Toast }, { type: TranslationsService }, { type: i0.ChangeDetectorRef }, { type: UIService }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -5889,7 +6155,7 @@ class OptionsHelperDataService {
         }
     }
     pasteNode(nodes = []) {
-        this.optionsHelperService.pasteNode(this.components, this.data, nodes);
+        this.optionsHelperService.pasteNode(this.components, this.data, true, nodes);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: OptionsHelperDataService, deps: [{ token: i0.NgZone }, { token: i2$1.ActivatedRoute }, { token: LocalEventsService }, { token: i2.AuthenticationService }, { token: i2.UserService }, { token: i2.NetworkService }, { token: KeyboardShortcutsService, optional: true }, { token: OptionsHelperService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: OptionsHelperDataService }); }
@@ -6166,12 +6432,17 @@ class NodeEntriesWrapperComponent {
             return;
         }
         this.dataSource.getData().forEach((d) => {
-            let hits = nodes.filter((n) => n.ref.id === d.ref.id);
+            let hits = nodes.filter((n) => n?.ref
+                ? n?.ref.id === d?.ref.id
+                : n?.authorityName ===
+                    d?.authorityName);
             if (hits.length === 0) {
                 // handle if the original has changed (for collection refs)
-                hits = nodes.filter((n) => n.ref.id === d.originalId);
+                hits = nodes.filter((n) => n?.ref &&
+                    n?.ref?.id === d?.originalId);
             }
             if (hits.length === 1) {
+                console.log('copy', d, hits);
                 this.nodeHelperService.copyDataToNode(d, hits[0]);
             }
         });
@@ -6464,6 +6735,7 @@ class EduSharingUiModule {
             EduSharingUiCommonModule,
             ListItemsModule,
             NodeEntriesModule], exports: [CommonModule,
+            MdsModule,
             MatTooltipModule,
             TranslateModule,
             EduSharingUiCommonModule,
@@ -6479,6 +6751,7 @@ class EduSharingUiModule {
             EduSharingUiCommonModule,
             ListItemsModule,
             NodeEntriesModule, CommonModule,
+            MdsModule,
             MatTooltipModule,
             TranslateModule,
             EduSharingUiCommonModule,
@@ -6502,6 +6775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                     ],
                     exports: [
                         CommonModule,
+                        MdsModule,
                         MatTooltipModule,
                         TranslateModule,
                         EduSharingUiCommonModule,
@@ -6692,10 +6966,12 @@ let TranslationLoader = class TranslationLoader {
         if (lang === 'none') {
             return of({});
         }
-        if (!LANGUAGES[lang]) {
-            console.error('unknown locale for language ' + lang);
+        // backend can not handle sub-languages
+        const langBackend = lang.startsWith('de-') ? 'de' : lang;
+        if (!LANGUAGES[langBackend]) {
+            console.error('unknown locale for language ' + lang + ' / ' + langBackend);
         }
-        this.configService.setLocale(LANGUAGES[lang]);
+        this.configService.setLocale(LANGUAGES[langBackend], lang);
         return rxjs
             .forkJoin({
             originalTranslations: this.getOriginalTranslations(lang).pipe(
@@ -6705,9 +6981,10 @@ let TranslationLoader = class TranslationLoader {
                 .observeTranslationOverrides()
                 .pipe(first()),
         })
-            .pipe(map(({ originalTranslations, translationOverrides }) => 
-        // FIXME: This will alter the object returned by `getOriginalTranslations`.
-        this.applyOverrides(originalTranslations, translationOverrides)), map((translations) => this.replaceGenderCharacter(translations)), catchError((error, obs) => {
+            .pipe(map(({ originalTranslations, translationOverrides }) => {
+            // FIXME: This will alter the object returned by `getOriginalTranslations`.
+            return this.applyOverrides(originalTranslations, translationOverrides);
+        }), map((translations) => this.replaceGenderCharacter(translations)), catchError((error, obs) => {
             console.error(error);
             return of(error);
         }));
@@ -6715,7 +6992,7 @@ let TranslationLoader = class TranslationLoader {
     getOriginalTranslations(lang) {
         switch (this.getSource()) {
             case 'repository':
-                return this.configService.observeDefaultTranslations().pipe(first());
+                return this.configService.observeDefaultTranslations().pipe(filter((arg) => !arg?.locale || arg.language === lang), switchMap((arg) => arg?.dict?.pipe(first()) || of(null)), first());
             case 'local':
                 return this.mergeTranslations(this.fetchTranslations(lang));
         }
@@ -6892,5 +7169,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ASSETS_BASE_PATH, AccessibilityService, AccessibilitySettings, ActionbarComponent, AppContainerService, AppService, BorderBoxObserverDirective, CheckTextOverflowDirective, ClickSource, ColorHelper, CombinedDataSource, Constrain, CustomFieldSpecialType, CustomOptions, CustomTemplatesDataSource, DateHelper, DefaultGroups, DropdownComponent, DurationFormat, DurationHelper, EDU_SHARING_UI_CONFIG, EduSharingUiCommonModule, EduSharingUiConfiguration, EduSharingUiModule, ElementType, FallbackTranslationHandler, FocusStateDirective, FormatDatePipe, FormatDurationPipe, FormatOptions, FormatSizePipe, Helper, HideMode, IconDirective, InfiniteScrollDirective, InteractionType, ItemsCap, KeyboardShortcutsService, ListBaseComponent, ListCountsComponent, ListItem, ListItemLabelPipe, ListItemSort, ListItemsModule, ListTextComponent, LocalEventsService, NodeCache, NodeDataSource, NodeDataSourceRemote, NodeEntriesDisplayType, NodeEntriesGlobalService, NodeEntriesModule, NodeEntriesWrapperComponent, NodeHelperService, NodeIconPipe, NodeImagePipe, NodeImageSizePipe, NodePersonNamePipe, NodeRowComponent, NodeTitlePipe, NodeUrlComponent, NodesDragDirective, NodesDragDropService, NodesDragSourceDirective, NodesDropTargetDirective, NodesRightMode, OPEN_URL_MODE, OptionGroup, OptionItem, OptionsHelperDataService, OptionsHelperService, PreferredColor, PropertySlugPipe, RelativeMode, RepoUrlService, RestHelper, Scope, SortDropdownComponent, SortEvent, SpinnerComponent, TRANSLATION_LIST, Target, TemporaryStorageService, Toast, ToastDuration, TranslationLoader, TranslationsModule, TranslationsService, UIAnimation, UIConstants, UIService, VCard, VCardNamePipe, WORKFLOW_STATUS_CHECKED, WORKFLOW_STATUS_HASFLAWS, WORKFLOW_STATUS_TO_CHECK, WORKFLOW_STATUS_UNCHECKED, clearDraggedNodes, dragNodesTransferType, getConfigProvider, isNumeric, isTrue, macroTick, matchesShortcutCondition, microTick, notNull, readDraggedNodes, saveDraggedNodes };
+export { ASSETS_BASE_PATH, AccessibilityService, AccessibilitySettings, ActionbarComponent, AppContainerService, AppService, BorderBoxObserverDirective, CheckTextOverflowDirective, ClickSource, ColorHelper, CombinedDataSource, Constrain, CustomFieldSpecialType, CustomOptions, CustomTemplatesDataSource, DateHelper, DefaultGroups, DropdownComponent, DurationFormat, DurationHelper, EDU_SHARING_UI_CONFIG, EduSharingUiCommonModule, EduSharingUiConfiguration, EduSharingUiModule, ElementType, FallbackTranslationHandler, FocusStateDirective, FormatDatePipe, FormatDurationPipe, FormatOptions, FormatSizePipe, Helper, HideMode, IconDirective, InfiniteScrollDirective, InteractionType, ItemsCap, KeyboardShortcutsService, ListBaseComponent, ListCountsComponent, ListItem, ListItemLabelPipe, ListItemSort, ListItemsModule, ListTextComponent, LocalEventsService, MdsHelperService, MdsModule, NodeCache, NodeDataSource, NodeDataSourceRemote, NodeEntriesDisplayType, NodeEntriesGlobalService, NodeEntriesModule, NodeEntriesWrapperComponent, NodeHelperService, NodeIconPipe, NodeImagePipe, NodeImageSizePipe, NodePersonNamePipe, NodeRowComponent, NodeTitlePipe, NodeUrlComponent, NodesDragDirective, NodesDragDropService, NodesDragSourceDirective, NodesDropTargetDirective, NodesRightMode, OPEN_URL_MODE, OptionGroup, OptionItem, OptionsHelperDataService, OptionsHelperService, PreferredColor, PropertySlugPipe, RelativeMode, RepoUrlService, RestHelper, Scope, SortDropdownComponent, SortEvent, SpinnerComponent, TRANSLATION_LIST, Target, TemporaryStorageService, Toast, ToastDuration, TranslationLoader, TranslationsModule, TranslationsService, UIAnimation, UIConstants, UIService, VCard, VCardNamePipe, WORKFLOW_STATUS_CHECKED, WORKFLOW_STATUS_HASFLAWS, WORKFLOW_STATUS_TO_CHECK, WORKFLOW_STATUS_UNCHECKED, clearDraggedNodes, dragNodesTransferType, getConfigProvider, isNumeric, isTrue, macroTick, matchesShortcutCondition, microTick, notNull, readDraggedNodes, saveDraggedNodes };
 //# sourceMappingURL=ngx-edu-sharing-ui.mjs.map