@yuuvis/client-framework 2.20.0 → 3.0.0-beta.20.0

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

@@ -1,21 +1,20 @@
 import * as i0 from '@angular/core';
 import { input, output, viewChild, ChangeDetectionStrategy, Component, Injectable, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, contentChild, viewChildren, computed, signal, linkedSignal, untracked } from '@angular/core';
-import * as i1 from '@yuuvis/client-core';
-import { ObjectConfigService, DmsService, SearchService, DmsObject, BaseObjectTypeField, TranslateModule, SystemService, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
+import { ObjectConfigService, DmsService, SearchService, DmsObject, BaseObjectTypeField, TranslatePipe, SystemService, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i4 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i2$1 from '@angular/material/tooltip';
+import * as i4 from '@angular/material/tooltip';
 import { MatTooltip, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule } from '@angular/material/tooltip';
 import { ActionsService } from '@yuuvis/client-framework/actions';
-import * as i2 from '@yuuvis/client-framework/list';
+import * as i1 from '@yuuvis/client-framework/list';
 import { YuvListModule } from '@yuuvis/client-framework/list';
-import * as i3 from '@yuuvis/client-framework/query-list';
+import * as i2 from '@yuuvis/client-framework/query-list';
 import { YuvQueryListModule } from '@yuuvis/client-framework/query-list';
 import { RendererDirective } from '@yuuvis/client-framework/renderer';
 import { YmtMatIconRegistryService, YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
@@ -24,16 +23,16 @@ import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@angular/material/select';
+import * as i2$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { DialogComponent } from '@yuuvis/client-framework/common';
-import { NgClass, CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
-import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
+import { TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
 
 class TileActionsMenuComponent {
     constructor() {
-        this.actions = input.required();
+        this.actions = input.required(...(ngDevMode ? [{ debugName: "actions" }] : []));
         this.itemSelect = output();
         this.matMenu = viewChild.required('menuRef');
     }
@@ -42,8 +41,8 @@ class TileActionsMenuComponent {
         event.preventDefault();
         this.itemSelect.emit(action);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TileActionsMenuComponent, isStandalone: true, selector: "yuv-tile-actions-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TileActionsMenuComponent, isStandalone: true, selector: "yuv-tile-actions-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <mat-menu #menuRef>
       @for (action of actions(); track action.id) {
         <button
@@ -61,7 +60,7 @@ class TileActionsMenuComponent {
     </mat-menu>
   `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileActionsMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-tile-actions-menu', imports: [MatMenu, MatIcon, MatMenuItem, MatTooltip], template: `
     <mat-menu #menuRef>
@@ -80,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       }
     </mat-menu>
   `, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
-        }] });
+        }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], matMenu: [{ type: i0.ViewChild, args: ['menuRef', { isSignal: true }] }] } });
 
 class TileExtensionService {
     constructor() {
@@ -105,10 +104,10 @@ class TileExtensionService {
     getTileExtension(typeId) {
         return this._extensions[typeId];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileExtensionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileExtensionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -119,7 +118,7 @@ class TileExtensionDirective {
     constructor() {
         this.#tileExtensioService = inject(TileExtensionService);
         this.#containerRef = inject(ViewContainerRef);
-        this.yuvTileExtension = input.required();
+        this.yuvTileExtension = input.required(...(ngDevMode ? [{ debugName: "yuvTileExtension" }] : []));
         this.#yuvTileExtensionEffect = effect(() => {
             const tile = this.yuvTileExtension();
             if (tile.typeId) {
@@ -127,7 +126,7 @@ class TileExtensionDirective {
                 if (ext)
                     this._render(ext, tile.data);
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#yuvTileExtensionEffect" }] : []));
     }
     #tileExtensioService;
     #containerRef;
@@ -138,16 +137,16 @@ class TileExtensionDirective {
         this.component = this.#containerRef.createComponent(ext.cmp);
         this.component.setInput('data', data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileExtensionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileExtensionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvTileExtension]',
                     standalone: true
                 }]
-        }] });
+        }], propDecorators: { yuvTileExtension: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvTileExtension", required: true }] }] } });
 
 const MATERIAL_IMPORTS = [MatIconModule, MatPaginatorModule, MatTooltipModule, MatMenuTrigger];
 /**
@@ -238,7 +237,7 @@ class TileListComponent {
          * </yuv-tile-list>
          * ```
          */
-        this.menuComponent = contentChild(TileActionsMenuComponent);
+        this.menuComponent = contentChild(TileActionsMenuComponent, ...(ngDevMode ? [{ debugName: "menuComponent" }] : []));
         /**
          * Optional projected element shown when the query returns an empty result set.
          *
@@ -249,7 +248,7 @@ class TileListComponent {
          * </yuv-tile-list>
          * ```
          */
-        this.emptyContent = contentChild('empty');
+        this.emptyContent = contentChild('empty', ...(ngDevMode ? [{ debugName: "emptyContent" }] : []));
         /**
          * Reference to the inner `QueryListComponent` instance.
          *
@@ -264,7 +263,7 @@ class TileListComponent {
          * Used by `#closeMenuEffect` to close every open context/action menu when the user
          * selects a menu item, ensuring only one menu is open at a time.
          */
-        this.menuTriggers = viewChildren(MatMenuTrigger);
+        this.menuTriggers = viewChildren(MatMenuTrigger, ...(ngDevMode ? [{ debugName: "menuTriggers" }] : []));
         /**
          * Namespace key for storing and retrieving this instance's tile configuration.
          *
@@ -276,7 +275,7 @@ class TileListComponent {
          * Use a unique, stable string — e.g. `"my-app.inbox-list"`. If omitted, the global
          * default configuration is used.
          */
-        this.bucket = input();
+        this.bucket = input(...(ngDevMode ? [undefined, { debugName: "bucket" }] : []));
         /**
          * Number of result items to request per page from the search service.
          *
@@ -286,7 +285,7 @@ class TileListComponent {
          *
          * @default SearchService.DEFAULT_QUERY_SIZE
          */
-        this.pageSize = input(SearchService.DEFAULT_QUERY_SIZE);
+        this.pageSize = input(SearchService.DEFAULT_QUERY_SIZE, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
         /**
          * Enables multi-selection mode.
          *
@@ -297,7 +296,7 @@ class TileListComponent {
          *
          * @default false
          */
-        this.multiselect = input(false);
+        this.multiselect = input(false, ...(ngDevMode ? [{ debugName: "multiselect" }] : []));
         /**
          * Renders tiles in a compact, reduced-height style.
          *
@@ -306,7 +305,7 @@ class TileListComponent {
          *
          * @default false
          */
-        this.dense = input(false);
+        this.dense = input(false, ...(ngDevMode ? [{ debugName: "dense" }] : []));
         /**
          * Extended configuration options for the tile list.
          *
@@ -316,7 +315,7 @@ class TileListComponent {
          * - `configTypes` — virtual config type overrides that let you map specific
          *   object-type / SOT combinations to a different `ObjectConfigRecord` entry.
          */
-        this.options = input(undefined);
+        this.options = input(undefined, ...(ngDevMode ? [{ debugName: "options" }] : []));
         /**
          * Object flavor to overlay on matching tiles.
          *
@@ -328,7 +327,7 @@ class TileListComponent {
          * Changes are applied reactively via `#flavorEffect` and re-evaluated against the
          * last raw result set via `applyFlavor()`.
          */
-        this.flavor = input();
+        this.flavor = input(...(ngDevMode ? [undefined, { debugName: "flavor" }] : []));
         /**
          * The search query to execute.
          *
@@ -337,7 +336,7 @@ class TileListComponent {
          * `system:objectTypeId` field — tiles without a resolved object type will throw at
          * mapping time.
          */
-        this.query = input();
+        this.query = input(...(ngDevMode ? [undefined, { debugName: "query" }] : []));
         /**
          * Object IDs to select as soon as the list finishes loading.
          *
@@ -349,7 +348,7 @@ class TileListComponent {
          *
          * @default []
          */
-        this.preselect = input([]);
+        this.preselect = input([], ...(ngDevMode ? [{ debugName: "preselect" }] : []));
         /**
          * Per-item CSS style overrides rendered as inline styles on matching tiles.
          *
@@ -360,7 +359,7 @@ class TileListComponent {
          *
          * @default []
          */
-        this.highlights = input([]);
+        this.highlights = input([], ...(ngDevMode ? [{ debugName: "highlights" }] : []));
         /**
          * Guard function that temporarily blocks all selection changes.
          *
@@ -370,7 +369,7 @@ class TileListComponent {
          *
          * @default () => false  (never prevents)
          */
-        this.preventChangeUntil = input(() => false);
+        this.preventChangeUntil = input(() => false, ...(ngDevMode ? [{ debugName: "preventChangeUntil" }] : []));
         /**
          * Automatically selects an item when the list is first rendered.
          *
@@ -380,9 +379,9 @@ class TileListComponent {
          *
          * @default false
          */
-        this.autoSelect = input(false, {
-            transform: (value) => coerceBooleanProperty(value)
-        });
+        this.autoSelect = input(false, ...(ngDevMode ? [{ debugName: "autoSelect", transform: (value) => coerceBooleanProperty(value) }] : [{
+                transform: (value) => coerceBooleanProperty(value)
+            }]));
         /**
          * Suppresses the component's built-in context menu handling.
          *
@@ -392,7 +391,7 @@ class TileListComponent {
          *
          * @default false
          */
-        this.disableCustomContextMenu = input(false);
+        this.disableCustomContextMenu = input(false, ...(ngDevMode ? [{ debugName: "disableCustomContextMenu" }] : []));
         /**
          * Emits the `TileData` of the most recently selected tile.
          *
@@ -468,7 +467,7 @@ class TileListComponent {
         this.menu = computed(() => {
             const comp = this.menuComponent();
             return comp?.matMenu() ?? null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "menu" }] : []));
         /**
          * The full `TileData` objects for all currently selected tiles.
          *
@@ -476,16 +475,16 @@ class TileListComponent {
          * the parent needs rich tile data (fields, DMS object reference, actions) rather than
          * just IDs.
          */
-        this.selectedTile = signal([]);
+        this.selectedTile = signal([], ...(ngDevMode ? [{ debugName: "selectedTile" }] : []));
         /**
          * Object IDs of the currently selected tiles.
          *
          * A flat `string[]` signal — convenient for ID comparisons, permission checks, or
          * passing to services that work with IDs. For the full tile data, use `selectedTile`.
          */
-        this.selection = signal([]);
-        this.#busy = computed(() => this.list().busy());
-        this.#preselect = linkedSignal(this.preselect);
+        this.selection = signal([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
+        this.#busy = computed(() => this.list().busy(), ...(ngDevMode ? [{ debugName: "#busy" }] : []));
+        this.#preselect = linkedSignal(this.preselect, ...(ngDevMode ? [{ debugName: "#preselect" }] : []));
         /**
          * Computed map of per-object-ID inline CSS styles derived from the `highlights` input.
          *
@@ -504,7 +503,7 @@ class TileListComponent {
                 });
             });
             return x;
-        });
+        }, ...(ngDevMode ? [{ debugName: "highlightStyles" }] : []));
         /**
          * The `TileData` view models currently rendered in the list.
          *
@@ -512,7 +511,7 @@ class TileListComponent {
          * prepended by `dropItems()`. The template iterates over this signal directly.
          * Read this from the parent to access displayed tile data without an extra query.
          */
-        this.items = signal([]);
+        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
         /**
          * Indicates whether at least one search has been executed successfully.
          *
@@ -520,7 +519,7 @@ class TileListComponent {
          * to distinguish between "initial loading" (show a spinner) and "empty result"
          * (show the empty-state slot) without relying on `items().length` alone.
          */
-        this.searchExecuted = signal(false);
+        this.searchExecuted = signal(false, ...(ngDevMode ? [{ debugName: "searchExecuted" }] : []));
         this._selection = [];
         //#endregion
         //#region Public methods
@@ -732,9 +731,9 @@ class TileListComponent {
             return;
         event.preventDefault();
         // if not yet selected, select
-        if (this._selection.length === 0 || !this._selection.includes(index)) {
-            this.#internalSelectByIndex(index, event);
-        }
+        // if (this._selection.length === 0 || !this._selection.includes(index)) {
+        //   this.#internalSelectByIndex(index, event);
+        // }
         setTimeout(() => {
             this.ctxMenu.emit({ event, selection: this.selection() });
             // eslint-disable-next-line @typescript-eslint/no-magic-numbers
@@ -830,14 +829,13 @@ class TileListComponent {
      * @param objects `DmsObject` instances to prepend to the visible list.
      */
     dropItems(objects) {
-        const mappedItems = this.#mapToTileData(objects);
-        const items = mappedItems.map((item) => ({
-            ...item,
-            actions: (item.actions || [])
-                .map((objectConfigAction) => this.#actionService.getActionById(objectConfigAction.id, this.options()?.actionContext))
-                .filter((action) => action !== undefined)
-        }));
-        this.items.set([...items, ...this.items()]);
+        const items = this.#updateItems(objects);
+        if (items.length > 0 && this._selection.length > 0) {
+            this._selection = this._selection.map((i) => i + items.length);
+            if (this._lastSelection !== undefined) {
+                this._lastSelection += items.length;
+            }
+        }
         this.list().dropItems(items);
     }
     /**
@@ -872,6 +870,14 @@ class TileListComponent {
      * @param updates Array of `{ index, value }` pairs describing which tiles to patch.
      */
     updateListItems(updates) {
+        if (updates.length > 0) {
+            const patched = [...this.items()];
+            for (const update of updates) {
+                patched[update.index] = update.value;
+            }
+            this.items.set(patched);
+            this.#refreshSelectedTile();
+        }
         this.list().updateListItems(updates);
     }
     /**
@@ -889,14 +895,21 @@ class TileListComponent {
      * @param listItems Updated `DmsObject` instances to apply to the list.
      */
     updateTileList(listItems) {
-        const updates = [];
-        listItems.forEach((item) => {
+        const mappedItems = this.#mapToTileData(listItems);
+        const updates = mappedItems
+            .map((item) => {
             const idx = this.items().findIndex((listItem) => listItem.id === item.id);
-            if (idx >= 0 && this.objectConfig) {
-                const mappedTileData = this.#mapToTileData([item]);
-                updates.push({ index: idx, value: mappedTileData[0] });
-            }
-        });
+            if (idx < 0)
+                return undefined;
+            const value = {
+                ...item,
+                actions: (item.actions || [])
+                    .map((action) => this.#actionService.getActionById(action.id, this.options()?.actionContext))
+                    .filter((action) => action !== undefined)
+            };
+            return { index: idx, value };
+        })
+            .filter((update) => update !== undefined);
         this.updateListItems(updates);
     }
     /**
@@ -981,6 +994,24 @@ class TileListComponent {
     }
     //#endregion
     //#region Utilities
+    /**
+     * Maps `DmsObject` instances to `TileData`, resolves their actions, and updates the
+     * internal `items` signal.
+     *
+     * @param objects `DmsObject` instances to map and update.
+     * @returns Array of `TileData` corresponding to the provided `DmsObject` instances.
+     */
+    #updateItems(objects) {
+        const mappedItems = this.#mapToTileData(objects);
+        const items = mappedItems.map((item) => ({
+            ...item,
+            actions: (item.actions || [])
+                .map((objectConfigAction) => this.#actionService.getActionById(objectConfigAction.id, this.options()?.actionContext))
+                .filter((action) => action !== undefined)
+        }));
+        this.items.set([...items, ...this.items()]);
+        return items;
+    }
     #getObjectConfig() {
         this.#objectConfigService
             .getObjectConfigs$(this.bucket() || '', true)
@@ -992,6 +1023,12 @@ class TileListComponent {
             }
         });
     }
+    #refreshSelectedTile() {
+        if (this._selection.length > 0) {
+            const tiles = this._selectionToTileData(this._selection);
+            this.selectedTile.set(tiles);
+        }
+    }
     #internalSelectByIndex(idx, evt) {
         this.#select(idx, evt?.shiftKey, evt?.ctrlKey);
     }
@@ -1013,6 +1050,7 @@ class TileListComponent {
         // skip if selection hasn't changed
         if (this.#isSelectionEqual(sorted))
             return;
+        this.#preselect.set([]);
         this._selection = sorted;
         this._lastSelection = this._selection.length ? this._selection[this._selection.length - 1] : undefined;
         const tiles = this._selectionToTileData(this._selection);
@@ -1059,6 +1097,7 @@ class TileListComponent {
         // skip if selection hasn't changed
         if (this.#isSelectionEqual(newSelection))
             return;
+        this.#preselect.set([]);
         this._selection = newSelection;
         this._lastSelection = this._selection.length === 0 ? undefined : index;
         const tiles = this._selectionToTileData(this._selection);
@@ -1160,13 +1199,13 @@ class TileListComponent {
     #flavorEffect;
     #preselectEffect;
     #closeMenuEffect;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, disableCustomContextMenu: { classPropertyName: "disableCustomContextMenu", publicName: "disableCustomContextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { listeners: { "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)" }, properties: { "class.dense": "dense()" } }, providers: [], queries: [{ propertyName: "menuComponent", first: true, predicate: TileActionsMenuComponent, descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "menuTriggers", predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  idProperty=\"id\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [autoSelect]=\"autoSelect()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"onItemDoubleClick($event)\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  (queryResult)=\"onQueryResult($event)\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n>\n  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile [class.dense]=\"dense()\" [style]=\"highlightStyles()[item.id]\" (contextmenu)=\"contextMenuHandler($event, index)\">\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\" /></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\" /></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\" /></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\" /></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\" /></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button\n            ymt-icon-button\n            [matTooltip]=\"a.label\"\n            icon-button-size=\"small\"\n            (click)=\"executeAction(item, a, $event)\"\n          >\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button\n            ymt-icon-button\n            icon-button-size=\"small\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\" />\n      </ng-template>\n      <ng-template #extensionSlot>\n        <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\" />\n      </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empty-list\">\n      @let searchExe = searchExecuted();\n      @if (searchExe && emptyContent()) {\n        <ng-content />\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i2.ListTileComponent, selector: "yuv-list-tile" }, { kind: "ngmodule", type: YuvQueryListModule }, { kind: "component", type: i3.QueryListComponent, selector: "yuv-query-list", inputs: ["query", "idProperty", "transformer", "preventChangeUntil", "autoSelect", "pageSize", "enableDragSelect", "multiselect", "selfHandleSelection", "includePermissions"], outputs: ["itemSelect", "dragSelectChange", "itemDoubleClick", "queryResult"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, disableCustomContextMenu: { classPropertyName: "disableCustomContextMenu", publicName: "disableCustomContextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { listeners: { "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)" }, properties: { "class.dense": "dense()" } }, providers: [], queries: [{ propertyName: "menuComponent", first: true, predicate: TileActionsMenuComponent, descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "menuTriggers", predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  idProperty=\"id\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [autoSelect]=\"autoSelect()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"onItemDoubleClick($event)\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  (queryResult)=\"onQueryResult($event)\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n>\n  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile [class.dense]=\"dense()\" [style]=\"highlightStyles()[item.id]\" (contextmenu)=\"contextMenuHandler($event, index)\">\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\" /></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\" /></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\" /></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\" /></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\" /></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button\n            ymt-icon-button\n            [matTooltip]=\"a.label\"\n            icon-button-size=\"small\"\n            (click)=\"executeAction(item, a, $event)\"\n          >\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button\n            ymt-icon-button\n            icon-button-size=\"small\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\" />\n      </ng-template>\n      <ng-template #extensionSlot>\n        <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\" />\n      </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empty-list\">\n      @let searchExe = searchExecuted();\n      @if (searchExe && emptyContent()) {\n        <ng-content />\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: 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: "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: "19.2.20", ngImport: i0, type: TileListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-tile-list', standalone: true, providers: [], imports: [
-                        TranslateModule,
+                        TranslatePipe,
                         ReactiveFormsModule,
                         YuvListModule,
                         YuvQueryListModule,
@@ -1180,30 +1219,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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            (click)=\"executeAction(item, a, $event)\"\n          >\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button\n            ymt-icon-button\n            icon-button-size=\"small\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\" />\n      </ng-template>\n      <ng-template #extensionSlot>\n        <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\" />\n      </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empty-list\">\n      @let searchExe = searchExecuted();\n      @if (searchExe && emptyContent()) {\n        <ng-content />\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
-        }], ctorParameters: () => [] });
+        }], 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 {
     constructor() {
         this.actionService = inject(ActionsService);
-        this.objectType = input.required();
+        this.objectType = input.required(...(ngDevMode ? [{ debugName: "objectType" }] : []));
         this.actions = computed(() => {
             const ot = this.objectType();
             return ot.objectType ? this.actionService.getActionsForType(ot.objectType) : [];
-        });
-        this.selectedActionIds = input([]);
+        }, ...(ngDevMode ? [{ debugName: "actions" }] : []));
+        this.selectedActionIds = input([], ...(ngDevMode ? [{ debugName: "selectedActionIds" }] : []));
         this.actionSelect = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n  @for (a of actions(); track a.id) {\n    <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n      <mat-icon>{{ a.icon }}</mat-icon\n      >{{ a.label }}\n    </button>\n  }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n  @for (a of actions(); track a.id) {\n    <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n      <mat-icon>{{ a.icon }}</mat-icon\n      >{{ a.label }}\n    </button>\n  }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ActionSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ActionSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-tile-action-select', standalone: true, imports: [NgClass, MatIconModule], template: "<div class=\"actions\">\n  @for (a of actions(); track a.id) {\n    <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n      <mat-icon>{{ a.icon }}</mat-icon\n      >{{ a.label }}\n    </button>\n  }\n</div>\n", styles: [":host .actions{display:flex;gap:var(--ymt-spacing-xs)}:host .actions button{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);border:0;display:inline-flex;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);align-items:center;border-radius:var(--ymt-corner-s)}:host .actions button.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}\n"] }]
-        }] });
+        }], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: true }] }], selectedActionIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedActionIds", required: false }] }], actionSelect: [{ type: i0.Output, args: ["actionSelect"] }] } });
 
 class IconSelectComponent {
     constructor() {
-        this.objectType = input();
+        this.objectType = input(...(ngDevMode ? [undefined, { debugName: "objectType" }] : []));
         this.iconSelect = output();
     }
     async createIcon(inputEl) {
@@ -1221,13 +1260,13 @@ class IconSelectComponent {
     #emit(data) {
         this.iconSelect.emit(data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: IconSelectComponent, isStandalone: true, selector: "yuv-icon-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconSelect: "iconSelect" }, ngImport: i0, template: "<input style=\"display: none\" #fileInput type=\"file\" accept=\".svg\" (change)=\"createIcon(fileInput)\" />\n\n<button class=\"primary\" (click)=\"fileInput.click()\">{{ 'yuv.tile-config.icon-select.pick' | translate }}</button>\n<button class=\"secondary\" (click)=\"reset()\">{{ 'yuv.tile-config.icon-select.reset' | translate }}</button>\n", styles: [":host{display:flex;gap:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: IconSelectComponent, isStandalone: true, selector: "yuv-icon-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconSelect: "iconSelect" }, ngImport: i0, template: "<input style=\"display: none\" #fileInput type=\"file\" accept=\".svg\" (change)=\"createIcon(fileInput)\" />\n\n<button class=\"primary\" (click)=\"fileInput.click()\">{{ 'yuv.tile-config.icon-select.pick' | translate }}</button>\n<button class=\"secondary\" (click)=\"reset()\">{{ 'yuv.tile-config.icon-select.reset' | translate }}</button>\n", styles: [":host{display:flex;gap:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IconSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-icon-select', standalone: true, imports: [CommonModule, TranslateModule], template: "<input style=\"display: none\" #fileInput type=\"file\" accept=\".svg\" (change)=\"createIcon(fileInput)\" />\n\n<button class=\"primary\" (click)=\"fileInput.click()\">{{ 'yuv.tile-config.icon-select.pick' | translate }}</button>\n<button class=\"secondary\" (click)=\"reset()\">{{ 'yuv.tile-config.icon-select.reset' | translate }}</button>\n", styles: [":host{display:flex;gap:var(--ymt-spacing-m)}\n"] }]
-        }] });
+            args: [{ selector: 'yuv-icon-select', standalone: true, imports: [TranslatePipe], template: "<input style=\"display: none\" #fileInput type=\"file\" accept=\".svg\" (change)=\"createIcon(fileInput)\" />\n\n<button class=\"primary\" (click)=\"fileInput.click()\">{{ 'yuv.tile-config.icon-select.pick' | translate }}</button>\n<button class=\"secondary\" (click)=\"reset()\">{{ 'yuv.tile-config.icon-select.reset' | translate }}</button>\n", styles: [":host{display:flex;gap:var(--ymt-spacing-m)}\n"] }]
+        }], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], iconSelect: [{ type: i0.Output, args: ["iconSelect"] }] } });
 
 class PropertySelectComponent {
     constructor() {
@@ -1251,17 +1290,17 @@ class PropertySelectComponent {
             ContentStreamField.RANGE
         ];
         this.objectTypeFields = [];
-        this.query = signal(null);
-        this.objectType = input();
+        this.query = signal(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
+        this.objectType = input(...(ngDevMode ? [undefined, { debugName: "objectType" }] : []));
         this.filteredObjectTypeFields = computed(() => {
             return this.query() !== null
                 ? this.objectTypeFields.filter((otf) => otf.label.toLowerCase().indexOf(this.query()?.toLocaleLowerCase() || '') !== -1)
                 : this.getObjectTypeFields(this.objectType());
-        });
+        }, ...(ngDevMode ? [{ debugName: "filteredObjectTypeFields" }] : []));
         this.objectTypesEffect = effect(() => {
             untracked(() => this.getObjectTypeFields(this.objectType()));
-        });
-        this.selectedProperty = input();
+        }, ...(ngDevMode ? [{ debugName: "objectTypesEffect" }] : []));
+        this.selectedProperty = input(...(ngDevMode ? [undefined, { debugName: "selectedProperty" }] : []));
         this.propertySelect = output();
     }
     // fields that should not be available to be placed in the slots
