@yuuvis/client-framework 2.6.3 → 2.7.0

package/fesm2022/yuuvis-client-framework-query-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-query-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/query-list/src/lib/query-list.component.ts","../../../../../libs/yuuvis/client-framework/query-list/src/lib/query-list.component.html","../../../../../libs/yuuvis/client-framework/query-list/src/lib/query-list.module.ts","../../../../../libs/yuuvis/client-framework/query-list/src/yuuvis-client-framework-query-list.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, computed, contentChild, effect, HostBinding, inject, input, output, signal, TemplateRef, untracked, viewChild } from '@angular/core';\nimport { MatPaginatorModule, PageEvent } from '@angular/material/paginator';\nimport { SearchQuery, SearchResult, SearchResultItem, SearchService } from '@yuuvis/client-core';\nimport { ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective } from '@yuuvis/client-framework/common';\nimport { ListComponent, YuvListModule } from '@yuuvis/client-framework/list';\nimport { Pagination } from '@yuuvis/client-framework/pagination';\nimport { DeviceService } from '@yuuvis/material';\n\n/**\n * Component to display a list of items based on a search query. \n * It will execute the query and render the results using the provided item template.\n * \n * The component supports pagination, multi-selection, and drag selection.\n * \n * If you don't provide a transformer function, the raw SearchResultItem objects will be \n * used as items and passed to the template. The transformer function allows you to map\n * the SearchResultItem objects to a custom format before rendering. \n *\n * Example usage:\n * ```html\n * <yuv-query-list [transformer]=\"transformResult\" [query]=\"query\" (itemSelect)=\"onItemSelect($event)\">\n    \n    <!-- template used to render result item -->\n    <ng-template #yuvQueryListItem let-item>\n      <yuv-list-tile>\n        <ng-template #titleSlot>{{ item.id }}</ng-template>\n        <ng-template #descriptionSlot>{{ item.modified }}</ng-template>\n      </yuv-list-tile>\n    </ng-template>\n\n    <!-- Content to display when the list is empty -->\n    <ng-template #yuvQueryListEmpty>\n      <div>No documents found.</div>\n    </ng-template>\n\n  </yuv-query-list>\n * ```\n *\n * ```ts\n * @Component({...})\n * export class TestQueryListComponent {\n *  query = 'SELECT * FROM system:document';\n * \n *  transformResult = (items: SearchResultItem[]) =>\n *   items.map((item) => ({\n *     id: item.fields.get(BaseObjectTypeField.OBJECT_ID),\n *     modified: item.fields.get(BaseObjectTypeField.MODIFICATION_DATE)\n *   }));\n * } * \n * ```\n */\n@Component({\n  selector: 'yuv-query-list',\n  imports: [CommonModule, YuvListModule, ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective, MatPaginatorModule],\n  templateUrl: './query-list.component.html',\n  styleUrl: './query-list.component.scss'\n})\nexport class QueryListComponent {\n  #device = inject(DeviceService);\n  #searchService = inject(SearchService);\n  list = viewChild.required<ListComponent>('list');\n  itemTemplate = contentChild<TemplateRef<any>>('yuvQueryListItem');\n  emptyTemplate = contentChild<TemplateRef<any>>('yuvQueryListEmpty');\n\n  isTouchDevice = this.#device.isTouchEnabled;\n  /**\n   * The query to execute (SearchQuery object or CMIS query string).\n   */\n  query = input<SearchQuery | string | null>();\n\n  /**\n   * Optional transformer function to map SearchResultItem to a custom format.\n   */\n  transformer = input<((items: SearchResultItem[]) => unknown[]) | null>();\n  /**\n   * Function that returns `true` if selection changes should be prevented.\n   * This can be used to temporarily block selection changes, e.g. while\n   * there is a pending change inside another component that refers to the\n   * current selection.\n   */\n  preventChangeUntil = input<() => boolean>(() => false);\n  /**\n   * Event emitted when items are selected. Emits an array of selected item indices.\n   *\n   */\n  itemSelect = output<number[]>();\n  /**\n   * Event emitted during drag selection, providing the current selection of item indices.\n   */\n  dragSelectChange = output<number[]>();\n  /**\n   * Event emitted when an item is double-clicked, providing the index of the item.\n   */\n  itemDoubleClick = output<number>();\n  /**\n   * Event emitted when the query result is available, providing total count of items.\n   */\n  queryResult = output<{ totalCount: number }>();\n\n  #items = signal<SearchResultItem[]>([]);\n  /**\n   * The list of result items after applying the optional transformer.\n   */\n  resultItems = computed(() => {\n    const items = this.#items();\n    const transformer = this.transformer();\n    return transformer ? transformer(items) : items;\n  });\n\n  /**\n   * Number of items to fetch per page when executing the query.\n   * @default SearchService.DEFAULT_QUERY_SIZE\n   */\n  pageSize = input<number>(SearchService.DEFAULT_QUERY_SIZE);\n\n  /**\n   * Enables or disables drag selection of items. If `true`, users can select multiple items by dragging the mouse.\n   * @default true\n   */\n  enableDragSelect = input<boolean>(true);\n\n  /**\n   * Sets up the ability to select multiple tiles\n   * @default false\n   */\n  multiselect = input<boolean>(false);\n  /**\n   * If `true`, the component will handle selection itself. This means that\n   * the parent component will be responsible for styling the selected and\n   * focused items. If `false`, the component will take care of visualizing\n   * the selection and focus states.\n   * @default false\n   */\n  selfHandleSelection = input<boolean>(false);\n\n  /**\n   * Indicator signal whether a query is currently being executed.\n   * You could use this to show a loading indicator in the UI.\n   */\n  busy = signal<boolean>(false);\n\n  // state of pagination\n  @HostBinding('class.pagination') pagination?: Pagination;\n\n  #executeQueryEffect = effect(() => {\n    // execute the query each time it changes\n    const query = this.query();\n    if (query)\n      untracked(() => {\n        this.#executeQuery(query || null);\n      });\n  });\n\n  onItemClick(idx: number, event: MouseEvent) {\n    this.list().select(idx, event.shiftKey, event.ctrlKey);\n    this.list().focus();\n  }\n\n  onItemDoubleClick(idx: number, event: MouseEvent) {\n    this.itemDoubleClick.emit(idx);\n  }\n\n  onDragSelectChange(sel: number[]) {\n    this.list().multiSelect(sel);\n    this.dragSelectChange.emit(sel);\n  }\n\n  onDragSelect(sel: number[]) {\n    this.list().focus();\n    this.itemSelect.emit(sel);\n  }\n\n  /**\n   * Selects multiple items in the list.\n   */\n  multiSelect(index: number[]): void {\n    this.list().multiSelect(index);\n  }\n\n  /**\n   * Refreshes the list by re-executing the current query/page.\n   */\n  refresh() {\n    const query = this.query();\n    if (query) {\n      if (this.pagination) {\n        this.goToPage(this.pagination.page);\n      } else this.#executeQuery(query || null);\n    }\n  }\n\n  changePage(pe: PageEvent) {\n    this.goToPage(pe.pageIndex + 1);\n  }\n\n  goToPage(page: number) {\n    const query = this.query();\n    if (!query) return;\n    this.busy.set(true);\n    this.#searchService\n      .getPage(query, page, this.pageSize())\n\n      .subscribe({\n        next: (res: SearchResult) => {\n          this.#setupPagination(res);\n          this.#items.set(res.items);\n          this.busy.set(false);\n        },\n        error: (err) => {\n          // TODO: how should errors be handles in case hat loading pages fail\n          this.busy.set(false);\n          console.error(err);\n        }\n      });\n  }\n\n  /**\n   * Executes a search query.\n   * @param query The search query to execute. This may be a SearchQuery object or a string. If it's a string, it is supposed to\n   * be a CMIS query statement.\n   */\n  #executeQuery(query: SearchQuery | string | null) {\n    if (query && !this.busy()) {\n      // reset items to avoid old data being shown while new stuff is loaded\n      this.#items.set([]);\n      this.busy.set(true);\n\n      (typeof query === 'string'\n        ? this.#searchService.searchCmis(query as string, this.pageSize())\n        : this.#searchService.search(query as SearchQuery)\n      ).subscribe({\n        next: (res: SearchResult) => {\n          this.#setupPagination(res);\n          this.#items.set(res.items);\n          this.queryResult.emit({ totalCount: res.totalNumItems });\n          this.busy.set(false);\n        },\n        error: (err) => {\n          this.busy.set(false);\n          console.error(err);\n        }\n      });\n    }\n  }\n\n  #setupPagination(searchResult: SearchResult) {\n    this.pagination = undefined;\n    this.pagination = searchResult.paging\n      ? {\n          total: searchResult.totalNumItems,\n          pages: searchResult.paging.totalPages,\n          page: searchResult.paging.page\n        }\n      : undefined;\n  }\n}\n","<yuv-list\n  #list\n  [multiselect]=\"multiselect()\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [selfHandleClick]=\"true\"\n  [selfHandleSelection]=\"selfHandleSelection()\"\n  [yuvDragSelect]=\"{ disabled: !enableDragSelect() || !multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n  (itemSelect)=\"itemSelect.emit($event)\"\n>\n  @for (i of resultItems(); track $index) {\n    <div yuvListItem yuvDragSelectItem \n    (click.single)=\"onItemClick($index, $event)\"\n    (click.double)=\"onItemDoubleClick($index, $event)\" >\n      <ng-container *ngTemplateOutlet=\"itemTemplate() || null; context: { $implicit: i, index: $index }\"></ng-container>\n    </div>\n  } @empty {\n    <ng-container *ngTemplateOutlet=\"emptyTemplate() || null\"></ng-container>\n  }\n</yuv-list>\n@if (pagination) {\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageSize]=\"pageSize()\" (page)=\"changePage($event)\" hidePageSize> </mat-paginator>\n}\n","import { NgModule } from '@angular/core';\nimport { QueryListComponent } from './query-list.component';\n\nconst cmp = [QueryListComponent];\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YuvQueryListModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,32 +1,33 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, ChangeDetectionStrategy, Component, Injectable, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, contentChild, computed, viewChildren, signal, untracked, HostBinding, HostListener } from '@angular/core';
+import { input, output, viewChild, ChangeDetectionStrategy, Component, Injectable, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, contentChild, computed, untracked, signal, HostListener } from '@angular/core';
 import * as i1$1 from '@yuuvis/client-core';
-import { ObjectConfigService, SystemService, SearchService, EventService, DmsService, YuvEventType, BaseObjectTypeField, DmsObject, TranslateModule, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
-import { ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective, DialogComponent } from '@yuuvis/client-framework/common';
+import { ObjectConfigService, DmsService, DmsObject, SearchService, BaseObjectTypeField, TranslateModule, SystemService, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i2 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
-import * as i3 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActionsService } from '@yuuvis/client-framework/actions';
-import { YUV_ICONS, ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
 import * as i1 from '@yuuvis/client-framework/list';
-import { ListTileComponent, YuvListModule } from '@yuuvis/client-framework/list';
+import { YuvListModule } from '@yuuvis/client-framework/list';
+import * as i2 from '@yuuvis/client-framework/query-list';
+import { YuvQueryListModule } from '@yuuvis/client-framework/query-list';
 import { RendererDirective } from '@yuuvis/client-framework/renderer';
-import { DeviceService, YmtMatIconRegistryService, YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
-import { switchMap, finalize } from 'rxjs';
+import { YmtMatIconRegistryService, YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
+import { switchMap } from 'rxjs';
 import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import { DialogComponent } from '@yuuvis/client-framework/common';
 import { NgClass, CommonModule } from '@angular/common';
+import { ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
 import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
 
 class TileActionsMenuComponent {
@@ -141,51 +142,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * List that renders the result of a search query as object config based tiles. It also contains a component to
  * set up that configuration.
  *
- * ## Paging
- * If the search result contains more items than the page size, the list will show a
- * pagination control to navigate inbetween the pages.
- *
- * ## Staggered animation
- * Adding a class of `staggered` to the `yuv-tile-list` component will animate
- * the tiles in a staggered way (only if the user has not set up the OS to not
- * play animation).
  */
 const MATERIAL_IMPORTS = [MatIconModule, MatPaginatorModule, MatTooltipModule, MatMenuTrigger];
 class TileListComponent {
-    #objectConfigService;
-    #system;
-    #searchService;
-    #destroyRef;
-    #device;
-    #elRef;
-    #events;
-    #actionService;
-    #dmsService;
-    #contextFlag;
-    onCopy(event) {
-        event.preventDefault();
-        if (this._selection.length)
-            this.tileCopy.emit(this._selectionToTileData(this._selection));
-    }
-    onCut(event) {
-        event.preventDefault();
-        if (this._selection.length)
-            this.tileCut.emit(this._selectionToTileData(this._selection));
-    }
-    #currBusy;
-    #_busyEffect;
-    #preselect;
-    #preselectEffect;
-    #query;
-    #executeQueryEffect;
     constructor() {
         this.#objectConfigService = inject(ObjectConfigService);
-        this.#system = inject(SystemService);
-        this.#searchService = inject(SearchService);
         this.#destroyRef = inject(DestroyRef);
-        this.#device = inject(DeviceService);
         this.#elRef = inject(ElementRef);
-        this.#events = inject(EventService);
         this.#actionService = inject(ActionsService);
         this.#dmsService = inject(DmsService);
         this.menuComponent = contentChild(TileActionsMenuComponent);
@@ -194,27 +157,31 @@ class TileListComponent {
             return comp?.matMenu() ?? null;
         });
         this.emptyContent = contentChild('empty');
-        this.isTouchDevice = this.#device.isTouchEnabled;
-        this.tiles = viewChildren(ListTileComponent);
+        // tiles = viewChildren(ListTileComponent);
         this.list = viewChild.required('list');
-        this.#contextFlag = signal(false);
-        this.#currBusy = false;
-        this._busy = signal(false);
-        this.#_busyEffect = effect(() => {
-            const b = this._busy();
+        this.transformer = (res) => {
+            this.#rawResultItems = res;
+            const mappedItems = this.#mapToTileData(res.map((i) => new DmsObject(i)));
+            const items = mappedItems.map((item) => ({
+                ...item,
+                actions: (item.actions || [])
+                    .map((a) => this.#actionService.getActionById(a.id, this.options()?.actionContext))
+                    .filter((a) => a !== undefined)
+            }));
+            untracked(() => this.items.set(items));
+            return items;
+        };
+        this._busy = computed(() => this.list().busy());
+        this.#busyEffect = effect(() => {
             const preselect = this.#preselect();
-            if (!b && preselect.length) {
+            const busy = this._busy();
+            if (!busy && preselect.length) {
                 this.selectById(preselect);
                 this.#preselect.set([]);
             }
-            if (b !== this.#currBusy) {
-                this.#currBusy = b;
-                this.busy.emit(b);
-            }
         });
         this._selection = [];
         this.selectedTile = signal([]);
-        this.empytIcon = signal(YUV_ICONS.trash);
         /**
          * The ID of the selected list item
          */
@@ -226,15 +193,29 @@ class TileListComponent {
          * retrieved. Buckets should be unique so be sure to use a unique namespace.
          */
         this.bucket = input();
+        /**
+         * The number of items to display per page.
+         */
         this.pageSize = input(SearchService.DEFAULT_QUERY_SIZE);
         /**
-         * Sets up the ability to select multile tiles
+         * Sets up the ability to select multiple tiles
+         * @default false
          */
         this.multiselect = input(false);
+        /**
+         * If `true`, the tiles will be rendered in a more compact, denser style.
+         * @default false
+         */
         this.dense = input(false);
+        /**
+         * Configuration options for the tile list component.
+         */
         this.options = input(undefined);
+        /**
+         * The object flavor to be applied to the tiles.
+         */
         this.flavor = input();
-        this.flavorEffect = effect(() => {
+        this.#flavorEffect = effect(() => {
             const f = this.flavor();
             if (f)
                 this.applyFlavor(f);
@@ -258,6 +239,9 @@ class TileListComponent {
             });
             return x;
         });
+        /**
+         * Prevent selection changes while the provided function returns false.
+         */
         this.preventChangeUntil = input(() => true);
         this.disableCustomContextMenu = input(false);
         /**
@@ -275,43 +259,34 @@ class TileListComponent {
          */
         this.selectionChange = output();
         /**
-         * Emitted when a list item has been doubleclicked
+         * Emitted when a list item has been double-clicked
          */
         this.itemDblClick = output();
         this.ctxMenu = output();
         // the items rendered in the list
         this.items = signal([]);
-        this._items = computed(() => {
-            const items = this.items();
-            return items.map((item) => ({
-                ...item,
-                actions: (item.actions || [])
-                    .map((a) => this.#actionService.getActionById(a.id, this.options()?.actionContext))
-                    .filter((a) => a !== undefined)
-            }));
-        });
         this.searchExecuted = false;
-        this.#executeQueryEffect = effect(() => {
-            // execute the query each time it changes
-            this.#query = this.query();
-            if (this.#query && this.oc)
-                untracked(() => {
-                    this.#executeQuery(this.#query || undefined);
-                    this.empytIcon.set(YUV_ICONS.refresh);
-                });
-        });
-        this.#events
-            .on(YuvEventType.DMS_OBJECT_UPDATED)
-            .pipe(takeUntilDestroyed())
-            .subscribe((e) => {
-            const dmsObject = e.data;
-            // check if the updated object is part of the list
-            this.items().findIndex((item) => item.id === dmsObject.id) >= 0 && this.updateTileList([dmsObject]);
-        });
     }
-    getPageSize() {
-        return typeof this.#query === 'string' ? this.pageSize() : this.#query?.size || this.pageSize();
+    #objectConfigService;
+    #destroyRef;
+    #elRef;
+    #actionService;
+    #dmsService;
+    onCopy(event) {
+        event.preventDefault();
+        if (this._selection.length)
+            this.tileCopy.emit(this._selectionToTileData(this._selection));
     }
+    onCut(event) {
+        event.preventDefault();
+        if (this._selection.length)
+            this.tileCut.emit(this._selectionToTileData(this._selection));
+    }
+    #busyEffect;
+    #flavorEffect;
+    #preselect;
+    #preselectEffect;
+    #rawResultItems;
     contextMenuHandler(event, index) {
         if (this.disableCustomContextMenu())
             return;
@@ -332,14 +307,6 @@ class TileListComponent {
             .pipe(switchMap((o) => a.run([o])))
             .subscribe();
     }
-    select(i, evt) {
-        const check = this.preventChangeUntil();
-        const checked = check();
-        if (checked) {
-            const idx = this.items().findIndex((item) => item.id === i.id);
-            this.selectByIndex(idx, evt);
-        }
-    }
     selectById(ids) {
         if (this._busy())
             this.#preselect.set(ids);
@@ -351,38 +318,25 @@ class TileListComponent {
             this.selectionChange.emit(tiles);
         }
     }
-    onDragSelectChange(sel) {
-        this.list().multiSelect(sel);
-        this._selection = sel;
-        this._selection.sort();
+    selectByIndex(idx, evt) {
+        this.#select(idx, evt?.shiftKey, evt?.ctrlKey);
     }
-    onDragSelect(sel) {
-        this.#elRef.nativeElement.focus();
-        this._selection = sel;
-        const tiles = this._selectionToTileData(sel);
-        this.selectionChange.emit(tiles);
+    onQueryResult(e) {
+        this.searchExecuted = true;
+        this.queryResult.emit(e);
     }
     onListItemsSelect(sel) {
         this._selection = sel;
         if (sel.length)
             this.selectByIndex(sel[0]);
     }
-    selectByIndex(idx, evt) {
-        this.#select(idx, evt?.shiftKey, evt?.ctrlKey);
-    }
     refresh() {
-        if (this.#query) {
-            if (this.pagination) {
-                this.goToPage(this.pagination.page);
-            }
-            else
-                this.#executeQuery(this.query() || undefined);
-        }
+        this.list().refresh();
     }
     applyFlavor(flavor) {
         this.appliedFlavor = this.appliedFlavor?.id === flavor.id ? undefined : flavor;
-        if (this._rawResult)
-            this.items.set(this._mapSearchResult(this._rawResult));
+        if (this.#rawResultItems)
+            this.items.set(this.#mapToTileData(this.#rawResultItems.map((i) => new DmsObject(i))));
     }
     clearSelection(silent = false) {
         if (this._selection.length) {
@@ -407,26 +361,6 @@ class TileListComponent {
             this.#select(this._lastSelection - 1);
         }
     }
-    changePage(pe) {
-        this.goToPage(pe.pageIndex + 1);
-    }
-    goToPage(page) {
-        if (!this.#query)
-            return;
-        this._busy.set(true);
-        this.#searchService
-            .getPage(this.#query, page, this.getPageSize())
-            .pipe(finalize(() => this._busy.set(false)))
-            .subscribe({
-            next: (res) => {
-                this.#setupPagination(res);
-                this.items.set(this._mapSearchResult(res));
-            },
-            error: (err) => {
-                // TODO: how should errors be handles in case hat loading pages fail
-            }
-        });
-    }
     #select(index, shiftKey = false, ctrlKey = false) {
         this.#elRef.nativeElement.focus();
         if (index === -1) {
@@ -471,47 +405,6 @@ class TileListComponent {
     _selectionToTileData(selection) {
         return selection.map((idx) => this.items()[idx]);
     }
-    /**
-     * Executes a search query.
-     * @param query The search query to execute. This may be a SearchQuery object or a string. If it's a string, it is supposed to
-     * be a CMIS query statement.
-     */
-    #executeQuery(query) {
-        if (query && this.#system.system && !this._busy()) {
-            this.searchExecuted = false;
-            // reset items to avoid old data being shown while new stuff is loaded
-            this.items.set([]);
-            this._busy.set(true);
-            const isSearchQuery = query && typeof query !== 'string';
-            if (isSearchQuery) {
-                query.fields = undefined;
-            }
-            (isSearchQuery ? this.#searchService.search(query) : this.#searchService.searchCmis(query, this.getPageSize()))
-                .pipe(finalize(() => this._busy.set(false)))
-                .subscribe({
-                next: (res) => {
-                    this.#setupPagination(res);
-                    this.items.set(this._mapSearchResult(res));
-                    this.queryResult.emit({ totalCount: res.items.length });
-                    const preselect = this.preselect();
-                    if (preselect) {
-                        this.selectById(preselect);
-                    }
-                },
-                error: (err) => console.error(err)
-            });
-        }
-    }
-    #setupPagination(searchResult) {
-        this.pagination = undefined;
-        this.pagination = searchResult.paging
-            ? {
-                total: searchResult.totalNumItems,
-                pages: searchResult.paging.totalPages,
-                page: searchResult.paging.page
-            }
-            : undefined;
-    }
     #mapToTileData(objects) {
         return objects.map((dmsObject) => {
             const sots = dmsObject.sots || [];
@@ -562,11 +455,6 @@ class TileListComponent {
             return tli;
         });
     }
-    _mapSearchResult(res) {
-        this.searchExecuted = true;
-        this._rawResult = res;
-        return this.oc ? this.#mapToTileData(res.items.map((i) => new DmsObject(i))) : [];
-    }
     #getResolvedObjectConfigItem(propertyName, instanceData) {
         const item = {
             propertyName: propertyName,
@@ -597,6 +485,7 @@ class TileListComponent {
         });
     }
     ngOnInit() {
+        this._busy = this.list().busy;
         this.#objectConfigService
             .getObjectConfigs$(this.bucket() || '', true)
             .pipe(takeUntilDestroyed(this.#destroyRef))
@@ -604,15 +493,12 @@ class TileListComponent {
             next: (res) => {
                 this.oc = res;
                 const q = this.query();
-                q && this.#executeQuery(q);
+                // q && this.#executeQuery(q);
             }
         });
     }
-    ngOnDestroy() {
-        // this._keyManager?.destroy();
-    }
     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 }, 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()", "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "menuComponent", first: true, predicate: TileActionsMenuComponent, descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: ListTileComponent, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-list\n  #list\n  [multiselect]=\"this.multiselect()\"\n  [selfHandleSelection]=\"true\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n>\n  @for (i of _items(); track i.id) {\n    <yuv-list-tile [class.dense]=\"dense()\"\n      yuvListItem\n      yuvDragSelectItem\n      (click.single)=\"select(i, $event)\"\n      (click.double)=\"itemDblClick.emit(i)\"\n      (contextmenu)=\"contextMenuHandler($event, $index)\"\n    >\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"i.icon\"></ng-container></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"i.title\"></ng-container></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"i.description\"></ng-container></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"i.meta\"></ng-container></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"i.aside\"></ng-container></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of i.actions; track a.id) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"a.label\" (click)=\"executeAction(i, 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'\" [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: i.objectTypeId, data: i.instanceData }\"></ng-container> </ng-template>\n      <ng-template #badgesSlot>{{ i.badges }}</ng-template>\n    </yuv-list-tile>\n  } @empty {\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  }\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-list>\n@if (pagination) {\n  <mat-paginator class=\"paginator\" [length]=\"pagination?.total\" [pageSize]=\"getPageSize()\" (page)=\"changePage($event)\" hidePageSize> </mat-paginator>\n}\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-list{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-list .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i1.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: i1.ListTileComponent, selector: "yuv-list-tile" }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }, { 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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { 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 }, 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 }], ngImport: i0, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"selectByIndex($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'\" [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-list{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-list .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i1.ListTileComponent, selector: "yuv-list-tile" }, { kind: "ngmodule", type: YuvQueryListModule }, { kind: "component", type: i2.QueryListComponent, selector: "yuv-query-list", inputs: ["query", "transformer", "preventChangeUntil", "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: i3.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,
@@ -620,26 +506,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         TranslateModule,
                         ReactiveFormsModule,
                         YuvListModule,
-                        ClickDoubleDirective,
+                        YuvQueryListModule,
                         YuvListModule,
-                        DragSelectDirective,
-                        DragSelectItemDirective,
                         RendererDirective,
                         TileExtensionDirective,
                         YmtIconButtonDirective,
                         ...MATERIAL_IMPORTS
                     ], host: {
                         '[class.dense]': 'dense()'
-                    }, template: "<yuv-list\n  #list\n  [multiselect]=\"this.multiselect()\"\n  [selfHandleSelection]=\"true\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n>\n  @for (i of _items(); track i.id) {\n    <yuv-list-tile [class.dense]=\"dense()\"\n      yuvListItem\n      yuvDragSelectItem\n      (click.single)=\"select(i, $event)\"\n      (click.double)=\"itemDblClick.emit(i)\"\n      (contextmenu)=\"contextMenuHandler($event, $index)\"\n    >\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"i.icon\"></ng-container></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"i.title\"></ng-container></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"i.description\"></ng-container></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"i.meta\"></ng-container></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"i.aside\"></ng-container></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of i.actions; track a.id) {\n          <button ymt-icon-button [icon-button-size]=\"'small'\" [matTooltip]=\"a.label\" (click)=\"executeAction(i, 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'\" [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: i.objectTypeId, data: i.instanceData }\"></ng-container> </ng-template>\n      <ng-template #badgesSlot>{{ i.badges }}</ng-template>\n    </yuv-list-tile>\n  } @empty {\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  }\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-list>\n@if (pagination) {\n  <mat-paginator class=\"paginator\" [length]=\"pagination?.total\" [pageSize]=\"getPageSize()\" (page)=\"changePage($event)\" hidePageSize> </mat-paginator>\n}\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-list{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-list .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { onCopy: [{
+                    }, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"selectByIndex($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'\" [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-list{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-list .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}: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']]
             }], onCut: [{
                 type: HostListener,
                 args: ['keydown.control.x', ['$event']]
-            }], pagination: [{
-                type: HostBinding,
-                args: ['class.pagination']
             }] } });
 
 class ActionSelectComponent {
@@ -654,7 +535,7 @@ class ActionSelectComponent {
         this.actionSelect = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n  @for (a of actions(); track a.id) {\n    <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n      <mat-icon>{{ a.icon }}</mat-icon\n      >{{ a.label }}\n    </button>\n  }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n  @for (a of actions(); track a.id) {\n    <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n      <mat-icon>{{ a.icon }}</mat-icon\n      >{{ a.label }}\n    </button>\n  }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionSelectComponent, decorators: [{
             type: Component,
@@ -781,7 +662,7 @@ class PropertySelectComponent {
         return this.system.getLocalizedLabel(otf.id) || otf.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PropertySelectComponent, decorators: [{
             type: Component,
@@ -839,7 +720,7 @@ class TileConfigTileComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    {{ oc?.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    {{ oc?.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TileConfigTileComponent, decorators: [{
             type: Component,