@yuuvis/client-framework 2.18.0 → 2.20.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, ChangeDetectionStrategy, Component, Injectable, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, contentChild, computed, viewChildren, signal, linkedSignal, untracked } from '@angular/core';
+import { input, output, viewChild, ChangeDetectionStrategy, Component, Injectable, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, contentChild, viewChildren, computed, signal, linkedSignal, untracked } from '@angular/core';
 import * as i1 from '@yuuvis/client-core';
-import { ObjectConfigService, DmsService, DmsObject, SearchService, BaseObjectTypeField, TranslateModule, SystemService, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
+import { ObjectConfigService, DmsService, SearchService, DmsObject, BaseObjectTypeField, TranslateModule, SystemService, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/forms';
@@ -43,10 +43,15 @@ class TileActionsMenuComponent {
         this.itemSelect.emit(action);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: 'right' } }], 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)" [matTooltip]="action.description" [matTooltipDisabled]="!action.description">
+        <button
+          mat-menu-item
+          (click)="itemClicked($event, action)"
+          [matTooltip]="action.description"
+          [matTooltipDisabled]="!action.description"
+        >
           @if (action.icon) {
             <mat-icon>{{ action.icon }}</mat-icon>
           }
@@ -61,7 +66,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             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)" [matTooltip]="action.description" [matTooltipDisabled]="!action.description">
+        <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 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </button>
       }
     </mat-menu>
