TileListComponent

component

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:

Example :

<yuv-tile-list [query]="query" (itemSelect)="onSelect($event)" />

Multi-select with custom bucket and highlights:

Example :

<yuv-tile-list

bucket="my-feature"

[query]="query"

[multiselect]="true"

[highlights]="highlights"

(selectionChange)="onSelectionChange($event)"

/>

With context menu:

Example :

<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>

Component Metadata

Selector: yuv-tile-list

Standalone: Yes

Implements: OnInit

Inputs

autoSelect

Type: boolean, BooleanInput

Default Value: false, \{ transform: (value: BooleanInput) => coerceBooleanProperty(value) \}

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>.

bucket

Type: string

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.

dense

Type: boolean

Default Value: false

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.

disableCustomContextMenu

Type: boolean

Default Value: false

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.

flavor

Type: ObjectFlavor

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().

highlights

Type: TileListHighlight[] | null

Default Value: []

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).

multiselect

Type: boolean

Default Value: false

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.

options

Type: TileListConfigOptions | undefined

Default Value: undefined

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.

pageSize

Type: number

Default Value: SearchService.DEFAULT_QUERY_SIZE

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.

preselect

Type: string[]

Default Value: []

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().

preventChangeUntil

Type: () => boolean

Default Value: () => 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.

query

Type: SearchQuery | string | null

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.

Outputs

busy

Type: boolean

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.

ctxMenu

Type: \{ event: MouseEvent | PointerEvent; selection: any \}

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.

itemDblClick

Type: TileData

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.

itemSelect

Type: TileData

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.

queryResult

Type: \{ totalCount: number; items: SearchResultItem[] \}

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.

selectionChange

Type: TileData[]

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.

tileCopy

Type: TileData[]

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.

tileCut

Type: TileData[]

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.

Properties

appliedFlavor

Type: ObjectFlavor

The ObjectFlavor currently applied to matching tiles, or undefined if none.Toggled by applyFlavor(): calling it with the same flavor a second time clears it (acts as a toggle). Persisted across query refreshes until explicitly changed.

emptyContent

Type: unknown

Default Value: contentChild<ElementRef>('empty')

Optional projected element shown when the query returns an empty result set.Reference the element with the #empty template variable:Example :

<yuv-tile-list ...>  <div #empty>No items found.</div></yuv-tile-list>

highlightStyles

Type: unknown

Default Value: computed<Record<string, Record<string, unknown>>>(() => { const x: Record<string, Record<string, unknown>> = {}; (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; })

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.

items

Type: unknown

Default Value: signal<TileData[]>([])

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.

list

Type: unknown

Default Value: viewChild.required<QueryListComponent<TileData>>('list')

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.

Type: unknown

Default Value: computed(() => { const comp = this.menuComponent(); return comp?.matMenu() ?? null; })

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.

menuComponent

Type: unknown

Default Value: contentChild(TileActionsMenuComponent)

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:Example :

<yuv-tile-list ...>  <yuv-tile-actions-menu>    <button mat-menu-item>Open</button>  </yuv-tile-actions-menu></yuv-tile-list>

menuTriggers

Type: unknown

Default Value: viewChildren(MatMenuTrigger)

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.

searchExecuted

Type: unknown

Default Value: signal(false)

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.

selectedTile

Type: unknown

Default Value: signal<TileData[]>([])

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.

selection

Type: unknown

Default Value: signal<string[]>([])

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.

transformer

Type: unknown

Default Value: () => {...}

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()).

Methods

applyFlavor

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.

applyFlavor(flavor: ObjectFlavor): void

Arguments

Name	Type	Description
flavor	`ObjectFlavor`

clearSelection

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.Example :

parent needs to reset state programmatically without triggering          downstream reactions.

clearSelection(silent: unknown): void

Arguments

Name	Type	Description
silent	`unknown`

contextMenuHandler

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.

contextMenuHandler(event: MouseEvent, index: number): void

Arguments

Name	Type	Description
event	`MouseEvent`
index	`number`

dropItems

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.

dropItems(objects: DmsObject[]): void

Arguments

Name	Type	Description
objects	`DmsObject[]`

executeAction

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.

executeAction(tileData: InnerTileData, action: Action, event: Event): void

Arguments

Name	Type	Description
tileData	`InnerTileData`
action	`Action`
event	`Event`

menuItemClicked

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.

menuItemClicked(tileData: TileData, event: Event): void

Arguments

Name	Type	Description
tileData	`TileData`
event	`Event`

multiSelect

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.

multiSelect(index: number[]): void

Arguments

Name	Type	Description
index	`number[]`

onCopy

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).

onCopy(event: Event): void

Arguments

Name	Type	Description
event	`Event`

onCut

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).

onCut(event: Event): void

Arguments

Name	Type	Description
event	`Event`

onDragSelectChange

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.

onDragSelectChange(sel: number[]): void

Arguments

Name	Type	Description
sel	`number[]`

onItemDoubleClick

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.

onItemDoubleClick(index: number): void

Arguments

Name	Type	Description
index	`number`

onListItemsSelect

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.

onListItemsSelect(sel: number[]): void

Arguments

Name	Type	Description
sel	`number[]`

onQueryResult

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.

onQueryResult(result: literal type): void

Arguments

Name	Type	Description
result	`literal type`

refresh

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.

refresh(): void

select

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.

select(index: number): void

Arguments

Name	Type	Description
index	`number`

selectById

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().

selectById(ids: string[]): void

Arguments

Name	Type	Description
ids	`string[]`

selectNext

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(): void

selectPrev

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(): void

updateListItems

Applies per-index optimistic overrides to the displayed tile data.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.For DMS-object-based updates, prefer updateTileList() which resolves indices from object IDs automatically.

updateListItems(updates: literal type[]): void

Arguments

Name	Type	Description
updates	`literal type[]`

updateTileList

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.

updateTileList(listItems: DmsObject[]): void

Arguments

Name	Type	Description
listItems	`DmsObject[]`