@yuuvis/client-framework 3.20.1 → 3.22.0

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

@@ -363,12 +363,22 @@ class TileListComponent {
          * 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.
+         * select the right-clicked tile (see `selectOnContextMenu`), and does not emit `ctxMenu`.
+         * Use this when the parent wants to handle `contextmenu` events itself.
          *
          * @default false
          */
         this.disableCustomContextMenu = input(false, ...(ngDevMode ? [{ debugName: "disableCustomContextMenu" }] : /* istanbul ignore next */ []));
+        /**
+         * Selects the right-clicked tile, so a context menu the parent builds from `selection()`
+         * describes the row under the cursor. Off by default, so a menu meant to act on the existing
+         * selection keeps it. A tile already part of the selection never changes it, and selecting
+         * this way emits `selectionChange` but not `itemSelect` (which consumers open/navigate on).
+         * Ignored when `disableCustomContextMenu` is `true`. Accepts a bare HTML attribute.
+         *
+         * @default false
+         */
+        this.selectOnContextMenu = input(false, { ...(ngDevMode ? { debugName: "selectOnContextMenu" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
         /**
          * Emits the `TileData` of the most recently selected tile.
          *
@@ -731,13 +741,16 @@ class TileListComponent {
     onDragSelectChange(sel) {
         this.#updateSelectionState(sel);
     }
+    badgeIdsFor(item) {
+        return item.badges?.map((badge) => badge.id);
+    }
     /**
      * 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.
+     * Suppresses the browser's native context menu. With `selectOnContextMenu` enabled, a tile
+     * outside the current selection becomes the selection 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.
@@ -748,19 +761,20 @@ class TileListComponent {
      * 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.
+     * @param index Zero-based index of the right-clicked tile.
      */
-    badgeIdsFor(item) {
-        return item.badges?.map((badge) => badge.id);
-    }
     contextMenuHandler(event, index) {
         if (this.disableCustomContextMenu())
             return;
         event.preventDefault();
-        // if not yet selected, select
-        // if (this._selection.length === 0 || !this._selection.includes(index)) {
-        //   this.#internalSelectByIndex(index, event);
-        // }
+        // Replaces the selection (no modifier handling — a right-click never extends or toggles), and
+        // goes through the `selectById()` path so the inner list stays in sync and `itemSelect`, which
+        // consumers open or navigate on, is not emitted.
+        if (this.selectOnContextMenu() && !this._selection.includes(index)) {
+            const id = this.items()[index]?.id;
+            if (id)
+                this.#executeSelectById([id]);
+        }
         setTimeout(() => {
             this.ctxMenu.emit({ event, selection: this.selection() });
             // eslint-disable-next-line @typescript-eslint/no-magic-numbers
@@ -1310,7 +1324,7 @@ class TileListComponent {
     #closeMenuEffect;
     #outsideClickCloseEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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            [disabled]=\"a.disabled\"\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, flavorTypeId: item.flavorTypeId, data: item.instanceData }\" />\n      </ng-template>\n      <ng-template #badgesSlot>\n        <yuv-tile-badges [dmsObject]=\"item.dmsObject\" [badgeIds]=\"badgeIdsFor(item)\" [bucket]=\"bucket()\" />\n      </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: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i1.ListTileComponent, selector: "yuv-list-tile" }, { kind: "ngmodule", type: YuvQueryListModule }, { kind: "component", type: i2.QueryListComponent, selector: "yuv-query-list", inputs: ["query", "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: "component", type: TileBadgesComponent, selector: "yuv-tile-badges", inputs: ["dmsObject", "badgeIds", "bucket"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, selectOnContextMenu: { classPropertyName: "selectOnContextMenu", publicName: "selectOnContextMenu", 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            [disabled]=\"a.disabled\"\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, flavorTypeId: item.flavorTypeId, data: item.instanceData }\" />\n      </ng-template>\n      <ng-template #badgesSlot>\n        <yuv-tile-badges [dmsObject]=\"item.dmsObject\" [badgeIds]=\"badgeIdsFor(item)\" [bucket]=\"bucket()\" />\n      </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: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i1.ListTileComponent, selector: "yuv-list-tile" }, { kind: "ngmodule", type: YuvQueryListModule }, { kind: "component", type: i2.QueryListComponent, selector: "yuv-query-list", inputs: ["query", "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: "component", type: TileBadgesComponent, selector: "yuv-tile-badges", inputs: ["dmsObject", "badgeIds", "bucket"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileListComponent, decorators: [{
             type: Component,
@@ -1330,7 +1344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         '(keydown.control.c)': 'onCopy($event)',
                         '(keydown.control.x)': 'onCut($event)'
                     }, 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            [disabled]=\"a.disabled\"\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, flavorTypeId: item.flavorTypeId, data: item.instanceData }\" />\n      </ng-template>\n      <ng-template #badgesSlot>\n        <yuv-tile-badges [dmsObject]=\"item.dmsObject\" [badgeIds]=\"badgeIdsFor(item)\" [bucket]=\"bucket()\" />\n      </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: () => [], propDecorators: { menuComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TileActionsMenuComponent), { isSignal: true }] }], emptyContent: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], menuTriggers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], flavor: [{ type: i0.Input, args: [{ isSignal: true, alias: "flavor", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], preselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselect", required: false }] }], highlights: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlights", required: false }] }], preventChangeUntil: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventChangeUntil", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], disableCustomContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCustomContextMenu", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], tileCopy: [{ type: i0.Output, args: ["tileCopy"] }], tileCut: [{ type: i0.Output, args: ["tileCut"] }], busy: [{ type: i0.Output, args: ["busy"] }], queryResult: [{ type: i0.Output, args: ["queryResult"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], itemDblClick: [{ type: i0.Output, args: ["itemDblClick"] }], ctxMenu: [{ type: i0.Output, args: ["ctxMenu"] }] } });
+        }], ctorParameters: () => [], propDecorators: { menuComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TileActionsMenuComponent), { isSignal: true }] }], emptyContent: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], menuTriggers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], flavor: [{ type: i0.Input, args: [{ isSignal: true, alias: "flavor", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], preselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselect", required: false }] }], highlights: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlights", required: false }] }], preventChangeUntil: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventChangeUntil", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], disableCustomContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCustomContextMenu", required: false }] }], selectOnContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnContextMenu", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], tileCopy: [{ type: i0.Output, args: ["tileCopy"] }], tileCut: [{ type: i0.Output, args: ["tileCut"] }], busy: [{ type: i0.Output, args: ["busy"] }], queryResult: [{ type: i0.Output, args: ["queryResult"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], itemDblClick: [{ type: i0.Output, args: ["itemDblClick"] }], ctxMenu: [{ type: i0.Output, args: ["ctxMenu"] }] } });
 
 class ActionSelectComponent {
     constructor() {
@@ -1555,7 +1569,7 @@ class TileConfigTileComponent {
             : element.classList.remove('active'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\" />\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  [class.title-missing]=\"!oc?.title?.propertyName\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    @for (badge of badges(); track badge.id) {\n      <yuv-badge-chip [badge]=\"badge\" />\n    }\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=title].title-missing{border:1px solid var(--ymt-danger)}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: BadgeChipComponent, selector: "yuv-badge-chip", inputs: ["badge", "showLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\" />\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  [class.title-missing]=\"!oc?.title?.propertyName\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    @for (badge of badges(); track badge.id) {\n      <yuv-badge-chip [badge]=\"badge\" />\n    }\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=title].title-missing{border:1px solid var(--ymt-danger)}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: BadgeChipComponent, selector: "yuv-badge-chip", inputs: ["badge", "showLabel", "dmsObject"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigTileComponent, decorators: [{
             type: Component,