-  `, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'below' } }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+  `, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
         }] });
 
 class TileExtensionService {
@@ -139,151 +149,413 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+const MATERIAL_IMPORTS = [MatIconModule, MatPaginatorModule, MatTooltipModule, MatMenuTrigger];
 /**
- * List that renders the result of a search query as object config based tiles. It also contains a component to
- * set up that configuration.
+ * Query-driven tile list that renders `DmsObject` search results as rich, configurable
+ * tiles based on `ObjectConfig` definitions.
+ *
+ * The component wraps `yuv-query-list` and adds DMS-specific concerns: it resolves the
+ * `ObjectConfigRecord` for each result item (via `ObjectConfigService`), maps raw
+ * `SearchResultItem` data to the `TileData` view model, and supports per-object-type
+ * flavors, inline actions, context menus, and keyboard shortcuts for copy/cut.
+ *
+ * **Key Features:**
+ * - Automatic object config resolution (title, description, icon, meta, aside, actions)
+ * - Per-tile action buttons rendered from the resolved `ObjectConfigRecord`
+ * - Optional `ObjectFlavor` overlay to switch the visual representation of specific SOTs
+ * - Server-side pagination forwarded from the inner `yuv-query-list`
+ * - Multi-selection with Shift/Ctrl modifier keys and mouse drag-to-select
+ * - Programmatic pre-selection by object ID (`preselect` input, `selectById()` method)
+ * - Per-item CSS highlight styles via the `highlights` input
+ * - Optimistic list updates without a full re-fetch (`updateListItems`, `updateTileList`, `dropItems`)
+ * - Keyboard shortcuts: **Ctrl+C** emits `tileCopy`, **Ctrl+X** emits `tileCut`
+ * - Optional custom context menu via projected `TileActionsMenuComponent`
+ * - Isolated tile config bucket so multiple instances can have different column layouts
+ *
+ * **Content Projection Slots:**
+ * - `TileActionsMenuComponent` — optional; project a `<yuv-tile-actions-menu>` to attach
+ *   a context menu to every tile's action trigger.
+ * - `#empty` — optional template reference; shown when the query returns no results.
+ *
+ * **Basic usage:**
+ * ```html
+ * <yuv-tile-list [query]="query" (itemSelect)="onSelect($event)" />
+ * ```
  *
+ * **Multi-select with custom bucket and highlights:**
+ * ```html
+ * <yuv-tile-list
+ *   bucket="my-feature"
+ *   [query]="query"
+ *   [multiselect]="true"
+ *   [highlights]="highlights"
+ *   (selectionChange)="onSelectionChange($event)"
+ * />
+ * ```
+ *
+ * **With context menu:**
+ * ```html
+ * <yuv-tile-list [query]="query" (ctxMenu)="onCtxMenu($event)">
+ *   <yuv-tile-actions-menu>
+ *     <button mat-menu-item (click)="openDetails()">Open</button>
+ *   </yuv-tile-actions-menu>
+ * </yuv-tile-list>
+ * ```
  */
-const MATERIAL_IMPORTS = [MatIconModule, MatPaginatorModule, MatTooltipModule, MatMenuTrigger];
 class TileListComponent {
+    //#region Dependencies
     #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));
-    }
     #busy;
     #preselect;
     #rawResultItems;
+    //#endregion
     constructor() {
+        //#region Dependencies
         this.#objectConfigService = inject(ObjectConfigService);
         this.#destroyRef = inject(DestroyRef);
         this.#elRef = inject(ElementRef);
         this.#actionService = inject(ActionsService);
         this.#dmsService = inject(DmsService);
+        //#endregion
+        //#region Angular stuff
+        /**
+         * Optional projected `TileActionsMenuComponent` instance.
+         *
+         * When present, its `matMenu()` is wired as the context menu for every tile's
+         * action trigger button. The menu closes automatically whenever the user selects
+         * a menu item (managed by `#closeMenuEffect`).
+         *
+         * Project it into the component:
+         * ```html
+         * <yuv-tile-list ...>
+         *   <yuv-tile-actions-menu>
+         *     <button mat-menu-item>Open</button>
+         *   </yuv-tile-actions-menu>
+         * </yuv-tile-list>
+         * ```
+         */
         this.menuComponent = contentChild(TileActionsMenuComponent);
-        this.menu = computed(() => {
-            const comp = this.menuComponent();
-            return comp?.matMenu() ?? null;
-        });
+        /**
+         * Optional projected element shown when the query returns an empty result set.
+         *
+         * Reference the element with the `#empty` template variable:
+         * ```html
+         * <yuv-tile-list ...>
+         *   <div #empty>No items found.</div>
+         * </yuv-tile-list>
+         * ```
+         */
         this.emptyContent = contentChild('empty');
+        /**
+         * Reference to the inner `QueryListComponent` instance.
+         *
+         * Used internally to delegate imperative operations (select, multiSelect, refresh, …).
+         * Prefer the public API methods on this component over accessing `list()` directly from
+         * the parent, as the inner list's API may change independently.
+         */
         this.list = viewChild.required('list');
-        this.menuTriggers = viewChildren(MatMenuTrigger);
-        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._selection = [];
-        this.selectedTile = signal([]);
         /**
-         * The ID of the selected list item
+         * All `MatMenuTrigger` instances rendered inside the tile list.
+         *
+         * Used by `#closeMenuEffect` to close every open context/action menu when the user
+         * selects a menu item, ensuring only one menu is open at a time.
          */
-        this.selection = signal([]);
+        this.menuTriggers = viewChildren(MatMenuTrigger);
         /**
-         * Tile configurations are stored globally for all apps. If you want a
-         * separate config for your app/component you can specify a bucket. A bucket
-         * is basically an ID where your custom tile config will be stored and
-         * retrieved. Buckets should be unique so be sure to use a unique namespace.
+         * Namespace key for storing and retrieving this instance's tile configuration.
+         *
+         * Tile column/field layout is persisted globally via `ObjectConfigService`. Providing
+         * a bucket isolates this instance's configuration from the global default, so two
+         * tile lists with different purposes (e.g. inbox vs. archive) can each remember their
+         * own preferred layout independently.
+         *
+         * Use a unique, stable string — e.g. `"my-app.inbox-list"`. If omitted, the global
+         * default configuration is used.
          */
         this.bucket = input();
         /**
-         * The number of items to display per page.
+         * Number of result items to request per page from the search service.
+         *
+         * Forwarded to the inner `QueryListComponent`. When the total result count exceeds
+         * this value, pagination controls appear. Reducing this number improves initial load
+         * time; increasing it reduces the need for pagination.
+         *
+         * @default SearchService.DEFAULT_QUERY_SIZE
          */
         this.pageSize = input(SearchService.DEFAULT_QUERY_SIZE);
         /**
-         * Sets up the ability to select multiple tiles
+         * Enables multi-selection mode.
+         *
+         * When `true`, the user can hold **Shift** to range-select or **Ctrl** to toggle
+         * individual tiles, and mouse drag-to-select becomes available. `selectionChange`
+         * then emits the full selection array; `itemSelect` still emits only the most
+         * recently added single tile.
+         *
          * @default false
          */
         this.multiselect = input(false);
         /**
-         * If `true`, the tiles will be rendered in a more compact, denser style.
+         * Renders tiles in a compact, reduced-height style.
+         *
+         * Drives the `[class.dense]` host binding. Use this when vertical space is limited
+         * or when many items need to be visible at once without scrolling.
+         *
          * @default false
          */
         this.dense = input(false);
         /**
-         * Configuration options for the tile list component.
+         * Extended configuration options for the tile list.
+         *
+         * See `TileListConfigOptions` for the full set of options, including:
+         * - `actionContext` — passed to `ActionsService.getActionById()` when resolving inline
+         *   tile actions, so actions can behave differently per context.
+         * - `configTypes` — virtual config type overrides that let you map specific
+         *   object-type / SOT combinations to a different `ObjectConfigRecord` entry.
          */
         this.options = input(undefined);
         /**
-         * The object flavor to be applied to the tiles.
+         * Object flavor to overlay on matching tiles.
+         *
+         * An `ObjectFlavor` defines an alternative visual representation for objects that carry
+         * a specific SOT. When set, tiles whose `DmsObject.sots` array includes
+         * `flavor.sot` are rendered using the config entry identified by `flavor.id` instead
+         * of their own object-type config.
+         *
+         * Changes are applied reactively via `#flavorEffect` and re-evaluated against the
+         * last raw result set via `applyFlavor()`.
          */
         this.flavor = input();
         /**
-         * The search query to be executed. This may be a SearchQuery object or a CMIS query statement.
-         * Ensure that the query includes the object type ID field to allow proper tile rendering.
+         * The search query to execute.
+         *
+         * Accepts a structured `SearchQuery` object or a raw CMIS query string. The query is
+         * re-executed reactively every time this input changes. The result set must include the
+         * `system:objectTypeId` field — tiles without a resolved object type will throw at
+         * mapping time.
          */
         this.query = input();
+        /**
+         * Object IDs to select as soon as the list finishes loading.
+         *
+         * If the list is still busy when this input is set, the IDs are stored internally and
+         * applied once the query completes (via `#preselectEffect`). Items whose IDs are not
+         * found in the current result set are silently ignored.
+         *
+         * For programmatic selection after the list is loaded, prefer `selectById()`.
+         *
+         * @default []
+         */
         this.preselect = input([]);
-        this.#preselect = linkedSignal(this.preselect);
+        /**
+         * Per-item CSS style overrides rendered as inline styles on matching tiles.
+         *
+         * Each `TileListHighlight` entry specifies an array of object IDs and a
+         * `cssStyles` record. All styles for the same ID are merged, with later entries in
+         * the array taking precedence. Used to visually call out specific items (e.g. newly
+         * created, recently modified, flagged).
+         *
+         * @default []
+         */
         this.highlights = input([]);
-        this.highlightStyles = computed(() => {
-            const x = {};
-            (this.highlights() || []).forEach((highlight) => {
-                highlight.ids.forEach((id) => {
-                    if (!x[id])
-                        x[id] = {};
-                    x[id] = { ...x[id], ...highlight.cssStyles };
-                });
-            });
-            return x;
-        });
         /**
-         * Prevent selection changes while the provided function returns false.
+         * Guard function that temporarily blocks all selection changes.
+         *
+         * Forwarded to the inner `ListComponent`. As long as the returned predicate evaluates
+         * to `true`, any attempt to change the selection is silently ignored. Useful when the
+         * parent has unsaved changes tied to the current selection.
+         *
+         * @default () => false  (never prevents)
          */
         this.preventChangeUntil = input(() => false);
         /**
-         * If `true`, the list will select an item automatically on initialization.
-         * First, list will search for an item item that has the "selected"-attribute
-         * and is not disabled. If no such item exists, the first item will be selected.
+         * Automatically selects an item when the list is first rendered.
+         *
+         * Follows the same priority as `ListComponent.autoSelect`: first non-disabled item
+         * with the `selected` attribute, then index 0. Accepts any truthy string so it can
+         * be set as a plain HTML attribute: `<yuv-tile-list autoSelect>`.
+         *
+         * @default false
+         */
+        this.autoSelect = input(false, {
+            transform: (value) => coerceBooleanProperty(value)
+        });
+        /**
+         * Suppresses the component's built-in context menu handling.
+         *
+         * When `true`, right-clicking a tile does not call `event.preventDefault()`, does not
+         * auto-select the right-clicked tile, and does not emit `ctxMenu`. Use this when the
+         * parent wants to handle `contextmenu` events itself.
+         *
          * @default false
          */
-        this.autoSelect = input(false, { transform: (value) => coerceBooleanProperty(value) });
         this.disableCustomContextMenu = input(false);
         /**
-         * Emitted when a list item has been selected
+         * Emits the `TileData` of the most recently selected tile.
+         *
+         * In single-select mode this fires for every selection change. In multi-select mode
+         * it fires only when exactly one tile ends up selected (i.e. a plain click with no
+         * modifier keys). For the full multi-selection result, listen to `selectionChange`.
          */
         this.itemSelect = output();
+        /**
+         * Emits the currently selected tiles when the user presses **Ctrl+C**.
+         *
+         * The parent is responsible for handling the actual copy operation (e.g. writing to
+         * the clipboard or storing the objects for a subsequent paste action). The default
+         * browser copy behavior is suppressed.
+         */
         this.tileCopy = output();
+        /**
+         * Emits the currently selected tiles when the user presses **Ctrl+X**.
+         *
+         * The parent is responsible for handling the cut operation. The default browser cut
+         * behavior is suppressed. Typically used together with `dropItems()` on a target list
+         * to implement a move-via-clipboard interaction.
+         */
         this.tileCut = output();
+        /**
+         * Mirrors the inner `QueryListComponent.busy` signal as an output event.
+         *
+         * Emits `true` when a query request starts and `false` when it completes (or errors).
+         * Useful when the parent needs to react to loading state changes without holding a
+         * `@ViewChild` reference to this component.
+         */
         this.busy = output();
+        /**
+         * Emits once per query execution when the search result arrives.
+         *
+         * Provides the server-side total item count and the raw `SearchResultItem[]` for the
+         * current page. Forwarded directly from the inner `QueryListComponent`.
+         */
         this.queryResult = output();
         /**
-         * Emitted when selected items changed. If 'multiselect' input is set to true, this will
-         * emit the whole selection, while 'itemSelect' will only emit the item that currently
-         * has bee added to the selection.
+         * Emits the full current selection as `TileData[]` on every selection change.
+         *
+         * Unlike `itemSelect` — which emits a single tile — this output always reflects the
+         * complete selection. In single-select mode the array contains at most one element.
+         * Emits an empty array when the selection is cleared.
          */
         this.selectionChange = output();
         /**
-         * Emitted when a list item has been double-clicked
+         * Emits the `TileData` of a tile when it is double-clicked.
+         *
+         * The primary single-click selection is handled separately via `itemSelect`. Use this
+         * output to trigger a secondary action such as opening a detail view or navigating
+         * to a route.
          */
         this.itemDblClick = output();
+        /**
+         * Emits when the user right-clicks a tile and `disableCustomContextMenu` is `false`.
+         *
+         * Provides the originating mouse event (for positioning a custom menu overlay) and
+         * the current selection as an array of object IDs. The right-clicked tile is
+         * auto-selected before the event fires if it was not already part of the selection.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.ctxMenu = output();
-        // the items rendered in the list
+        //#endregion
+        //#region Properties
+        /**
+         * The `MatMenu` instance resolved from the projected `TileActionsMenuComponent`.
+         *
+         * `null` when no `TileActionsMenuComponent` is projected. Used in the template to
+         * conditionally bind `[matMenuTriggerFor]` on tile action buttons.
+         */
+        this.menu = computed(() => {
+            const comp = this.menuComponent();
+            return comp?.matMenu() ?? null;
+        });
+        /**
+         * The full `TileData` objects for all currently selected tiles.
+         *
+         * Updated on every selection change alongside `selection`. Prefer this signal when
+         * the parent needs rich tile data (fields, DMS object reference, actions) rather than
+         * just IDs.
+         */
+        this.selectedTile = signal([]);
+        /**
+         * Object IDs of the currently selected tiles.
+         *
+         * A flat `string[]` signal — convenient for ID comparisons, permission checks, or
+         * passing to services that work with IDs. For the full tile data, use `selectedTile`.
+         */
+        this.selection = signal([]);
+        this.#busy = computed(() => this.list().busy());
+        this.#preselect = linkedSignal(this.preselect);
+        /**
+         * Computed map of per-object-ID inline CSS styles derived from the `highlights` input.
+         *
+         * Merges all `TileListHighlight` entries that reference the same ID so the template
+         * only needs a single lookup: `highlightStyles()[item.id]`. Returns an empty object
+         * for IDs with no highlight rules.
+         */
+        this.highlightStyles = computed(() => {
+            const x = {};
+            (this.highlights() || []).forEach((highlight) => {
+                highlight.ids.forEach((id) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    if (!x[id])
+                        x[id] = {};
+                    x[id] = { ...x[id], ...highlight.cssStyles };
+                });
+            });
+            return x;
+        });
+        /**
+         * The `TileData` view models currently rendered in the list.
+         *
+         * Populated by `onQueryResult()` after each successful search response and also
+         * prepended by `dropItems()`. The template iterates over this signal directly.
+         * Read this from the parent to access displayed tile data without an extra query.
+         */
         this.items = signal([]);
+        /**
+         * Indicates whether at least one search has been executed successfully.
+         *
+         * Remains `false` until the first `onQueryResult()` call. Use this in the template
+         * to distinguish between "initial loading" (show a spinner) and "empty result"
+         * (show the empty-state slot) without relying on `items().length` alone.
+         */
         this.searchExecuted = signal(false);
+        this._selection = [];
+        //#endregion
+        //#region Public methods
+        /**
+         * Transformer function passed to the inner `QueryListComponent`.
+         *
+         * Maps raw `SearchResultItem[]` to the `InnerTileData` view model by:
+         * 1. Storing the raw items in `#rawResultItems` so `applyFlavor()` can re-map them
+         *    without a new server request.
+         * 2. Calling `#mapToTileData()` to resolve `ObjectConfig` fields (title, icon, …).
+         * 3. Resolving each tile's action IDs to full `Action` objects via `ActionsService`,
+         *    filtering out any IDs that are not registered.
+         *
+         * Re-runs automatically whenever the query result or the `ObjectConfigRecord` changes
+         * (the latter is triggered by calling `list().runTransformerAgain()` from
+         * `#getObjectConfig()`).
+         */
+        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((action) => this.#actionService.getActionById(action.id, this.options()?.actionContext))
+                    .filter((action) => action !== undefined)
+            }));
+            // untracked(() => this.items.set(items));
+            return items;
+        };
+        //#endregion
         // #region Effect Methods
         this.#flavorEffect = () => {
