@yuuvis/client-framework 3.0.0-beta.21.2 → 3.0.0

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

@@ -1,16 +1,17 @@
 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 i3 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 i4 from '@angular/material/tooltip';
+import { MatTooltip, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule } from '@angular/material/tooltip';
 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 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 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 i1 from '@yuuvis/client-framework/list';
 import { YuvListModule } from '@yuuvis/client-framework/list';
@@ -18,68 +19,47 @@ 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';
-import { switchMap } from 'rxjs';
+import { switchMap, forkJoin, take } from 'rxjs';
+import { NgClass } 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 { TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { DialogComponent } from '@yuuvis/client-framework/common';
-import { NgClass } from '@angular/common';
 import { ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
-import { TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
 
 class TileActionsMenuComponent {
     constructor() {
         this.actions = input.required(...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         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: "21.2.9", ngImport: i0, type: TileActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: "21.2.9", 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: "21.2.9", 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"] }]
-        }], 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 }] }] } });
+            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"] }]
+        }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], matMenu: [{ type: i0.ViewChild, args: ['menuRef', { isSignal: true }] }] } });
 
 class TileExtensionService {
     constructor() {
@@ -206,6 +186,7 @@ class TileListComponent {
     #objectConfigService;
     #destroyRef;
     #elRef;
+    #cdr;
     #actionService;
     #dmsService;
     #busy;
@@ -217,6 +198,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
@@ -544,7 +526,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
@@ -754,6 +736,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
@@ -908,6 +892,7 @@ class TileListComponent {
             return { index: idx, value };
         })
             .filter((update) => update !== undefined);
+        this.#resolveInlineActionsDisabledState(updates.map((u) => u.value));
         this.updateListItems(updates);
     }
     /**
@@ -1007,9 +992,23 @@ class TileListComponent {
                 .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)
@@ -1198,7 +1197,7 @@ class TileListComponent {
     #preselectEffect;
     #closeMenuEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: 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: "21.2.9", ngImport: i0, type: TileListComponent, decorators: [{
             type: Component,
@@ -1216,7 +1215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[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: () => [], 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 {
@@ -1238,34 +1237,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             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(...(ngDevMode ? [undefined, { debugName: "objectType" }] : /* istanbul ignore next */ []));
-        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: "21.2.9", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: IconSelectComponent, decorators: [{
-            type: Component,
-            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() {
         this.system = inject(SystemService);
@@ -1365,6 +1336,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, 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"] }] } });
 
+class IconSelectComponent {
+    constructor() {
+        this.objectType = input(...(ngDevMode ? [undefined, { debugName: "objectType" }] : /* istanbul ignore next */ []));
+        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: "21.2.9", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: IconSelectComponent, decorators: [{
+            type: Component,
+            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"] }] } });
+
 /**
  * Component for setting up a tile config
  */