@yuuvis/client-framework 3.8.2 → 3.9.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, ChangeDetectionStrategy, Component, forwardRef, Injectable, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, ChangeDetectorRef, contentChild, viewChildren, computed, signal, linkedSignal, untracked } from '@angular/core';
+import { input, output, viewChild, ChangeDetectionStrategy, Component, forwardRef, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, ChangeDetectorRef, contentChild, viewChildren, computed, signal, linkedSignal, untracked, Injectable } from '@angular/core';
 import * as i3 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
@@ -20,6 +20,7 @@ import { YuvQueryListModule } from '@yuuvis/client-framework/query-list';
 import { RendererDirective } from '@yuuvis/client-framework/renderer';
 import { YmtMatIconRegistryService, YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
 import { switchMap, forkJoin, take } from 'rxjs';
+import { ShellService } from '@yuuvis/client-shell-core';
 import { NgClass } from '@angular/common';
 import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -57,61 +58,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'yuv-tile-actions-menu', imports: [MatMenu, MatIcon, MatMenuItem, MatMenuTrigger, MatTooltip, forwardRef(() => TileActionsMenuComponent)], providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-menu #menuRef>\n  <!-- @if (loading() && !actions().length) {\n        <div class=\"loading-indicator\">\n          <mat-spinner diameter=\"24\"></mat-spinner>\n        </div>\n      } -->\n  @for (action of actions(); track action.id) {\n    @if (action.children?.length) {\n      <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n        <button\n          mat-menu-item\n          [disabled]=\"!!action.disabled\"\n          [attr.disabled]=\"!!action.disabled\"\n          [matMenuTriggerFor]=\"subMenu.matMenu()\"\n        >\n          @if (action.icon) {\n            <mat-icon>{{ action.icon }}</mat-icon>\n          }\n          <span>{{ action.label }}</span>\n        </button>\n        <yuv-tile-actions-menu #subMenu [actions]=\"action.children!\" (itemSelect)=\"itemSelect.emit($event)\" />\n      </span>\n    } @else {\n      <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n        <button\n          mat-menu-item\n          [disabled]=\"!!action.disabled\"\n          [attr.disabled]=\"!!action.disabled\"\n          (click)=\"itemClicked($event, action)\"\n        >\n          @if (action.icon) {\n            <mat-icon>{{ action.icon }}</mat-icon>\n          }\n          <span>{{ action.label }}</span>\n        </button>\n      </span>\n    }\n  }\n</mat-menu>\n", styles: [":host{display:block}.loading-indicator{display:flex;justify-content:center;padding:8px 16px}button[mat-menu-item][disabled]{opacity:var(--ymt-disabled-opacity, .38);cursor:default;pointer-events:none}\n"] }]
         }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], matMenu: [{ type: i0.ViewChild, args: ['menuRef', { isSignal: true }] }] } });
 