-            const f = this.flavor();
-            if (f)
-                this.applyFlavor(f);
+            const flavor = this.flavor();
+            if (flavor)
+                this.applyFlavor(flavor);
         };
         this.#preselectEffect = () => {
             const preselect = this.#preselect();
@@ -309,12 +581,152 @@ class TileListComponent {
         effect(this.#preselectEffect);
         effect(this.#closeMenuEffect);
     }
+    //#region Lifecycle hooks
+    ngOnInit() {
+        this.#getObjectConfig();
+    }
+    //#endregion
+    //#region UI Methods
+    /**
+     * Host **Ctrl+C** handler — emits the current selection via `tileCopy`.
+     *
+     * Suppresses the default browser copy behavior. Fires only when at least one tile
+     * is selected. Bound via the `host` metadata as `(keydown.control.c)`.
+     *
+     * @param event The keyboard event (used to call `preventDefault`).
+     */
+    onCopy(event) {
+        event.preventDefault();
+        if (this._selection.length)
+            this.tileCopy.emit(this._selectionToTileData(this._selection));
+    }
+    /**
+     * Host **Ctrl+X** handler — emits the current selection via `tileCut`.
+     *
+     * Suppresses the default browser cut behavior. Fires only when at least one tile
+     * is selected. Bound via the `host` metadata as `(keydown.control.x)`.
+     *
+     * @param event The keyboard event (used to call `preventDefault`).
+     */
+    onCut(event) {
+        event.preventDefault();
+        if (this._selection.length)
+            this.tileCut.emit(this._selectionToTileData(this._selection));
+    }
+    /**
+     * Handles a double-click event forwarded from the inner `QueryListComponent`.
+     *
+     * If the double-clicked tile is not already the sole selected item, it is selected
+     * first (without modifier keys) so that `itemDblClick` always fires in the context
+     * of a known selection state. Then `itemDblClick` is emitted with the tile's data.
+     *
+     * Called from the template via `(itemDoubleClick)`. Not intended for external callers.
+     *
+     * @param index Zero-based index of the double-clicked tile in the current `items` array.
+     */
     onItemDoubleClick(index) {
         const selectionIsEqual = this._selection.length === 1 && this._selection[0] === index;
         if (!selectionIsEqual)
             this.#internalSelectByIndex(index);
         this.itemDblClick.emit(this.items()[index]);
     }
+    /**
+     * Handles the query result emitted by the inner `QueryListComponent`.
+     *
+     * Marks the component as having executed at least one search (`searchExecuted`),
+     * updates the `items` signal with the freshly mapped `TileData` view models, and
+     * re-emits the raw result via `queryResult` so the parent can update counters or
+     * analytics without a separate query.
+     *
+     * Called from the template via `(queryResult)`. Not intended for external callers.
+     *
+     * @param result The search result object containing `totalCount` and `items`.
+     */
+    onQueryResult(result) {
+        this.searchExecuted.set(true);
+        const newItems = this.#mapToTileData(result.items.map((i) => new DmsObject(i)));
+        // Preserve drop-in items at the top so that `items` indices stay in sync with
+        // the rendered `resultItems` from QueryListComponent (which prepends drop-ins).
+        const dropInCount = this.list().dropInSize();
+        const currentItems = this.items();
+        const dropInItems = currentItems.slice(0, dropInCount);
+        let merged;
+        if (dropInItems.length > 0) {
+            const dropInIds = new Set(dropInItems.map((item) => item.id));
+            const filtered = newItems.filter((item) => !dropInIds.has(item.id));
+            merged = [...dropInItems, ...filtered];
+        }
+        else {
+            merged = newItems;
+        }
+        // If any selected items are absent from the new result set (e.g. after deletion),
+        // clear the internal selection indices. Without this, #isSelectionEqual would return
+        // true when the inner list auto-selects the same index (now pointing to a different
+        // item), causing selectionChange to be silently skipped and the right panel to stay
+        // stale with the deleted item's content.
+        if (this._selection.length > 0) {
+            const mergedIds = new Set(merged.map((i) => i.id));
+            const selectionOutdated = this._selection.some((idx) => !mergedIds.has(this.items()[idx]?.id));
+            if (selectionOutdated) {
+                this._selection = [];
+                this._lastSelection = undefined;
+            }
+        }
+        this.items.set(merged);
+        this.queryResult.emit(result);
+    }
+    /**
+     * Handles the committed selection emitted by the inner list.
+     *
+     * For a single-item selection the full `#select()` path is taken so that `itemSelect`
+     * is also emitted. For multi-item selections only `#updateSelectionState()` runs to
+     * keep `selectionChange` and the internal state in sync without the single-item emit.
+     *
+     * Called from the template via `(itemSelect)` on `yuv-query-list`.
+     * Not intended for external callers.
+     *
+     * @param sel Array of zero-based indices representing the new selection.
+     */
+    onListItemsSelect(sel) {
+        if (sel.length === 1) {
+            this.#internalSelectByIndex(sel[0]);
+            return;
+        }
+        this.#updateSelectionState(sel);
+    }
+    /**
+     * Handles live drag-selection changes forwarded from the inner `QueryListComponent`.
+     *
+     * Fires continuously while the user drags across tiles, updating the selection state
+     * in real time so the visual highlight tracks the gesture. Does not emit `itemSelect`
+     * (that fires only on the final committed selection via `onListItemsSelect`).
+     *
+     * Called from the template via `(dragSelectChange)`. Not intended for external callers.
+     *
+     * @param sel Current array of zero-based indices covered by the drag gesture.
+     */
+    onDragSelectChange(sel) {
+        this.#updateSelectionState(sel);
+    }
+    /**
+     * Handles a right-click (contextmenu) event on a tile.
+     *
+     * Suppresses the browser's native context menu. If the clicked tile is not already
+     * part of the selection, it is selected first. After a short delay (to allow the
+     * selection state to propagate), `ctxMenu` is emitted with the originating event and
+     * the current selection so the parent can position and populate a custom menu.
+     *
+     * The delay is intentional: it gives Angular change detection a tick to apply the
+     * selection update before the parent reads `selection()` in the `ctxMenu` handler.
+     *
+     * No-ops when `disableCustomContextMenu` is `true`.
+     *
+     * Called from the template via `(contextmenu)` on each tile. Not intended for
+     * external callers.
+     *
+     * @param event The originating mouse event (used to suppress default and for positioning).
+     * @param index Zero-based index of the right-clicked tile.
+     */
     contextMenuHandler(event, index) {
         if (this.disableCustomContextMenu())
             return;
@@ -325,18 +737,45 @@ class TileListComponent {
         }
         setTimeout(() => {
             this.ctxMenu.emit({ event, selection: this.selection() });
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
         }, 200);
     }
-    executeAction(t, a, evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
+    /**
+     * Executes a tile inline action against the appropriate set of DMS objects.
+     *
+     * Resolves the target objects from the DMS service: if the tile whose action button
+     * was clicked is part of the current selection, the action runs against all selected
+     * objects (batch action); otherwise it runs against only that single tile's object.
+     *
+     * Suppresses the click event to prevent the tile's own selection handler from firing.
+     * Called from the template via the tile action buttons. Not intended for external callers.
+     *
+     * @param tileData The tile whose action button was clicked.
+     * @param action   The resolved `Action` to execute.
+     * @param event    The originating click event (stopped to prevent tile selection).
+     */
+    executeAction(tileData, action, event) {
+        event.preventDefault();
+        event.stopPropagation();
         const selectedIds = this.selection();
-        const ids = selectedIds.includes(t.id) ? selectedIds : [t.id];
+        const ids = selectedIds.includes(tileData.id) ? selectedIds : [tileData.id];
         this.#dmsService
             .getDmsObjects(ids)
-            .pipe(switchMap((objects) => a.run(objects)))
+            .pipe(switchMap((objects) => action.run(objects)))
             .subscribe();
     }
+    /**
+     * Selects tiles by their object IDs.
+     *
+     * Looks up each ID in the current `items` array and selects the matching indices
+     * in the inner list. If the list is still loading when this is called, the IDs are
+     * stored and applied automatically once the query completes (via `#preselectEffect`).
+     *
+     * IDs not found in the current result set are silently ignored. The first found item
+     * also receives keyboard focus via `setActiveItem()`.
+     *
+     * @param ids Array of object IDs (`system:objectId`) to select.
+     */
     selectById(ids) {
         if (this.#busy()) {
             this.#preselect.set(ids);
@@ -345,98 +784,115 @@ class TileListComponent {
             this.#executeSelectById(ids);
         }
     }
-    #executeSelectById(ids) {
-        const indices = ids.map((id) => this.items().findIndex((i) => i.id === id)).filter((i) => i !== -1);
-        this.list().multiSelect(indices);
-        if (indices.length > 0) {
-            this.list().setActiveItem(indices[0]);
-        }
-        this.#elRef.nativeElement.focus();
-        this.#updateSelectionState(indices);
-    }
+    /**
+     * Programmatically replaces the entire selection with the given indices.
+     *
+     * Only effective when `multiselect` is `true`. Delegates to the inner
+     * `QueryListComponent`. Out-of-range indices are silently discarded.
+     *
+     * @param index Array of zero-based item indices to select.
+     */
     multiSelect(index) {
         this.list().multiSelect(index);
     }
+    /**
+     * Selects the tile at the given zero-based index.
+     *
+     * Delegates to the inner `QueryListComponent`. Clamps the index to the valid range.
+     * Use `selectById()` when you have object IDs rather than positional indices.
+     *
+     * @param index Zero-based index of the tile to select.
+     */
     select(index) {
         this.list().select(index);
     }
-    #internalSelectByIndex(idx, evt) {
-        this.#select(idx, evt?.shiftKey, evt?.ctrlKey);
-    }
-    onQueryResult(e) {
-        this.searchExecuted.set(true);
-        this.items.set(this.#mapToTileData(e.items.map((i) => new DmsObject(i))));
-        this.queryResult.emit(e);
-    }
-    onListItemsSelect(sel) {
-        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`.
+     * Re-executes the current query without changing the page or query parameters.
+     *
+     * If pagination is active, re-fetches the same page. Use this to reflect server-side
+     * changes (e.g. after a create/delete operation) without navigating away.
      */
-    #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();
     }
+    /**
+     * Prepends `DmsObject` instances to the top of the tile list as temporary drop-in items.
+     *
+     * The objects are mapped through the same `ObjectConfig` resolution pipeline as regular
+     * query results, including action resolution. The existing selection is shifted so that
+     * currently selected tiles remain selected after the prepend.
+     *
+     * Use this for optimistic UI: show newly created or pasted objects immediately before
+     * the server index reflects them in the query results.
+     *
+     * Drop-in items are cleared automatically when the user navigates to a different page.
+     *
+     * @param objects `DmsObject` instances to prepend to the visible list.
+     */
     dropItems(objects) {
         const mappedItems = this.#mapToTileData(objects);
         const items = mappedItems.map((item) => ({
             ...item,
             actions: (item.actions || [])
-                .map((a) => this.#actionService.getActionById(a.id, this.options()?.actionContext))
-                .filter((a) => a !== undefined)
+                .map((objectConfigAction) => this.#actionService.getActionById(objectConfigAction.id, this.options()?.actionContext))
+                .filter((action) => action !== undefined)
         }));
         this.items.set([...items, ...this.items()]);
         this.list().dropItems(items);
     }
+    /**
+     * Toggles an `ObjectFlavor` on or off and re-maps the current result set.
+     *
+     * If the given flavor is already the active `appliedFlavor`, it is cleared (toggle
+     * off). Otherwise the flavor is applied and all tiles whose `DmsObject.sots` includes
+     * `flavor.sot` are re-rendered using the config entry for `flavor.id`.
+     *
+     * Re-mapping runs against the last raw `SearchResultItem[]` (`#rawResultItems`) so
+     * no server round-trip is needed. Called automatically by `#flavorEffect` when the
+     * `flavor` input changes.
+     *
+     * @param flavor The `ObjectFlavor` to apply or remove.
+     */
     applyFlavor(flavor) {
         this.appliedFlavor = this.appliedFlavor?.id === flavor.id ? undefined : flavor;
         if (this.#rawResultItems)
             this.items.set(this.#mapToTileData(this.#rawResultItems.map((i) => new DmsObject(i))));
     }
     /**
-     * Updates an item in the list at the specified index with the provided value.
+     * Applies per-index optimistic overrides to the displayed tile data.
      *
-     * Use this method for optimistic updates of list items. The updates be removed
-     * when the user navigates to another search result page.
+     * Delegates to the inner `QueryListComponent.updateListItems()`. Each entry patches
+     * the tile at the given `index` with a new `TileData` value. Overrides accumulate
+     * until the user navigates to a different page, at which point the fresh server
+     * response replaces all local data.
      *
-     * @param index Index of the item to update.
-     * @param value The new value for the item.
+     * For DMS-object-based updates, prefer `updateTileList()` which resolves indices
+     * from object IDs automatically.
+     *
+     * @param updates Array of `{ index, value }` pairs describing which tiles to patch.
      */
     updateListItems(updates) {
         this.list().updateListItems(updates);
     }
     /**
-     * Updates the tile list with the provided DmsObjects. Only tiles that are
-     * already present in the list will be updated. The update is based on
-     * the object ID and will be gone when the user navigates to another search
-     * result page. Use this method for optimistic updates.
-     * @param listItems The DmsObjects to update the tiles with.
+     * Optimistically updates tiles in the list that correspond to the given `DmsObject` instances.
+     *
+     * For each provided object, finds its matching tile by `id` in the current `items`
+     * array, re-maps it through `#mapToTileData()` to get a fresh `TileData` view model,
+     * and applies it via `updateListItems()`. Tiles not currently visible in the list are
+     * silently skipped.
+     *
+     * This is the preferred way to reflect server-confirmed changes (e.g. rename, metadata
+     * edit) without issuing a full query refresh. Updates are scoped to the current page
+     * and are discarded on the next page navigation.
+     *
+     * @param listItems Updated `DmsObject` instances to apply to the list.
      */
     updateTileList(listItems) {
         const updates = [];
         listItems.forEach((item) => {
             const idx = this.items().findIndex((listItem) => listItem.id === item.id);
-            if (idx >= 0 && this.oc) {
+            if (idx >= 0 && this.objectConfig) {
                 const mappedTileData = this.#mapToTileData([item]);
                 updates.push({ index: idx, value: mappedTileData[0] });
             }
@@ -444,8 +900,15 @@ class TileListComponent {
         this.updateListItems(updates);
     }
     /**
-     * Clears the current selection.
-     * @param silent If true, the selectionChange event will not be emitted.
+     * Clears the current selection and resets all internal selection state.
+     *
+     * Resets `_selection`, `_lastSelection`, the `selection` signal, and `selectedTile`
+     * to empty. Also delegates to the inner list's `clear()` to sync the visual state.
+     * If the selection is already empty, the method is a no-op.
+     *
+     * @param silent When `true`, skips emitting `selectionChange`. Use this when the
+     *               parent needs to reset state programmatically without triggering
+     *               downstream reactions.
      */
     clearSelection(silent = false) {
         if (this._selection.length) {
@@ -459,8 +922,14 @@ class TileListComponent {
         }
     }
     /**
-     * Selects the next item in the list. If the last item is already selected,
-     * it wraps around to the first item. Does nothing if no item is currently selected.
+     * Advances the selection to the next tile in the list.
+     *
+     * Moves from the last selected index forward by one. Wraps around to index 0
+     * when the last tile is currently selected. Does nothing if no tile is selected
+     * (`_lastSelection` is `undefined`).
+     *
+     * Useful for implementing keyboard-driven "next item" navigation from a parent
+     * detail panel without giving focus back to the list.
      */
     selectNext() {
         if (this._lastSelection !== undefined) {
@@ -471,8 +940,14 @@ class TileListComponent {
         }
     }
     /**
-     * Selects the previous item in the list. If the first item is already selected,
-     * it wraps around to the last item. Does nothing if no item is currently selected.
+     * Moves the selection to the previous tile in the list.
+     *
+     * Moves from the last selected index backward by one. Wraps around to the last tile
+     * when index 0 is currently selected. Does nothing if no tile is selected
+     * (`_lastSelection` is `undefined`).
+     *
+     * Useful for implementing keyboard-driven "previous item" navigation from a parent
+     * detail panel without giving focus back to the list.
      */
     selectPrev() {
         if (this._lastSelection !== undefined) {
@@ -482,14 +957,69 @@ class TileListComponent {
             this.#select(i);
         }
     }
-    menuItemClicked(t, event) {
-        if (this.selection().includes(t.id)) {
+    /**
+     * Handles a click on a projected `TileActionsMenuComponent` menu item.
+     *
+     * If the tile that owns the clicked menu item is part of the current selection,
+     * the click event is stopped from propagating so the tile's own `(click)` handler
+     * does not deselect other tiles. If the tile is not selected, the event is allowed
+     * to propagate normally so the tile gets selected as a side effect.
+     *
+     * Called from the template via the `TileActionsMenuComponent` item click binding.
+     * Not intended for external callers.
+     *
+     * @param tileData The tile that owns the clicked menu item.
+     * @param event    The originating click event.
+     */
+    menuItemClicked(tileData, event) {
+        if (this.selection().includes(tileData.id)) {
             // only prevent event propagation if the click came from an element that
             // is part of the current selection
             event.stopPropagation();
             event.preventDefault();
         }
     }
+    //#endregion
+    //#region Utilities
+    #getObjectConfig() {
+        this.#objectConfigService
+            .getObjectConfigs$(this.bucket() || '', true)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe({
+            next: (res) => {
+                this.objectConfig = res;
+                this.list().runTransformerAgain();
+            }
+        });
+    }
+    #internalSelectByIndex(idx, evt) {
+        this.#select(idx, evt?.shiftKey, evt?.ctrlKey);
+    }
+    #executeSelectById(ids) {
+        const indices = ids.map((id) => this.items().findIndex((i) => i.id === id)).filter((i) => i !== -1);
+        this.list().multiSelect(indices);
+        if (indices.length > 0) {
+            this.list().setActiveItem(indices[0]);
+        }
+        this.#elRef.nativeElement.focus();
+        this.#updateSelectionState(indices);
+    }
+    /**
+     * 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((tile) => tile.id));
+        this.selectionChange.emit(tiles);
+        this.selectedTile.set(tiles);
+    }
     #select(index, shiftKey = false, ctrlKey = false) {
         this.#elRef.nativeElement.focus();
         let newSelection;
@@ -532,69 +1062,76 @@ class TileListComponent {
         this._selection = newSelection;
         this._lastSelection = this._selection.length === 0 ? undefined : index;
         const tiles = this._selectionToTileData(this._selection);
-        this.selection.set(tiles.map((t) => t.id));
+        this.selection.set(tiles.map((tile) => tile.id));
         this.selectionChange.emit(tiles);
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         tiles.length === 1 && this.itemSelect.emit(tiles[0]);
         this.selectedTile.set(tiles);
     }
     #isSelectionEqual(newSelection) {
         if (newSelection.length !== this._selection.length)
             return false;
-        return newSelection.every((v, i) => v === this._selection[i]);
+        return newSelection.every((value, index) => value === this._selection[index]);
     }
     _selectionToTileData(selection) {
         return selection.map((idx) => this.items()[idx]);
     }
     #mapToTileData(objects) {
         return objects.map((dmsObject) => {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             const sots = dmsObject.sots || [];
             if (!dmsObject.objectTypeId) {
-                throw new Error(`DmsObject with id '${dmsObject.id}' is missing objectTypeId. Please make sure that your query includes the object type ID field.`);
+                throw new Error(
+                // eslint-disable-next-line max-len
+                `DmsObject with id '${dmsObject.id}' is missing objectTypeId. Please make sure that your query includes the object type ID field.`);
             }
-            let oc = this.oc[dmsObject.objectTypeId];
-            // check if result oitem matches virtual config type
+            let objectConfig = this.objectConfig[dmsObject.objectTypeId];
+            // check if result item matches virtual config type
             const cfgTypes = this.options()?.configTypes || [];
             cfgTypes.forEach((cft) => {
                 const matchesType = !cft.objectType || cft.objectType === dmsObject.objectTypeId;
-                const matchesSOTs = !cft.sots || !cft.sots.length || cft.sots.every((sot) => sots.includes(sot));
+                const matchesSOTs = !cft.sots?.length || cft.sots.every((sot) => sots.includes(sot));
                 if (matchesType && matchesSOTs) {
-                    oc = this.oc[cft.id];
+                    objectConfig = this.objectConfig[cft.id];
                 }
             });
             // only apply a flavor if the object has that SOT
-            const ownAppliedFlavor = this.appliedFlavor && sots.includes(this.appliedFlavor.sot) && this.oc[this.appliedFlavor.sot];
+            const ownAppliedFlavor = this.appliedFlavor && sots.includes(this.appliedFlavor.sot) && this.objectConfig[this.appliedFlavor.sot];
             if (ownAppliedFlavor) {
-                oc = this.oc[this.appliedFlavor.id];
+                objectConfig = this.objectConfig[this.appliedFlavor.id];
             }
-            if (!oc)
-                oc = this.#objectConfigService.getDefaultConfig(dmsObject.objectTypeId);
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (!objectConfig)
+                objectConfig = this.#objectConfigService.getDefaultConfig(dmsObject.objectTypeId);
             const tli = {
                 objectTypeId: dmsObject.objectTypeId,
                 id: dmsObject.id,
-                actions: oc.actions,
-                badges: oc.badges,
+                actions: objectConfig.actions,
+                badges: objectConfig.badges,
                 instanceData: dmsObject.data,
                 dmsObject,
-                title: oc.title ? this.#getResolvedObjectConfigItem(oc.title.propertyName, dmsObject.data) : { propertyName: '', value: '' }
+                title: objectConfig.title
+                    ? this.#getResolvedObjectConfigItem(objectConfig.title.propertyName, dmsObject.data)
+                    : { propertyName: '', value: '' }
             };
-            tli.icon = oc.icon
+            tli.icon = objectConfig.icon
                 ? {
                     rendererType: 'icon',
                     propertyName: 'custom',
-                    value: oc.icon.svg,
-                    meta: { isFontIcon: YmtMatIconRegistryService.isFontIcon(oc.icon.svg), objectTypeId: '' }
+                    value: objectConfig.icon.svg,
+                    meta: { isFontIcon: YmtMatIconRegistryService.isFontIcon(objectConfig.icon.svg), objectTypeId: '' }
                 }
                 : {
                     rendererType: 'icon',
                     propertyName: BaseObjectTypeField.OBJECT_TYPE_ID,
                     value: ownAppliedFlavor && this.appliedFlavor ? this.appliedFlavor.sot : dmsObject.objectTypeId
                 };
-            if (oc.description)
-                tli.description = this.#getResolvedObjectConfigItem(oc.description.propertyName, dmsObject.data);
-            if (oc.meta)
-                tli.meta = this.#getResolvedObjectConfigItem(oc.meta.propertyName, dmsObject.data);
-            if (oc.aside)
-                tli.aside = this.#getResolvedObjectConfigItem(oc.aside.propertyName, dmsObject.data);
+            if (objectConfig.description)
+                tli.description = this.#getResolvedObjectConfigItem(objectConfig.description.propertyName, dmsObject.data);
+            if (objectConfig.meta)
+                tli.meta = this.#getResolvedObjectConfigItem(objectConfig.meta.propertyName, dmsObject.data);
+            if (objectConfig.aside)
+                tli.aside = this.#getResolvedObjectConfigItem(objectConfig.aside.propertyName, dmsObject.data);
             return tli;
         });
     }
@@ -618,23 +1155,13 @@ class TileListComponent {
         }
         return item;
     }
-    ngOnInit() {
-        this.#objectConfigService
-            .getObjectConfigs$(this.bucket() || '', true)
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe({
-            next: (res) => {
-                this.oc = res;
-                this.list().runTransformerAgain();
-            }
-        });
-    }
+    //#endregion
     // #region Effect Methods
     #flavorEffect;
     #preselectEffect;
     #closeMenuEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile [class.dense]=\"dense()\" (contextmenu)=\"contextMenuHandler($event, index)\">\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\n            ymt-icon-button\n            [icon-button-size]=\"'small'\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\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      @let searchExe = searchExecuted();\n      @if (searchExe && 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.20", 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  idProperty=\"id\"\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  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile [class.dense]=\"dense()\" [style]=\"highlightStyles()[item.id]\" (contextmenu)=\"contextMenuHandler($event, index)\">\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\" /></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\" /></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\" /></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\" /></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\" /></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button\n            ymt-icon-button\n            [matTooltip]=\"a.label\"\n            icon-button-size=\"small\"\n            (click)=\"executeAction(item, a, $event)\"\n          >\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button\n            ymt-icon-button\n            icon-button-size=\"small\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\" />\n      </ng-template>\n      <ng-template #extensionSlot>\n        <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\" />\n      </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=\"empty-list\">\n      @let searchExe = searchExecuted();\n      @if (searchExe && emptyContent()) {\n        <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 .empty-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", "includePermissions"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileListComponent, decorators: [{
             type: Component,
@@ -648,11 +1175,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         TileExtensionDirective,
                         YmtIconButtonDirective,
                         ...MATERIAL_IMPORTS
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.dense]': 'dense()',
                         '(keydown.control.c)': 'onCopy($event)',
                         '(keydown.control.x)': 'onCut($event)'
-                    }, 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  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile [class.dense]=\"dense()\" (contextmenu)=\"contextMenuHandler($event, index)\">\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\n            ymt-icon-button\n            [icon-button-size]=\"'small'\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\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      @let searchExe = searchExecuted();\n      @if (searchExe && 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  idProperty=\"id\"\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  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile [class.dense]=\"dense()\" [style]=\"highlightStyles()[item.id]\" (contextmenu)=\"contextMenuHandler($event, index)\">\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\" /></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\" /></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\" /></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\" /></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\" /></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button\n            ymt-icon-button\n            [matTooltip]=\"a.label\"\n            icon-button-size=\"small\"\n            (click)=\"executeAction(item, a, $event)\"\n          >\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button\n            ymt-icon-button\n            icon-button-size=\"small\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\" />\n      </ng-template>\n      <ng-template #extensionSlot>\n        <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\" />\n      </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=\"empty-list\">\n      @let searchExe = searchExecuted();\n      @if (searchExe && emptyContent()) {\n        <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 .empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class ActionSelectComponent {