@@ -1320,13 +1359,13 @@ class PropertySelectComponent {
     _getLabel(otf) {
         return this.system.getLocalizedLabel(otf.id) || otf.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: 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: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PropertySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PropertySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, TranslateModule, MatButtonModule, MatIconModule], template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"] }]
-        }] });
+            args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, TranslatePipe, MatButtonModule, MatIconModule], template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"] }]
+        }], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], selectedProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedProperty", required: false }] }], propertySelect: [{ type: i0.Output, args: ["propertySelect"] }] } });
 
 /**
  * Component for setting up a tile config
@@ -1336,9 +1375,9 @@ class TileConfigTileComponent {
         this.actionService = inject(ActionsService);
         this.elRef = inject(ElementRef);
         this.#system = inject(SystemService);
-        this.disableIconSlot = input();
-        this.disableBadgesSlot = input();
-        this.objectConfig = input.required();
+        this.disableIconSlot = input(...(ngDevMode ? [undefined, { debugName: "disableIconSlot" }] : []));
+        this.disableBadgesSlot = input(...(ngDevMode ? [undefined, { debugName: "disableBadgesSlot" }] : []));
+        this.objectConfig = input.required(...(ngDevMode ? [{ debugName: "objectConfig" }] : []));
         this._objectConfig = computed(() => {
             const oc = this.objectConfig();
             if (oc) {
@@ -1350,7 +1389,7 @@ class TileConfigTileComponent {
                 });
             }
             return oc;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_objectConfig" }] : []));
         this.actions = computed(() => {
             const actionsList = [];
             const ocActions = this.objectConfig();
@@ -1362,7 +1401,7 @@ class TileConfigTileComponent {
                 });
             }
             return actionsList;
-        });
+        }, ...(ngDevMode ? [{ debugName: "actions" }] : []));
         this.slotSelect = output();
     }
     #system;
@@ -1378,15 +1417,13 @@ class TileConfigTileComponent {
                 e.classList.remove('active');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    {{ oc?.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    {{ oc?.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileConfigTileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileConfigTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [MatButtonModule,
-                        MatTooltipModule,
-                        MatIconModule, CommonModule, ObjectTypeIconComponent], template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    {{ oc?.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"] }]
-        }] });
+            args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, ObjectTypeIconComponent], template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    {{ oc?.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"] }]
+        }], propDecorators: { disableIconSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableIconSlot", required: false }] }], disableBadgesSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBadgesSlot", required: false }] }], objectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectConfig", required: true }] }], slotSelect: [{ type: i0.Output, args: ["slotSelect"] }] } });
 
 class TileConfigComponent {
     constructor() {
@@ -1398,23 +1435,26 @@ class TileConfigComponent {
          * is basically an ID where your custom tile config will be stored and
          * retrieved. Buckets should be unique so be sure to use a unique namespace.
          */
