@yuuvis/client-framework 2.11.2 → 2.12.0

package/fesm2022/yuuvis-client-framework-tile-list.mjs

@@ -10,7 +10,7 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i2$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltip, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule } from '@angular/material/tooltip';
 import { ActionsService } from '@yuuvis/client-framework/actions';
 import * as i2 from '@yuuvis/client-framework/list';
 import { YuvListModule } from '@yuuvis/client-framework/list';
@@ -43,10 +43,10 @@ class TileActionsMenuComponent {
         this.itemSelect.emit(action);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileActionsMenuComponent, isStandalone: true, selector: "yuv-tile-actions-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileActionsMenuComponent, isStandalone: true, selector: "yuv-tile-actions-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'below' } }], viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <mat-menu #menuRef>
       @for (action of actions(); track action.id) {
-        <button mat-menu-item (click)="itemClicked($event, action)">
+        <button mat-menu-item (click)="itemClicked($event, action)" [matTooltip]="action.description" [matTooltipDisabled]="!action.description">
           @if (action.icon) {
             <mat-icon>{{ action.icon }}</mat-icon>
           }
@@ -54,14 +54,14 @@ class TileActionsMenuComponent {
         </button>
       }
     </mat-menu>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-actions-menu', imports: [MatMenu, MatIcon, MatMenuItem], template: `
+            args: [{ selector: 'yuv-tile-actions-menu', imports: [MatMenu, MatIcon, MatMenuItem, MatTooltip], template: `
     <mat-menu #menuRef>
       @for (action of actions(); track action.id) {
-        <button mat-menu-item (click)="itemClicked($event, action)">
+        <button mat-menu-item (click)="itemClicked($event, action)" [matTooltip]="action.description" [matTooltipDisabled]="!action.description">
           @if (action.icon) {
             <mat-icon>{{ action.icon }}</mat-icon>
           }
@@ -69,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         </button>
       }
     </mat-menu>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+  `, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'below' } }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
         }] });
 
 class TileExtensionService {
@@ -327,20 +327,21 @@ class TileListComponent {
     executeAction(t, a, evt) {
         evt.preventDefault();
         evt.stopPropagation();
+        const selectedIds = this.selection();
+        const ids = selectedIds.includes(t.id) ? selectedIds : [t.id];
         this.#dmsService
-            .getDmsObject(t.id)
-            .pipe(switchMap((o) => a.run([o])))
+            .getDmsObjects(ids)
+            .pipe(switchMap((objects) => a.run(objects)))
             .subscribe();
     }
     selectById(ids) {
         if (this._busy())
             this.#preselect.set(ids);
         else {
-            const selection = ids.map((id) => this.items().findIndex((i) => i.id === id)).filter((i) => i !== -1);
-            this.list().multiSelect(selection);
+            const indices = ids.map((id) => this.items().findIndex((i) => i.id === id)).filter((i) => i !== -1);
+            this.list().multiSelect(indices);
             this.#elRef.nativeElement.focus();
-            const tiles = this._selectionToTileData(selection);
-            this.selectionChange.emit(tiles);
+            this.#updateSelectionState(indices);
         }
     }
     multiSelect(index) {
@@ -357,9 +358,30 @@ class TileListComponent {
         this.queryResult.emit(e);
     }
     onListItemsSelect(sel) {
-        this._selection = sel;
-        if (sel.length)
+        if (sel.length === 1) {
             this.#internalSelectByIndex(sel[0]);
+            return;
+        }
+        this.#updateSelectionState(sel);
+    }
+    onDragSelectChange(sel) {
+        this.#updateSelectionState(sel);
+    }
+    /**
+     * Shared method to update all selection state and emit outputs.
+     * Used by `onListItemsSelect`, `onDragSelectChange`, and `selectById`.
+     */
+    #updateSelectionState(sel) {
+        const sorted = [...sel].sort();
+        // skip if selection hasn't changed
+        if (this.#isSelectionEqual(sorted))
+            return;
+        this._selection = sorted;
+        this._lastSelection = this._selection.length ? this._selection[this._selection.length - 1] : undefined;
+        const tiles = this._selectionToTileData(this._selection);
+        this.selection.set(tiles.map((t) => t.id));
+        this.selectionChange.emit(tiles);
+        this.selectedTile.set(tiles);
     }
     refresh() {
         this.list().refresh();
@@ -372,6 +394,7 @@ class TileListComponent {
                 .map((a) => this.#actionService.getActionById(a.id, this.options()?.actionContext))
                 .filter((a) => a !== undefined)
         }));
+        this.items.set([...items, ...this.items()]);
         this.list().dropItems(items);
     }
     applyFlavor(flavor) {
@@ -417,6 +440,9 @@ class TileListComponent {
         if (this._selection.length) {
             this.list().clear(silent);
             this._selection = [];
+            this._lastSelection = undefined;
+            this.selection.set([]);
+            this.selectedTile.set([]);
             if (!silent)
                 this.selectionChange.emit([]);
         }
@@ -426,9 +452,9 @@ class TileListComponent {
      * it wraps around to the first item. Does nothing if no item is currently selected.
      */
     selectNext() {
-        if (this._lastSelection) {
+        if (this._lastSelection !== undefined) {
             let i = this._lastSelection + 1;
-            if (i > this.items.length)
+            if (i >= this.items().length)
                 i = 0;
             this.#select(i);
         }
@@ -438,24 +464,25 @@ class TileListComponent {
      * it wraps around to the last item. Does nothing if no item is currently selected.
      */
     selectPrev() {
-        if (this._lastSelection) {
+        if (this._lastSelection !== undefined) {
             let i = this._lastSelection - 1;
             if (i < 0)
-                i = this.items.length - 1;
-            this.#select(this._lastSelection - 1);
+                i = this.items().length - 1;
+            this.#select(i);
         }
     }
     #select(index, shiftKey = false, ctrlKey = false) {
         this.#elRef.nativeElement.focus();
+        let newSelection;
         if (index === -1) {
-            this._selection = [];
+            newSelection = [];
         }
         else {
             if (this.multiselect()) {
-                this._selection = this._selection.filter((i) => i !== index);
+                newSelection = this._selection.filter((i) => i !== index);
                 if (ctrlKey) {
                     // if ctrl key add to selection
-                    this._selection.push(index);
+                    newSelection.push(index);
                 }
                 else if (shiftKey) {
                     // add range
@@ -463,28 +490,38 @@ class TileListComponent {
                         const startIndex = this._lastSelection < index ? this._lastSelection : index;
                         const endIndex = this._lastSelection > index ? this._lastSelection : index;
                         for (let i = startIndex; i <= endIndex; i++) {
-                            this._selection.push(i);
+                            newSelection.push(i);
                         }
                     }
                     else {
-                        this._selection = [index];
+                        newSelection = [index];
                     }
                 }
                 else {
-                    this._selection = [index];
+                    newSelection = [index];
                 }
             }
-            else
-                this._selection = [index];
-            this._selection = [...new Set(this._selection)];
+            else {
+                newSelection = [index];
+            }
+            newSelection = [...new Set(newSelection)];
         }
+        newSelection.sort();
+        // skip if selection hasn't changed
+        if (this.#isSelectionEqual(newSelection))
+            return;
+        this._selection = newSelection;
         this._lastSelection = this._selection.length === 0 ? undefined : index;
-        this._selection.sort();
-        // this.listItems().forEach((item: ListItemDirective, i: number) => item.selectedInput.set(this._selection.includes(i)));
         const tiles = this._selectionToTileData(this._selection);
+        this.selection.set(tiles.map((t) => t.id));
         this.selectionChange.emit(tiles);
         tiles.length === 1 && this.itemSelect.emit(tiles[0]);
-        this.selectedTile.set(this._selection.map((idx) => this.items()[idx]));
+        this.selectedTile.set(tiles);
+    }
+    #isSelectionEqual(newSelection) {
+        if (newSelection.length !== this._selection.length)
+            return false;
+        return newSelection.every((v, i) => v === this._selection[i]);
     }
     _selectionToTileData(selection) {
         return selection.map((idx) => this.items()[idx]);
@@ -575,7 +612,7 @@ class TileListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, disableCustomContextMenu: { classPropertyName: "disableCustomContextMenu", publicName: "disableCustomContextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { listeners: { "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)" }, properties: { "class.dense": "dense()" } }, providers: [], queries: [{ propertyName: "menuComponent", first: true, predicate: TileActionsMenuComponent, descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "menuTriggers", predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [autoSelect]=\"autoSelect()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"onItemDoubleClick($event)\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  (queryResult)=\"onQueryResult($event)\"\n>\n\n  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile\n      [class.dense]=\"dense()\"\n      (contextmenu)=\"contextMenuHandler($event, index)\"\n    >\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\"></ng-container></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\"></ng-container></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\"></ng-container></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\"></ng-container></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\"></ng-container></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"a.label\" (click)=\"executeAction(item, a, $event)\">\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\" [matMenuTriggerFor]=\"menu()\">\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\"></ng-content>\n      </ng-template>\n      <ng-template #extensionSlot> <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\"></ng-container> </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i2.ListTileComponent, selector: "yuv-list-tile" }, { kind: "ngmodule", type: YuvQueryListModule }, { kind: "component", type: i3.QueryListComponent, selector: "yuv-query-list", inputs: ["query", "idProperty", "transformer", "preventChangeUntil", "autoSelect", "pageSize", "enableDragSelect", "multiselect", "selfHandleSelection"], outputs: ["itemSelect", "dragSelectChange", "itemDoubleClick", "queryResult"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, disableCustomContextMenu: { classPropertyName: "disableCustomContextMenu", publicName: "disableCustomContextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { listeners: { "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)" }, properties: { "class.dense": "dense()" } }, providers: [], queries: [{ propertyName: "menuComponent", first: true, predicate: TileActionsMenuComponent, descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "menuTriggers", predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [autoSelect]=\"autoSelect()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"onItemDoubleClick($event)\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  (queryResult)=\"onQueryResult($event)\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n>\n\n  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile\n      [class.dense]=\"dense()\"\n      (contextmenu)=\"contextMenuHandler($event, index)\"\n    >\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\"></ng-container></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\"></ng-container></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\"></ng-container></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\"></ng-container></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\"></ng-container></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"a.label\" (click)=\"executeAction(item, a, $event)\">\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\"\n          (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n          [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\" [matMenuTriggerFor]=\"menu()\">\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\"></ng-content>\n      </ng-template>\n      <ng-template #extensionSlot> <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\"></ng-container> </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i2.ListTileComponent, selector: "yuv-list-tile" }, { kind: "ngmodule", type: YuvQueryListModule }, { kind: "component", type: i3.QueryListComponent, selector: "yuv-query-list", inputs: ["query", "idProperty", "transformer", "preventChangeUntil", "autoSelect", "pageSize", "enableDragSelect", "multiselect", "selfHandleSelection"], outputs: ["itemSelect", "dragSelectChange", "itemDoubleClick", "queryResult"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileListComponent, decorators: [{
             type: Component,
@@ -591,7 +628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ...MATERIAL_IMPORTS
                     ], host: {
                         '[class.dense]': 'dense()'
-                    }, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [autoSelect]=\"autoSelect()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"onItemDoubleClick($event)\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  (queryResult)=\"onQueryResult($event)\"\n>\n\n  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile\n      [class.dense]=\"dense()\"\n      (contextmenu)=\"contextMenuHandler($event, index)\"\n    >\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\"></ng-container></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\"></ng-container></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\"></ng-container></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\"></ng-container></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\"></ng-container></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"a.label\" (click)=\"executeAction(item, a, $event)\">\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\" [matMenuTriggerFor]=\"menu()\">\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\"></ng-content>\n      </ng-template>\n      <ng-template #extensionSlot> <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\"></ng-container> </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
+                    }, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [autoSelect]=\"autoSelect()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"onItemDoubleClick($event)\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  (queryResult)=\"onQueryResult($event)\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n>\n\n  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile\n      [class.dense]=\"dense()\"\n      (contextmenu)=\"contextMenuHandler($event, index)\"\n    >\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\"></ng-container></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\"></ng-container></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\"></ng-container></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\"></ng-container></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\"></ng-container></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"a.label\" (click)=\"executeAction(item, a, $event)\">\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\"\n          (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n          [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\" [matMenuTriggerFor]=\"menu()\">\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\"></ng-content>\n      </ng-template>\n      <ng-template #extensionSlot> <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\"></ng-container> </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
         }], propDecorators: { onCopy: [{
                 type: HostListener,
                 args: ['keydown.control.c', ['$event']]