@yuuvis/client-framework 2.20.0 → 2.21.0

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

@@ -1,17 +1,18 @@
 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 { input, output, viewChild, ChangeDetectionStrategy, Component, forwardRef, Injectable, inject, ViewContainerRef, effect, Directive, DestroyRef, ElementRef, ChangeDetectorRef, contentChild, viewChildren, computed, signal, linkedSignal, untracked } from '@angular/core';
+import * as i4 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import * as i2$1 from '@angular/material/tooltip';
+import { MatTooltip, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@yuuvis/client-core';
 import { ObjectConfigService, DmsService, SearchService, DmsObject, BaseObjectTypeField, TranslateModule, SystemService, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i4 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 { 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 { YuvListModule } from '@yuuvis/client-framework/list';
@@ -19,67 +20,46 @@ import * as i3 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';
-import { switchMap } from 'rxjs';
+import { switchMap, forkJoin, take } from 'rxjs';
+import { NgClass, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$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 { ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
-import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
 
 class TileActionsMenuComponent {
     constructor() {
         this.actions = input.required();
+        this.loading = input(false);
         this.itemSelect = output();
         this.matMenu = viewChild.required('menuRef');
     }
     itemClicked(event, action) {
         event.stopPropagation();
         event.preventDefault();
+        if (action.disabled)
+            return;
         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: `
-    <mat-menu #menuRef>
-      @for (action of actions(); track action.id) {
-        <button
-          mat-menu-item
-          (click)="itemClicked($event, action)"
-          [matTooltip]="action.description"
-          [matTooltipDisabled]="!action.description"
-        >
-          @if (action.icon) {
-            <mat-icon>{{ action.icon }}</mat-icon>
-          }
-          <span>{{ action.label }}</span>
-        </button>
-      }
-    </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 }); }
+    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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, 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>\n  <!-- @if (loading() && !actions().length) {\n        <div class=\"loading-indicator\">\n          <mat-spinner diameter=\"24\"></mat-spinner>\n        </div>\n      } -->\n  @for (action of actions(); track action.id) {\n    @if (action.children?.length) {\n      <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n        <button\n          mat-menu-item\n          [disabled]=\"!!action.disabled\"\n          [attr.disabled]=\"!!action.disabled\"\n          [matMenuTriggerFor]=\"subMenu.matMenu()\"\n        >\n          @if (action.icon) {\n            <mat-icon>{{ action.icon }}</mat-icon>\n          }\n          <span>{{ action.label }}</span>\n        </button>\n        <yuv-tile-actions-menu #subMenu [actions]=\"action.children!\" (itemSelect)=\"itemSelect.emit($event)\" />\n      </span>\n    } @else {\n      <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n        <button\n          mat-menu-item\n          [disabled]=\"!!action.disabled\"\n          [attr.disabled]=\"!!action.disabled\"\n          (click)=\"itemClicked($event, action)\"\n        >\n          @if (action.icon) {\n            <mat-icon>{{ action.icon }}</mat-icon>\n          }\n          <span>{{ action.label }}</span>\n        </button>\n      </span>\n    }\n  }\n</mat-menu>\n", styles: [":host{display:block}.loading-indicator{display:flex;justify-content:center;padding:8px 16px}button[mat-menu-item][disabled]{opacity:var(--ymt-disabled-opacity, .38);cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => TileActionsMenuComponent), selector: "yuv-tile-actions-menu", inputs: ["actions", "loading"], outputs: ["itemSelect"] }, { kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i0.forwardRef(() => 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: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-actions-menu', imports: [MatMenu, MatIcon, MatMenuItem, MatTooltip], template: `
-    <mat-menu #menuRef>
-      @for (action of actions(); track action.id) {
-        <button
-          mat-menu-item
-          (click)="itemClicked($event, action)"
-          [matTooltip]="action.description"
-          [matTooltipDisabled]="!action.description"
-        >
-          @if (action.icon) {
-            <mat-icon>{{ action.icon }}</mat-icon>
-          }
-          <span>{{ action.label }}</span>
-        </button>
-      }
-    </mat-menu>
-  `, providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'yuv-tile-actions-menu', imports: [
+                        MatMenu,
+                        MatIcon,
+                        MatMenuItem,
+                        MatMenuTrigger,
+                        MatProgressSpinner,
+                        MatTooltip,
+                        forwardRef(() => TileActionsMenuComponent)
+                    ], providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { position: 'right' } }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-menu #menuRef>\n  <!-- @if (loading() && !actions().length) {\n        <div class=\"loading-indicator\">\n          <mat-spinner diameter=\"24\"></mat-spinner>\n        </div>\n      } -->\n  @for (action of actions(); track action.id) {\n    @if (action.children?.length) {\n      <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n        <button\n          mat-menu-item\n          [disabled]=\"!!action.disabled\"\n          [attr.disabled]=\"!!action.disabled\"\n          [matMenuTriggerFor]=\"subMenu.matMenu()\"\n        >\n          @if (action.icon) {\n            <mat-icon>{{ action.icon }}</mat-icon>\n          }\n          <span>{{ action.label }}</span>\n        </button>\n        <yuv-tile-actions-menu #subMenu [actions]=\"action.children!\" (itemSelect)=\"itemSelect.emit($event)\" />\n      </span>\n    } @else {\n      <span [matTooltip]=\"action.description\" [matTooltipDisabled]=\"!action.description\">\n        <button\n          mat-menu-item\n          [disabled]=\"!!action.disabled\"\n          [attr.disabled]=\"!!action.disabled\"\n          (click)=\"itemClicked($event, action)\"\n        >\n          @if (action.icon) {\n            <mat-icon>{{ action.icon }}</mat-icon>\n          }\n          <span>{{ action.label }}</span>\n        </button>\n      </span>\n    }\n  }\n</mat-menu>\n", styles: [":host{display:block}.loading-indicator{display:flex;justify-content:center;padding:8px 16px}button[mat-menu-item][disabled]{opacity:var(--ymt-disabled-opacity, .38);cursor:default;pointer-events:none}\n"] }]
         }] });
 
 class TileExtensionService {
@@ -207,6 +187,7 @@ class TileListComponent {
     #objectConfigService;
     #destroyRef;
     #elRef;
+    #cdr;
     #actionService;
     #dmsService;
     #busy;
@@ -218,6 +199,7 @@ class TileListComponent {
         this.#objectConfigService = inject(ObjectConfigService);
         this.#destroyRef = inject(DestroyRef);
         this.#elRef = inject(ElementRef);
+        this.#cdr = inject(ChangeDetectorRef);
         this.#actionService = inject(ActionsService);
         this.#dmsService = inject(DmsService);
         //#endregion
@@ -547,7 +529,7 @@ class TileListComponent {
                     .map((action) => this.#actionService.getActionById(action.id, this.options()?.actionContext))
                     .filter((action) => action !== undefined)
             }));
-            // untracked(() => this.items.set(items));
+            this.#resolveInlineActionsDisabledState(items);
             return items;
         };
         //#endregion
@@ -732,9 +714,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
@@ -757,6 +739,8 @@ class TileListComponent {
     executeAction(tileData, action, event) {
         event.preventDefault();
         event.stopPropagation();
+        if (action.disabled)
+            return;
         const selectedIds = this.selection();
         const ids = selectedIds.includes(tileData.id) ? selectedIds : [tileData.id];
         this.#dmsService
@@ -830,14 +814,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 +855,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 +880,22 @@ 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.#resolveInlineActionsDisabledState(updates.map((u) => u.value));
         this.updateListItems(updates);
     }
     /**
@@ -981,6 +980,38 @@ 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.#resolveInlineActionsDisabledState(items);
+        this.items.set([...items, ...this.items()]);
+        return items;
+    }
+    /**
+     * Asynchronously resolves the `disabled` state for inline actions of the given tiles.
+     * Mutates `action.disabled` on the existing action instances and triggers change detection.
+     */
+    #resolveInlineActionsDisabledState(items) {
+        const itemsWithActions = items.filter((item) => item.actions?.length > 0);
+        if (!itemsWithActions.length)
+            return;
+        const resolvers = itemsWithActions.map((item) => this.#actionService.resolveDisabledState(item.actions, [item.dmsObject]));
+        forkJoin(resolvers)
+            .pipe(take(1))
+            .subscribe(() => this.#cdr.markForCheck());
+    }
     #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);
@@ -1161,7 +1200,7 @@ class TileListComponent {
     #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.ɵ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            [disabled]=\"a.disabled\"\n            (click)=\"executeAction(item, a, $event)\"\n          >\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button\n            ymt-icon-button\n            icon-button-size=\"small\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\" />\n      </ng-template>\n      <ng-template #extensionSlot>\n        <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\" />\n      </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empty-list\">\n      @let searchExe = searchExecuted();\n      @if (searchExe && emptyContent()) {\n        <ng-content />\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i2.ListTileComponent, selector: "yuv-list-tile" }, { kind: "ngmodule", type: YuvQueryListModule }, { kind: "component", type: i3.QueryListComponent, selector: "yuv-query-list", inputs: ["query", "idProperty", "transformer", "preventChangeUntil", "autoSelect", "pageSize", "enableDragSelect", "multiselect", "selfHandleSelection", "includePermissions"], outputs: ["itemSelect", "dragSelectChange", "itemDoubleClick", "queryResult"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileListComponent, decorators: [{
             type: Component,
@@ -1179,7 +1218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         '[class.dense]': 'dense()',
                         '(keydown.control.c)': 'onCopy($event)',
                         '(keydown.control.x)': 'onCut($event)'
-                    }, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  idProperty=\"id\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [autoSelect]=\"autoSelect()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"onItemDoubleClick($event)\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  (queryResult)=\"onQueryResult($event)\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n>\n  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile [class.dense]=\"dense()\" [style]=\"highlightStyles()[item.id]\" (contextmenu)=\"contextMenuHandler($event, index)\">\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\" /></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\" /></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\" /></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\" /></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\" /></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button\n            ymt-icon-button\n            [matTooltip]=\"a.label\"\n            icon-button-size=\"small\"\n            (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"] }]
+                    }, template: "<yuv-query-list\n  #list\n  [query]=\"query()\"\n  [transformer]=\"transformer\"\n  idProperty=\"id\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [autoSelect]=\"autoSelect()\"\n  [pageSize]=\"pageSize()\"\n  [multiselect]=\"multiselect()\"\n  (itemDoubleClick)=\"onItemDoubleClick($event)\"\n  (itemSelect)=\"onListItemsSelect($event)\"\n  (queryResult)=\"onQueryResult($event)\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n>\n  <ng-template #yuvQueryListItem let-item let-index=\"index\">\n    <yuv-list-tile [class.dense]=\"dense()\" [style]=\"highlightStyles()[item.id]\" (contextmenu)=\"contextMenuHandler($event, index)\">\n      <ng-template #iconSlot><ng-container *yuvRenderer=\"item.icon\" /></ng-template>\n      <ng-template #titleSlot><ng-container *yuvRenderer=\"item.title\" /></ng-template>\n      <ng-template #descriptionSlot><ng-container *yuvRenderer=\"item.description\" /></ng-template>\n      <ng-template #metaSlot><ng-container *yuvRenderer=\"item.meta\" /></ng-template>\n      <ng-template #asideSlot><ng-container *yuvRenderer=\"item.aside\" /></ng-template>\n      <ng-template #actionsSlot>\n        @for (a of item.actions; track a.id) {\n          <button\n            ymt-icon-button\n            [matTooltip]=\"a.label\"\n            icon-button-size=\"small\"\n            [disabled]=\"a.disabled\"\n            (click)=\"executeAction(item, a, $event)\"\n          >\n            <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n          </button>\n        }\n\n        @if (menu()) {\n          <button\n            ymt-icon-button\n            icon-button-size=\"small\"\n            (click)=\"menuItemClicked(item, $event)\"\n            [matTooltip]=\"'yuv.tile-list.item.actions-menu.button.tooltip' | translate\"\n            [matMenuTriggerFor]=\"menu()\"\n          >\n            <mat-icon inert=\"true\">more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"yuv-tile-actions-menu, [yuv-tile-actions-menu]\" />\n      </ng-template>\n      <ng-template #extensionSlot>\n        <ng-container *yuvTileExtension=\"{ typeId: item.objectTypeId, data: item.instanceData }\" />\n      </ng-template>\n      <ng-template #badgesSlot>{{ item.badges }}</ng-template>\n    </yuv-list-tile>\n  </ng-template>\n\n  <ng-template #yuvQueryListEmpty>\n    <div class=\"empty-list\">\n      @let searchExe = searchExecuted();\n      @if (searchExe && emptyContent()) {\n        <ng-content />\n      }\n    </div>\n  </ng-template>\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</yuv-query-list>\n", styles: [":host{--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host yuv-query-list{flex:1;overflow-y:auto;display:flex;flex-flow:column;height:100%}:host yuv-query-list .offset{flex:1 1 auto}:host .empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class ActionSelectComponent {
@@ -1201,34 +1240,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             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"] }]
         }] });
 
-class IconSelectComponent {
-    constructor() {
-        this.objectType = input();
-        this.iconSelect = output();
-    }
-    async createIcon(inputEl) {
-        const file = inputEl.files ? inputEl.files[0] : undefined;
-        if (file) {
-            const text = await file.text();
-            this.#emit(text);
-        }
-        else
-            this.#emit(null);
-    }
-    reset() {
-        this.#emit(null);
-    }
-    #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" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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"] }]
-        }] });
-
 class PropertySelectComponent {
     constructor() {
         this.system = inject(SystemService);
@@ -1328,6 +1339,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             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"] }]
         }] });
 
+class IconSelectComponent {
+    constructor() {
+        this.objectType = input();
+        this.iconSelect = output();
+    }
+    async createIcon(inputEl) {
+        const file = inputEl.files ? inputEl.files[0] : undefined;
+        if (file) {
+            const text = await file.text();
+            this.#emit(text);
+        }
+        else
+            this.#emit(null);
+    }
+    reset() {
+        this.#emit(null);
+    }
+    #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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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"] }]
+        }] });
+
 /**
  * Component for setting up a tile config
  */
@@ -1497,7 +1536,7 @@ class TileConfigComponent {
                 label: field.label,
                 propertyName: field.id
             }
-            : undefined;
+            : null;
         this.objectConfig = structuredClone({
             ...this.objectConfig,
             ...p