-        this.bucket = input(undefined);
-        this.bucketLabel = input(undefined);
-        this.configTypes = input(undefined);
-        this.configFlavors = input([]);
+        this.bucket = input(undefined, ...(ngDevMode ? [{ debugName: "bucket" }] : []));
+        this.bucketLabel = input(undefined, ...(ngDevMode ? [{ debugName: "bucketLabel" }] : []));
+        this.configTypes = input(undefined, ...(ngDevMode ? [{ debugName: "configTypes" }] : []));
+        this.configFlavors = input([], ...(ngDevMode ? [{ debugName: "configFlavors" }] : []));
         this.types = computed(() => {
             const ct = this.configTypes() || [];
             const cf = [];
             // TODO: enable when flavors are supported in tile config
             // const cf = this.configFlavors() || [];
-            return [...ct.map((t) => ({ id: t.id, icon: t.icon, data: t })), ...cf.map((f) => ({ id: f.id, icon: f.icon, flavor: true, data: f }))];
-        });
+            return [
+                ...ct.map((t) => ({ id: t.id, icon: t.icon, data: t })),
+                ...cf.map((f) => ({ id: f.id, icon: f.icon, flavor: true, data: f }))
+            ];
+        }, ...(ngDevMode ? [{ debugName: "types" }] : []));
         this.#typesEffect = effect(() => {
             const t = this.types();
             if (t.length && !this.selectedType) {
                 this.typeSelected(t[0]);
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#typesEffect" }] : []));
         this.save = output();
         this.canceled = output();
         this.selectedTypeProperties = [];
@@ -1497,7 +1537,7 @@ class TileConfigComponent {
                 label: field.label,
                 propertyName: field.id
             }
-            : undefined;
+            : null;
         this.objectConfig = structuredClone({
             ...this.objectConfig,
             ...p
@@ -1559,10 +1599,10 @@ class TileConfigComponent {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TileConfigComponent, isStandalone: true, selector: "yuv-tile-config", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, configTypes: { classPropertyName: "configTypes", publicName: "configTypes", isSignal: true, isRequired: false, transformFunction: null }, configFlavors: { classPropertyName: "configFlavors", publicName: "configFlavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <section class=\"picker\">\n      <mat-form-field>\n        <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n          @for (t of types() || []; track t.id; let i = $index) {\n            <mat-option [value]=\"t.data\">{{ t.id | translate }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      @if (selectedType) {\n        <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n      }\n    </section>\n\n    <section class=\"details\">\n      @if (selectedType) {\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile\n            [disableIconSlot]=\"true\"\n            [disableBadgesSlot]=\"true\"\n            [objectConfig]=\"objectConfig!\"\n            (slotSelect)=\"slotSelect($event)\"\n          ></yuv-tile-config-tile>\n        </div>\n\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n          } @else if (selectedSlot === 'badges') {\n            <div class=\"placeholder empty\">\n              <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n            </div>\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            ></yuv-tile-action-select>\n          } @else {\n            <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            ></yuv-tile-property-select>\n          }\n        </main>\n      } @else {\n        <div class=\"placeholder empty\"></div>\n      }\n    </section>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{max-width:500px;margin:auto;border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "objectConfig"], outputs: ["slotSelect"] }, { kind: "component", type: IconSelectComponent, selector: "yuv-icon-select", inputs: ["objectType"], outputs: ["iconSelect"] }, { kind: "component", type: PropertySelectComponent, selector: "yuv-tile-property-select", inputs: ["objectType", "selectedProperty"], outputs: ["propertySelect"] }, { kind: "component", type: ActionSelectComponent, selector: "yuv-tile-action-select", inputs: ["objectType", "selectedActionIds"], outputs: ["actionSelect"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YuvListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TileConfigComponent, isStandalone: true, selector: "yuv-tile-config", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, configTypes: { classPropertyName: "configTypes", publicName: "configTypes", isSignal: true, isRequired: false, transformFunction: null }, configFlavors: { classPropertyName: "configFlavors", publicName: "configFlavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <section class=\"picker\">\n      <mat-form-field>\n        <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n          @for (t of types() || []; track t.id; let i = $index) {\n            <mat-option [value]=\"t.data\">{{ t.id | translate }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      @if (selectedType) {\n        <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n      }\n    </section>\n\n    <section class=\"details\">\n      @if (selectedType) {\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile\n            [disableIconSlot]=\"true\"\n            [disableBadgesSlot]=\"true\"\n            [objectConfig]=\"objectConfig!\"\n            (slotSelect)=\"slotSelect($event)\"\n          ></yuv-tile-config-tile>\n        </div>\n\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n          } @else if (selectedSlot === 'badges') {\n            <div class=\"placeholder empty\">\n              <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n            </div>\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            ></yuv-tile-action-select>\n          } @else {\n            <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            ></yuv-tile-property-select>\n          }\n        </main>\n      } @else {\n        <div class=\"placeholder empty\"></div>\n      }\n    </section>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{max-width:500px;margin:auto;border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "objectConfig"], outputs: ["slotSelect"] }, { kind: "component", type: IconSelectComponent, selector: "yuv-icon-select", inputs: ["objectType"], outputs: ["iconSelect"] }, { kind: "component", type: PropertySelectComponent, selector: "yuv-tile-property-select", inputs: ["objectType", "selectedProperty"], outputs: ["propertySelect"] }, { kind: "component", type: ActionSelectComponent, selector: "yuv-tile-action-select", inputs: ["objectType", "selectedActionIds"], outputs: ["actionSelect"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-tile-config', standalone: true, imports: [
                         FormsModule,
@@ -1570,7 +1610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         IconSelectComponent,
                         PropertySelectComponent,
                         ActionSelectComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         YuvListModule,
                         MatIconModule,
                         MatDialogModule,
@@ -1580,18 +1620,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         MatFormFieldModule,
                         YmtButtonDirective
                     ], template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <section class=\"picker\">\n      <mat-form-field>\n        <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n          @for (t of types() || []; track t.id; let i = $index) {\n            <mat-option [value]=\"t.data\">{{ t.id | translate }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      @if (selectedType) {\n        <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n      }\n    </section>\n\n    <section class=\"details\">\n      @if (selectedType) {\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile\n            [disableIconSlot]=\"true\"\n            [disableBadgesSlot]=\"true\"\n            [objectConfig]=\"objectConfig!\"\n            (slotSelect)=\"slotSelect($event)\"\n          ></yuv-tile-config-tile>\n        </div>\n\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n          } @else if (selectedSlot === 'badges') {\n            <div class=\"placeholder empty\">\n              <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n            </div>\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            ></yuv-tile-action-select>\n          } @else {\n            <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            ></yuv-tile-property-select>\n          }\n        </main>\n      } @else {\n        <div class=\"placeholder empty\"></div>\n      }\n    </section>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{max-width:500px;margin:auto;border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"] }]
-        }] });
+        }], propDecorators: { bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], bucketLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucketLabel", required: false }] }], configTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "configTypes", required: false }] }], configFlavors: [{ type: i0.Input, args: [{ isSignal: true, alias: "configFlavors", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });
 
 class TileConfigTriggerComponent {
     constructor() {
         this.#dialog = inject(MatDialog);
         this.tplTileConfig = viewChild.required('tplTileConfig');
-        this.icon = input('settings');
-        this.bucket = input();
-        this.bucketLabel = input();
-        this.options = input(undefined);
+        this.icon = input('settings', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.bucket = input(...(ngDevMode ? [undefined, { debugName: "bucket" }] : []));
+        this.bucketLabel = input(...(ngDevMode ? [undefined, { debugName: "bucketLabel" }] : []));
+        this.options = input(undefined, ...(ngDevMode ? [{ debugName: "options" }] : []));
         // If true, renders a smaller icon button
-        this.small = input(false);
+        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
     }
     #dialog;
     #dialogRef;
@@ -1611,29 +1651,27 @@ class TileConfigTriggerComponent {
         if (this.#dialogRef)
             this.#dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.20", type: TileConfigTriggerComponent, isStandalone: true, selector: "yuv-tile-config-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tplTileConfig", first: true, predicate: ["tplTileConfig"], descendants: true, isSignal: true }], ngImport: i0, template: "<button  ymt-icon-button [icon-button-size]=\"small() ? 'small' : 'medium'\" class=\"settings icon\" (click)=\"openTileConfigOverlay()\" [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\">\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  ></yuv-tile-config>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TileConfigComponent, selector: "yuv-tile-config", inputs: ["bucket", "bucketLabel", "configTypes", "configFlavors"], outputs: ["save", "canceled"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.19", type: TileConfigTriggerComponent, isStandalone: true, selector: "yuv-tile-config-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tplTileConfig", first: true, predicate: ["tplTileConfig"], descendants: true, isSignal: true }], ngImport: i0, template: "<button  ymt-icon-button [icon-button-size]=\"small() ? 'small' : 'medium'\" class=\"settings icon\" (click)=\"openTileConfigOverlay()\" [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\">\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  ></yuv-tile-config>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: TileConfigComponent, selector: "yuv-tile-config", inputs: ["bucket", "bucketLabel", "configTypes", "configFlavors"], outputs: ["save", "canceled"] }, { 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: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [CommonModule, TileConfigComponent, TranslateModule$1,
-                        YmtIconButtonDirective,
-                        MatButtonModule, MatTooltipModule, MatIcon], template: "<button  ymt-icon-button [icon-button-size]=\"small() ? 'small' : 'medium'\" class=\"settings icon\" (click)=\"openTileConfigOverlay()\" [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\">\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  ></yuv-tile-config>\n</ng-template>\n" }]
-        }] });
+            args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [TileConfigComponent, TranslatePipe$1, YmtIconButtonDirective, MatButtonModule, MatTooltipModule, MatIcon], template: "<button  ymt-icon-button [icon-button-size]=\"small() ? 'small' : 'medium'\" class=\"settings icon\" (click)=\"openTileConfigOverlay()\" [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\">\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  ></yuv-tile-config>\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 }] }] } });
 
 class EmailTileExtensionComponent {
     constructor() {
-        this.data = input.required();
-        this.attachments = computed(() => this.data()['appSystemmail:attachments'] || []);
-        this.hasAttachements = computed(() => !!this.data()['appSystemmail:attachmentCount']);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.attachments = computed(() => this.data()['appSystemmail:attachments'] || [], ...(ngDevMode ? [{ debugName: "attachments" }] : []));
+        this.hasAttachements = computed(() => !!this.data()['appSystemmail:attachmentCount'], ...(ngDevMode ? [{ debugName: "hasAttachements" }] : []));
     }
     onClick(a, evt) {
         evt.preventDefault();
         evt.stopPropagation();
         alert(`You clicked '${a}' my friend.`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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()) {
       <span>{{ attachments().length }}</span>
       <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960">
@@ -1642,9 +1680,9 @@ class EmailTileExtensionComponent {
         />
       </svg>
     }
-  `, isInline: true, styles: [":host{display:flex;justify-content:end;margin-top:.5rem;.icon{height:1rem}}\n"] }); }
+  `, isInline: true, styles: [":host{display:flex;justify-content:end;margin-top:.5rem}:host .icon{height:1rem}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EmailTileExtensionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EmailTileExtensionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-email-tile-extension', standalone: true, imports: [], template: `
     @if (hasAttachements()) {
@@ -1657,8 +1695,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
     }
   `, host: {
                         '[class.attachments]': 'hasAttachements()'
-                    }, styles: [":host{display:flex;justify-content:end;margin-top:.5rem;.icon{height:1rem}}\n"] }]
-        }] });
+                    }, 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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.