-class TileExtensionService {
-    constructor() {
-        this._extensions = {};
-        // this.registerTileExtension({
-        //   // typeId: 'appSystemmail:email',
-        //   typeId: 'system:document',
-        //   cmp: EmailTileExtensionComponent
-        // });
-    }
-    registerTileExtension(ext) {
-        this._extensions[ext.typeId] = ext;
-    }
-    hasTileExtension(objectTypeId) {
-        return !!this._extensions[objectTypeId];
-    }
-    /**
-     * Get tile extensions for a certain type
-     * @param typeId ID of the type to fetch extesion for (objectTypeID or secondaryObjectTypeID)
-     * @returns
-     */
-    getTileExtension(typeId) {
-        return this._extensions[typeId];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
+/**
+ * Structural directive that renders the {@link TileExtension} registered for a
+ * tile's object type or applied flavor, if any. Used internally by
+ * `yuv-tile-list` via `*yuvTileExtension` on each tile, passing the tile's
+ * `objectTypeId`, applied `flavorTypeId` and `instanceData`.
+ *
+ * On each input change it resolves an extension from {@link ShellService}: the
+ * applied flavor's SOT (`flavorTypeId`) takes precedence over the object type
+ * (`typeId`). When a match exists it renders the registered component and feeds
+ * it the tile's `data`; the component is only recreated when the resolved
+ * extension changes. When nothing matches, any previously rendered extension is
+ * cleared.
+ *
+ * Register extensions through {@link ShellService.registerTileExtension}.
+ */
 class TileExtensionDirective {
     constructor() {
-        this.#tileExtensioService = inject(TileExtensionService);
+        this.#shell = inject(ShellService);
         this.#containerRef = inject(ViewContainerRef);
+        /** The tile's object type id, applied flavor SOT and instance data, see {@link TileExtensionDirectiveInput}. */
         this.yuvTileExtension = input.required(...(ngDevMode ? [{ debugName: "yuvTileExtension" }] : /* istanbul ignore next */ []));
         this.#yuvTileExtensionEffect = effect(() => {
             const tile = this.yuvTileExtension();
-            if (tile.typeId) {
-                const ext = this.#tileExtensioService.getTileExtension(tile.typeId);
-                if (ext)
-                    this._render(ext, tile.data);
-            }
+            const ext = (tile.flavorTypeId ? this.#shell.getTileExtension(tile.flavorTypeId) : undefined) ??
+                (tile.typeId ? this.#shell.getTileExtension(tile.typeId) : undefined);
+            if (ext)
+                this._render(ext, tile.data);
+            else
+                this._clear();
         }, ...(ngDevMode ? [{ debugName: "#yuvTileExtensionEffect" }] : /* istanbul ignore next */ []));
     }
-    #tileExtensioService;
+    #shell;
     #containerRef;
+    #renderedCmp;
     #yuvTileExtensionEffect;
     _render(ext, data) {
-        if (this.component)
+        // recreate only when the resolved extension component changes; otherwise just
+        // update its data input so toggling flavors doesn't needlessly rebuild it.
+        if (this.#renderedCmp !== ext.cmp) {
             this.#containerRef.clear();
-        this.component = this.#containerRef.createComponent(ext.cmp);
-        this.component.setInput('data', data);
+            this.component = this.#containerRef.createComponent(ext.cmp);
+            this.#renderedCmp = ext.cmp;
+        }
+        this.component?.setInput('data', data);
+    }
+    _clear() {
+        if (this.#renderedCmp) {
+            this.#containerRef.clear();
+            this.component = undefined;
+            this.#renderedCmp = undefined;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
@@ -937,6 +934,9 @@ class TileListComponent {
         this.appliedFlavor = this.appliedFlavor?.id === flavor.id ? undefined : flavor;
         if (this.#rawResultItems)
             this.items.set(this.#mapToTileData(this.#rawResultItems.map((i) => new DmsObject(i))));
+        // Re-run the inner query-list transformer so the *rendered* tiles pick up the
+        // flavor-driven config and `flavorTypeId` (the transformer reads `appliedFlavor`).
+        this.list().runTransformerAgain();
     }
     /**
      * Applies per-index optimistic overrides to the displayed tile data.
@@ -1246,6 +1246,8 @@ class TileListComponent {
                 badges: objectConfig.badges,
                 instanceData: dmsObject.data,
                 dmsObject,
+                // expose the applied flavor's SOT so a flavor-specific tile extension can be resolved
+                flavorTypeId: this.appliedFlavor && sots.includes(this.appliedFlavor.sot) ? this.appliedFlavor.sot : undefined,
                 title: objectConfig.title
                     ? this.#getResolvedObjectConfigItem(objectConfig.title.propertyName, dmsObject.data)
                     : { propertyName: '', value: '' }
@@ -1300,7 +1302,7 @@ class TileListComponent {
     #closeMenuEffect;
     #outsideClickCloseEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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, 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.12", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileListComponent, decorators: [{
             type: Component,
@@ -1319,7 +1321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[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  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, 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"] }]
+                    }, 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"] }] } });
 
 class ActionSelectComponent {
@@ -1798,17 +1800,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [TileConfigComponent, TranslatePipe$1, YmtIconButtonDirective, MatButtonModule, MatTooltipModule, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  ymt-icon-button\n  [icon-button-size]=\"small() ? 'small' : 'medium'\"\n  class=\"settings icon\"\n  (click)=\"openTileConfigOverlay()\"\n  [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\"\n>\n  <mat-icon>settings</mat-icon>\n</button>\n\n<ng-template #tplTileConfig>\n  <yuv-tile-config\n    (save)=\"onObjectConfigSave()\"\n    (canceled)=\"onObjectConfigCancel()\"\n    [bucket]=\"bucket() || undefined\"\n    [bucketLabel]=\"bucketLabel()\"\n    [configTypes]=\"options()?.configTypes\"\n    [configFlavors]=\"options()?.configFlavors || []\"\n  />\n</ng-template>\n" }]
         }], propDecorators: { tplTileConfig: [{ type: i0.ViewChild, args: ['tplTileConfig', { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], bucketLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucketLabel", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }] } });
 
+/**
+ * Reference {@link TileExtensionComponent} implementation: shows an attachment
+ * count and clip icon on email tiles. Register it for the email object type via
+ * `ShellService.registerTileExtension({ typeId: 'appSystemmail:email', cmp: EmailTileExtensionComponent })`.
+ */
 class EmailTileExtensionComponent {
     constructor() {
         this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.attachments = computed(() => this.data()['appSystemmail:attachments'] || [], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
         this.hasAttachements = computed(() => !!this.data()['appSystemmail:attachmentCount'], ...(ngDevMode ? [{ debugName: "hasAttachements" }] : /* istanbul ignore next */ []));
     }
-    onClick(a, evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-        alert(`You clicked '${a}' my friend.`);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EmailTileExtensionComponent, isStandalone: true, selector: "yuv-email-tile-extension", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.attachments": "hasAttachements()" } }, ngImport: i0, template: `
     @if (hasAttachements()) {
@@ -1837,6 +1839,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     }, styles: [":host{display:flex;justify-content:end;margin-top:.5rem}:host .icon{height:1rem}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 
+/**
+ * @deprecated Use {@link ShellService} instead. Tile extension registration was
+ * consolidated into `ShellService` (see `registerTileExtension`,
+ * `getRegisteredTileExtensions`, `getTileExtension`). This service now only
+ * delegates to `ShellService` so existing callers keep working against a single
+ * registry. It is kept temporarily for backwards compatibility and will be
+ * removed in a future release — migrate consumers to `ShellService`.
+ */
+class TileExtensionService {
+    constructor() {
+        this.shellService = inject(ShellService);
+    }
+    /**
+     * @deprecated Use {@link ShellService.registerTileExtension} instead.
+     */
+    registerTileExtension(ext) {
+        this.shellService.registerTileExtension(ext);
+    }
+    /**
+     * @deprecated Use {@link ShellService.getTileExtension} instead.
+     */
+    hasTileExtension(objectTypeId) {
+        return !!this.shellService.getTileExtension(objectTypeId);
+    }
+    /**
+     * Get tile extensions for a certain type
+     * @param typeId ID of the type to fetch extesion for (objectTypeID or secondaryObjectTypeID)
+     * @returns
+     * @deprecated Use {@link ShellService.getTileExtension} instead.
+     */
+    getTileExtension(typeId) {
+        return this.shellService.getTileExtension(typeId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileExtensionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */