npm - @yuuvis/client-framework - Versions diffs - 1.0.3 → 2.0.0-beta.10 - Mend

@yuuvis/client-framework 1.0.3 → 2.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (389) hide show

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

@@ -1,24 +1,30 @@
 import { NgClass, NgStyle, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, ViewContainerRef, input, effect, Directive, ElementRef, computed, Component, DestroyRef, contentChild, viewChildren, signal, output, untracked, HostListener, HostBinding, viewChild } from '@angular/core';
-import * as i1$1 from '@yuuvis/client-core';
+import { Injectable, inject, ViewContainerRef, input, effect, Directive, ElementRef, computed, Component, DestroyRef, contentChild, viewChildren, signal, output, untracked, HostBinding, HostListener, viewChild } from '@angular/core';
+import * as i1$2 from '@yuuvis/client-core';
 import { DmsService, ObjectConfigService, SystemService, SearchService, DeviceService, EventService, YuvEventType, BaseObjectTypeField, DmsObject, TranslateModule, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
-import { ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective } from '@yuuvis/client-framework/common';
+import { ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective, DialogComponent } from '@yuuvis/client-framework/common';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { ActionsService } from '@yuuvis/client-framework/actions';
 import { RendererDirective } from '@yuuvis/client-framework/renderer';
-import * as i1 from '@yuuvis/components/icon';
-import { YvcIconModule, ICONS } from '@yuuvis/components/icon';
 import { switchMap, Subscription, finalize } from 'rxjs';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { YUV_ICONS, ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
+import { YUV_ICONS, YuvIconComponent, ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
+import * as i3 from '@yuuvis/client-framework/list';
+import { ListItemDirective, YuvListModule } from '@yuuvis/client-framework/list';
 import { PaginationComponent } from '@yuuvis/client-framework/pagination';
-import { YvcOverlayModule, YvcOverlayService } from '@yuuvis/components/overlay';
-import { ListItemDirective, ListComponent } from '@yuuvis/client-framework/list';
-import * as i1$2 from '@yuuvis/components/split-view';
-import { YvcSplitViewModule } from '@yuuvis/components/split-view';
+import { YuvMatIconRegistry } from '@yuuvis/material';
+import { MatDialogModule, MatDialog } from '@angular/material/dialog';
+import * as i1$3 from '@yuuvis/client-framework/split-view';
+import { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';
 import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
 class TileExtensionService {
@@ -44,10 +50,10 @@ class TileExtensionService {
     getTileExtension(typeId) {
         return this._extensions[typeId];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileExtensionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileExtensionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileExtensionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileExtensionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -77,10 +83,10 @@ class TileExtensionDirective {
         this.component = this.#containerRef.createComponent(ext.cmp);
         this.component.setInput('data', data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: TileExtensionDirective, isStandalone: true, selector: "[yuvTileExtension]", inputs: { yuvTileExtension: { classPropertyName: "yuvTileExtension", publicName: "yuvTileExtension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileExtensionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileExtensionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvTileExtension]',
@@ -91,15 +97,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class TileComponent {
     constructor() {
         this.elRef = inject(ElementRef);
-        this.dmsService = inject(DmsService);
-        this.actionService = inject(ActionsService);
+        this.#dmsService = inject(DmsService);
+        this.#actionService = inject(ActionsService);
         this.tile = input.required();
         this.actionContext = input();
         this.actions = computed(() => {
             const actionsList = [];
             if (this.tile().actions?.length) {
                 this.tile().actions?.forEach((a) => {
-                    const aa = this.actionService.getActionById(a.id, this.actionContext());
+                    const aa = this.#actionService.getActionById(a.id, this.actionContext());
                     if (aa)
                         actionsList.push(aa);
                 });
@@ -116,20 +122,24 @@ class TileComponent {
             };
         });
     }
+    #dmsService;
+    #actionService;
     executeAction(a, evt) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.dmsService
+        this.#dmsService
             .getDmsObject(this.tile().id)
             .pipe(switchMap((o) => a.run([o])))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TileComponent, isStandalone: true, selector: "yuv-tile", inputs: { tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: true, transformFunction: null }, actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div data-slot=\"icon\">\n  <ng-container *yuvRenderer=\"rendererInputs().icon\"></ng-container>\n</div>\n\n<div class=\"slots\">\n  <div data-slot=\"title\">\n    <ng-container *yuvRenderer=\"rendererInputs().title\"></ng-container>\n  </div>\n  \n  <div data-slot=\"actions\">\n    @for (a of actions(); track a.id) {\n      <button [title]=\"a.label\" (click)=\"executeAction(a, $event)\"><yvc-icon inert=\"true\" [svg]=\"a.icon\"></yvc-icon></button>\n    }\n  </div>\n  \n  <div data-slot=\"description\">\n    <ng-container *yuvRenderer=\"rendererInputs().description\"></ng-container>\n  </div>\n  \n  <div data-slot=\"aside\">\n    <ng-container *yuvRenderer=\"rendererInputs().aside\"></ng-container>\n  </div>\n  \n  <div data-slot=\"meta\">\n    <ng-container *yuvRenderer=\"rendererInputs().meta\"></ng-container>\n  </div>\n  \n  <div data-slot=\"badges\">{{ tile().badges }}</div>\n  \n  <div class=\"extension\">\n    <ng-container *yuvTileExtension=\"{ typeId: tile().objectTypeId, data: tile().instanceData }\"></ng-container>\n  </div>\n</div>\n", styles: [":host{--_tile-background: var(--tile-background, transparent);--_tile-icon-fill: var(--tile-icon-fill, currentColor);--_tile-padding: var(--tile-padding, var(--app-pane-padding));--_tile-action-icon-size: var(--tile-action-icon-size);--_tile-icon-size: var(--tile-icon-size);--_transition-duration: var(--transition-duration, .1s);display:flex;align-items:center;background-color:var(--_tile-background);padding:var(--_tile-padding);transition:background-color var(--_transition-duration)}:host .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:1fr repeat(2,auto);grid-template-areas:\"title title actions\" \"description aside aside\" \"meta meta badges\" \"ext ext ext\";flex:1}:host [data-slot]{align-items:center;-webkit-user-select:none;user-select:none;display:grid}:host [data-slot=icon]{--icon-renderer-icon-size: var(--_tile-icon-size);color:var(--_tile-icon-fill);width:3rem;grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{font-weight:700;grid-area:title}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{opacity:0;transition:opacity var(--_transition-duration);pointer-events:none}:host:hover [data-slot=actions]{opacity:1;pointer-events:all}:host [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=actions] button yvc-icon{--icon-size: var(--_tile-action-icon-size)}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .extension{grid-area:ext}\n"], dependencies: [{ kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TileComponent, isStandalone: true, selector: "yuv-tile", inputs: { tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: true, transformFunction: null }, actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div data-slot=\"icon\">\n  <ng-container *yuvRenderer=\"rendererInputs().icon\"></ng-container>\n</div>\n\n<div class=\"slots\">\n  <div data-slot=\"title-description\">\n    <div data-slot=\"title\">\n      <ng-container *yuvRenderer=\"rendererInputs().title\"></ng-container>\n    </div>\n    <div data-slot=\"description\">\n      <ng-container *yuvRenderer=\"rendererInputs().description\"></ng-container>\n    </div>\n  </div>\n\n  <div data-slot=\"actions\">\n    @for (a of actions(); track a.id) {\n      <button mat-icon-button [matTooltip]=\"a.label\" (click)=\"executeAction(a, $event)\">\n        <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div data-slot=\"aside\">\n    <ng-container *yuvRenderer=\"rendererInputs().aside\"></ng-container>\n  </div>\n\n  <div data-slot=\"meta\">\n    <ng-container *yuvRenderer=\"rendererInputs().meta\"></ng-container>\n  </div>\n\n  <div data-slot=\"badges\">{{ tile().badges }}</div>\n\n  <div class=\"extension\">\n    <ng-container *yuvTileExtension=\"{ typeId: tile().objectTypeId, data: tile().instanceData }\"></ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;background-color:var(--tile-background, transparent);padding:var(--tile-padding, var(--ymt-spacing-s) var(--ymt-spacing-l));transition:background-color var(--transition-duration, .1s);position:relative;color:var(--ymt-text-color)}:host .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:auto;grid-template-areas:\"title-description title-description actions\" \"meta meta aside\" \"badges badges badges\" \"ext ext ext\";flex:1}:host:hover:not([aria-selected=true]){--tile-background: var(--ymt-hover-background)}:host[aria-selected=true]{--tile-background: var(--ymt-selection-background)}:host[aria-current=true]{--tile-background: var(--ymt-focus-background)}:host[aria-current=true]:not([aria-selected=true]){--tile-border: 2px solid var(--ymt-outline)}:host [data-slot]{-webkit-user-select:none;user-select:none;display:grid;align-self:baseline;word-break:break-word}:host [data-slot=icon]{--icon-renderer-icon-size: var(--tile-icon-size);width:3rem;grid-area:icon;display:flex;align-self:flex-start}:host [data-slot=title-description]{grid-area:title-description;display:grid;grid-template-areas:\"title\" \"description\";align-self:flex-start}:host [data-slot=title]{font:var(--tile-font-title, var(--ymt-font-title-small));grid-area:title;align-self:flex-start}:host [data-slot=description]{grid-area:description;font:var(--tile-font-description, var(--ymt-font-body));color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) 0}:host [data-slot=meta]{grid-area:meta;font:var(--tile-font-meta, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) 0}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside;font:var(--tile-font-aside, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);justify-content:flex-end;text-align:right;--tile-slot-padding: var(--ymt-spacing-2xs) 0 var(--ymt-spacing-2xs) var(--ymt-spacing-2xs)}:host [data-slot=actions]{opacity:.2;transition:opacity var(--_transition-duration);pointer-events:none;display:flex;justify-content:flex-end;padding-block-end:var(--ymt-spacing-2xs);gap:var(--ymt-spacing-3xs)}:host:hover [data-slot=actions]{opacity:1;pointer-events:all}:host [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host [data-slot=actions] button{gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .extension{grid-area:ext}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: TileExtensionDirective, selector: "[yuvTileExtension]", inputs: ["yuvTileExtension"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile', standalone: true, imports: [YvcIconModule, RendererDirective, TileExtensionDirective], template: "<div data-slot=\"icon\">\n  <ng-container *yuvRenderer=\"rendererInputs().icon\"></ng-container>\n</div>\n\n<div class=\"slots\">\n  <div data-slot=\"title\">\n    <ng-container *yuvRenderer=\"rendererInputs().title\"></ng-container>\n  </div>\n  \n  <div data-slot=\"actions\">\n    @for (a of actions(); track a.id) {\n      <button [title]=\"a.label\" (click)=\"executeAction(a, $event)\"><yvc-icon inert=\"true\" [svg]=\"a.icon\"></yvc-icon></button>\n    }\n  </div>\n  \n  <div data-slot=\"description\">\n    <ng-container *yuvRenderer=\"rendererInputs().description\"></ng-container>\n  </div>\n  \n  <div data-slot=\"aside\">\n    <ng-container *yuvRenderer=\"rendererInputs().aside\"></ng-container>\n  </div>\n  \n  <div data-slot=\"meta\">\n    <ng-container *yuvRenderer=\"rendererInputs().meta\"></ng-container>\n  </div>\n  \n  <div data-slot=\"badges\">{{ tile().badges }}</div>\n  \n  <div class=\"extension\">\n    <ng-container *yuvTileExtension=\"{ typeId: tile().objectTypeId, data: tile().instanceData }\"></ng-container>\n  </div>\n</div>\n", styles: [":host{--_tile-background: var(--tile-background, transparent);--_tile-icon-fill: var(--tile-icon-fill, currentColor);--_tile-padding: var(--tile-padding, var(--app-pane-padding));--_tile-action-icon-size: var(--tile-action-icon-size);--_tile-icon-size: var(--tile-icon-size);--_transition-duration: var(--transition-duration, .1s);display:flex;align-items:center;background-color:var(--_tile-background);padding:var(--_tile-padding);transition:background-color var(--_transition-duration)}:host .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:1fr repeat(2,auto);grid-template-areas:\"title title actions\" \"description aside aside\" \"meta meta badges\" \"ext ext ext\";flex:1}:host [data-slot]{align-items:center;-webkit-user-select:none;user-select:none;display:grid}:host [data-slot=icon]{--icon-renderer-icon-size: var(--_tile-icon-size);color:var(--_tile-icon-fill);width:3rem;grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{font-weight:700;grid-area:title}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{opacity:0;transition:opacity var(--_transition-duration);pointer-events:none}:host:hover [data-slot=actions]{opacity:1;pointer-events:all}:host [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=actions] button yvc-icon{--icon-size: var(--_tile-action-icon-size)}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .extension{grid-area:ext}\n"] }]
+            args: [{ selector: 'yuv-tile', standalone: true, imports: [MatIconModule,
+                        MatTooltipModule,
+                        MatButtonModule, RendererDirective, TileExtensionDirective], template: "<div data-slot=\"icon\">\n  <ng-container *yuvRenderer=\"rendererInputs().icon\"></ng-container>\n</div>\n\n<div class=\"slots\">\n  <div data-slot=\"title-description\">\n    <div data-slot=\"title\">\n      <ng-container *yuvRenderer=\"rendererInputs().title\"></ng-container>\n    </div>\n    <div data-slot=\"description\">\n      <ng-container *yuvRenderer=\"rendererInputs().description\"></ng-container>\n    </div>\n  </div>\n\n  <div data-slot=\"actions\">\n    @for (a of actions(); track a.id) {\n      <button mat-icon-button [matTooltip]=\"a.label\" (click)=\"executeAction(a, $event)\">\n        <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div data-slot=\"aside\">\n    <ng-container *yuvRenderer=\"rendererInputs().aside\"></ng-container>\n  </div>\n\n  <div data-slot=\"meta\">\n    <ng-container *yuvRenderer=\"rendererInputs().meta\"></ng-container>\n  </div>\n\n  <div data-slot=\"badges\">{{ tile().badges }}</div>\n\n  <div class=\"extension\">\n    <ng-container *yuvTileExtension=\"{ typeId: tile().objectTypeId, data: tile().instanceData }\"></ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;background-color:var(--tile-background, transparent);padding:var(--tile-padding, var(--ymt-spacing-s) var(--ymt-spacing-l));transition:background-color var(--transition-duration, .1s);position:relative;color:var(--ymt-text-color)}:host .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:auto;grid-template-areas:\"title-description title-description actions\" \"meta meta aside\" \"badges badges badges\" \"ext ext ext\";flex:1}:host:hover:not([aria-selected=true]){--tile-background: var(--ymt-hover-background)}:host[aria-selected=true]{--tile-background: var(--ymt-selection-background)}:host[aria-current=true]{--tile-background: var(--ymt-focus-background)}:host[aria-current=true]:not([aria-selected=true]){--tile-border: 2px solid var(--ymt-outline)}:host [data-slot]{-webkit-user-select:none;user-select:none;display:grid;align-self:baseline;word-break:break-word}:host [data-slot=icon]{--icon-renderer-icon-size: var(--tile-icon-size);width:3rem;grid-area:icon;display:flex;align-self:flex-start}:host [data-slot=title-description]{grid-area:title-description;display:grid;grid-template-areas:\"title\" \"description\";align-self:flex-start}:host [data-slot=title]{font:var(--tile-font-title, var(--ymt-font-title-small));grid-area:title;align-self:flex-start}:host [data-slot=description]{grid-area:description;font:var(--tile-font-description, var(--ymt-font-body));color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) 0}:host [data-slot=meta]{grid-area:meta;font:var(--tile-font-meta, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) 0}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside;font:var(--tile-font-aside, var(--ymt-font-body-subtle));color:var(--ymt-text-color-subtle);justify-content:flex-end;text-align:right;--tile-slot-padding: var(--ymt-spacing-2xs) 0 var(--ymt-spacing-2xs) var(--ymt-spacing-2xs)}:host [data-slot=actions]{opacity:.2;transition:opacity var(--_transition-duration);pointer-events:none;display:flex;justify-content:flex-end;padding-block-end:var(--ymt-spacing-2xs);gap:var(--ymt-spacing-3xs)}:host:hover [data-slot=actions]{opacity:1;pointer-events:all}:host [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host [data-slot=actions] button{gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .extension{grid-area:ext}\n"] }]
         }] });
 /**
@@ -177,12 +187,12 @@ class TileListComponent {
     onCopy(event) {
         event.preventDefault();
         if (this._selection.length)
-            this.copy.emit(this._selectionToTileData());
+            this.tileCopy.emit(this._selectionToTileData());
     }
     onCut(event) {
         event.preventDefault();
         if (this._selection.length)
-            this.cut.emit(this._selectionToTileData());
+            this.tileCut.emit(this._selectionToTileData());
     }
     onKeydown(event) {
         switch (event.code) {
@@ -285,8 +295,8 @@ class TileListComponent {
          * Emitted when a list item has been selected
          */
         this.itemSelect = output();
-        this.copy = output();
-        this.cut = output();
+        this.tileCopy = output();
+        this.tileCut = output();
         this.busy = output();
         this.queryResult = output();
         /**
@@ -335,7 +345,7 @@ class TileListComponent {
             this._keyManager.setActiveItem(-1);
         this._selection = sel;
         this._selection.sort();
-        this.listItems().forEach((item, i) => (item.selected = this._selection.includes(i)));
+        this.listItems().forEach((item, i) => item.selectedInput.set(this._selection.includes(i)));
     }
     onDragSelect(sel) {
         this.#elRef.nativeElement.focus();
@@ -366,7 +376,7 @@ class TileListComponent {
         if (this._selection.length) {
             this._selection = [];
             this._keyManager.setActiveItem(-1);
-            this.listItems().forEach((item, i) => (item.selected = false));
+            this.listItems().forEach((item) => item.selectedInput.set(false));
             if (!silent)
                 this.selectionChange.emit([]);
         }
@@ -438,7 +448,7 @@ class TileListComponent {
         }
         this._lastSelection = this._selection.length === 0 ? undefined : index;
         this._selection.sort();
-        this.listItems().forEach((item, i) => (item.selected = this._selection.includes(i)));
+        this.listItems().forEach((item, i) => item.selectedInput.set(this._selection.includes(i)));
         const tiles = this._selectionToTileData();
         this.selectionChange.emit(tiles);
         tiles.length === 1 && this.itemSelect.emit(tiles[0]);
@@ -495,8 +505,9 @@ class TileListComponent {
             cfgTypes.forEach((cft) => {
                 const matchesType = !cft.objectType || cft.objectType === dmsObject.objectTypeId;
                 const matchesSOTs = !cft.sots || !cft.sots.length || cft.sots.every((sot) => sots.includes(sot));
-                if (matchesType && matchesSOTs)
+                if (matchesType && matchesSOTs) {
                     oc = this.oc[cft.id];
+                }
             });
             // only apply a flavor if the object has that SOT
             const ownAppliedFlavor = this.appliedFlavor && sots.includes(this.appliedFlavor.sot) && this.oc[this.appliedFlavor.sot];
@@ -518,7 +529,8 @@ class TileListComponent {
                 ? {
                     rendererType: 'icon',
                     propertyName: 'custom',
-                    value: oc.icon.svg
+                    value: oc.icon.svg,
+                    meta: { isFontIcon: YuvMatIconRegistry.isFontIcon(oc.icon.svg), objectTypeId: '' }
                 }
                 : {
                     rendererType: 'icon',
@@ -584,10 +596,10 @@ class TileListComponent {
         this._keyManager?.destroy();
         this.searchResultSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", 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 } }, outputs: { itemSelect: "itemSelect", copy: "copy", cut: "cut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tiles\"\n  [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n>\n  @for (i of items; track i.id) {\n    <yuv-tile\n      yuvDragSelectItem\n      yuvListItem\n      [style.--i]=\"$index\"\n      [attr.aria-selected]=\"selection().includes(i.id)\"\n      (click.single)=\"select(i, $event)\"\n      (click.double)=\"itemDblClick.emit(i)\"\n      [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n      [actionContext]=\"options()?.actionContext\"\n      [tile]=\"i\"\n      [ngStyle]=\"highlightStyles()[i.id]\"\n      (contextmenu)=\"contextMenuHandler($event, $index)\"\n    ></yuv-tile>\n  } @empty {\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  }\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n  <yuv-pagination [pagination]=\"pagination\" (pageChange)=\"goToPage($event)\"></yuv-pagination>\n}\n", styles: [":host{--_tile-hover-background: var(--tile-hover-background, var(--item-focus-background-color));--_tile-selected-background: var(--tile-selected-background, var(--item-selected-background-color));--_tile-selected-icon-fill: var(--tile-selected-icon-fill, var(--color-accent));--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--tile-slot-padding: 2px;--staggered-animation-duration: .2s;--paging-button-size: 18px;--paging-margin: calc(var(--app-pane-padding) / 2);--paging-padding: calc(var(--app-pane-padding) / 4);display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;display:flex;flex-flow:column}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host yuv-pagination{z-index:2;grid-column:2/-2;grid-row:2/-2;border:1px solid var(--panel-divider-color);animation:fade-in-up .2s ease-in-out forwards}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host yuv-tile:hover,:host yuv-tile[aria-current=true]{--tile-background: var(--_tile-hover-background)}:host yuv-tile[aria-selected=true]{--tile-background: var(--_tile-selected-background);--tile-icon-fill: var(--_tile-selected-icon-fill)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}@keyframes fade-in-up{0%{opacity:0;transform:translateY(var(--paging-margin))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TileComponent, selector: "yuv-tile", inputs: ["tile", "actionContext"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YvcOverlayModule }, { kind: "component", type: PaginationComponent, selector: "yuv-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "directive", type: ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", 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 } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tiles\"\n  [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n>\n  @for (i of items; track i.id) {\n    <yuv-tile\n      yuvDragSelectItem\n      yuvListItem\n      [attr.aria-selected]=\"selection().includes(i.id)\"\n      (click.single)=\"select(i, $event)\"\n      (click.double)=\"itemDblClick.emit(i)\"\n      [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n      [actionContext]=\"options()?.actionContext\"\n      [tile]=\"i\"\n      [ngStyle]=\"highlightStyles()[i.id]\"\n      (contextmenu)=\"contextMenuHandler($event, $index)\"\n    ></yuv-tile>\n  } @empty {\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  }\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n  <yuv-pagination [pagination]=\"pagination\" (pageChange)=\"goToPage($event)\"></yuv-pagination>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--paging-button-size: 18px;--paging-margin: var(--ymt-spacing-xs);--paging-padding: var(--ymt-spacing-2xs);position:relative;display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;padding-block:var(--ymt-spacing-s);display:flex;flex-flow:column}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host yuv-pagination{z-index:2;grid-column:2/-2;grid-row:2/-2;border:1px solid var(--ymt-outline-variant)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TileComponent, selector: "yuv-tile", inputs: ["tile", "actionContext"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PaginationComponent, selector: "yuv-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "directive", type: i3.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-tile-list', standalone: true, providers: [], imports: [
                         NgClass,
@@ -595,17 +607,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TileComponent,
                         TranslateModule,
                         ReactiveFormsModule,
-                        YvcOverlayModule,
                         PaginationComponent,
-                        YvcIconModule,
-                        ListItemDirective,
+                        YuvListModule,
                         ClickDoubleDirective,
                         DragSelectDirective,
                         DragSelectItemDirective
                     ], host: {
                         tabindex: '0',
                         role: 'listbox'
-                    }, template: "<div\n  class=\"tiles\"\n  [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n>\n  @for (i of items; track i.id) {\n    <yuv-tile\n      yuvDragSelectItem\n      yuvListItem\n      [style.--i]=\"$index\"\n      [attr.aria-selected]=\"selection().includes(i.id)\"\n      (click.single)=\"select(i, $event)\"\n      (click.double)=\"itemDblClick.emit(i)\"\n      [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n      [actionContext]=\"options()?.actionContext\"\n      [tile]=\"i\"\n      [ngStyle]=\"highlightStyles()[i.id]\"\n      (contextmenu)=\"contextMenuHandler($event, $index)\"\n    ></yuv-tile>\n  } @empty {\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  }\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n  <yuv-pagination [pagination]=\"pagination\" (pageChange)=\"goToPage($event)\"></yuv-pagination>\n}\n", styles: [":host{--_tile-hover-background: var(--tile-hover-background, var(--item-focus-background-color));--_tile-selected-background: var(--tile-selected-background, var(--item-selected-background-color));--_tile-selected-icon-fill: var(--tile-selected-icon-fill, var(--color-accent));--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--tile-slot-padding: 2px;--staggered-animation-duration: .2s;--paging-button-size: 18px;--paging-margin: calc(var(--app-pane-padding) / 2);--paging-padding: calc(var(--app-pane-padding) / 4);display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;display:flex;flex-flow:column}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host yuv-pagination{z-index:2;grid-column:2/-2;grid-row:2/-2;border:1px solid var(--panel-divider-color);animation:fade-in-up .2s ease-in-out forwards}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host yuv-tile:hover,:host yuv-tile[aria-current=true]{--tile-background: var(--_tile-hover-background)}:host yuv-tile[aria-selected=true]{--tile-background: var(--_tile-selected-background);--tile-icon-fill: var(--_tile-selected-icon-fill)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}@keyframes fade-in-up{0%{opacity:0;transform:translateY(var(--paging-margin))}to{opacity:1;transform:translateY(0)}}\n"] }]
+                    }, template: "<div\n  class=\"tiles\"\n  [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n>\n  @for (i of items; track i.id) {\n    <yuv-tile\n      yuvDragSelectItem\n      yuvListItem\n      [attr.aria-selected]=\"selection().includes(i.id)\"\n      (click.single)=\"select(i, $event)\"\n      (click.double)=\"itemDblClick.emit(i)\"\n      [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n      [actionContext]=\"options()?.actionContext\"\n      [tile]=\"i\"\n      [ngStyle]=\"highlightStyles()[i.id]\"\n      (contextmenu)=\"contextMenuHandler($event, $index)\"\n    ></yuv-tile>\n  } @empty {\n    <div class=\"empyt-list\">\n      @if (searchExecuted && emptyContent()) {\n        <ng-content></ng-content>\n      }\n    </div>\n  }\n  <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n  <yuv-pagination [pagination]=\"pagination\" (pageChange)=\"goToPage($event)\"></yuv-pagination>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: none;--tile-border-width: 1px;--tile-icon-size: initial;--paging-button-size: 18px;--paging-margin: var(--ymt-spacing-xs);--paging-padding: var(--ymt-spacing-2xs);position:relative;display:grid;grid-template-rows:1fr auto var(--paging-margin);grid-template-columns:var(--paging-margin) 1fr var(--paging-margin)}:host.pagination yuv-tile.last{margin-block-end:calc(var(--paging-margin) * 2 + var(--paging-padding) * 2 + var(--paging-button-size))}:host .tiles{grid-column:1/-1;grid-row:1/-1;overflow-y:auto;padding-block:var(--ymt-spacing-s);display:flex;flex-flow:column}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host yuv-pagination{z-index:2;grid-column:2/-2;grid-row:2/-2;border:1px solid var(--ymt-outline-variant)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onContextMenu: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
@@ -637,12 +647,12 @@ class ActionSelectComponent {
         this.selectedActionIds = input([]);
         this.actionSelect = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n  @for (a of actions(); track a.id) {\n    <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n      <yvc-icon [svg]=\"a.icon!\"></yvc-icon>{{ a.label }}\n    </button>\n  }\n</div>\n", styles: [":host .actions button{width:100%;border:1px solid var(--panel-divider-color);border-radius:0;margin-block-end:1px}:host .actions button.selected{background-color:var(--color-accent);color:var(--color-accent-tone)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: ActionSelectComponent, isStandalone: true, selector: "yuv-tile-action-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: true, transformFunction: null }, selectedActionIds: { classPropertyName: "selectedActionIds", publicName: "selectedActionIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect" }, ngImport: i0, template: "<div class=\"actions\">\n  @for (a of actions(); track a.id) {\n    <button [ngClass]=\"{ selected: selectedActionIds().includes(a.id) }\" (click)=\"actionSelect.emit(a)\">\n      <mat-icon>{{ a.icon }}</mat-icon\n      >{{ a.label }}\n    </button>\n  }\n</div>\n", styles: [":host .actions button{width:100%;border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px}:host .actions button.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ActionSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-action-select', standalone: true, imports: [NgClass, YvcIconModule], 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      <yvc-icon [svg]=\"a.icon!\"></yvc-icon>{{ a.label }}\n    </button>\n  }\n</div>\n", styles: [":host .actions button{width:100%;border:1px solid var(--panel-divider-color);border-radius:0;margin-block-end:1px}:host .actions button.selected{background-color:var(--color-accent);color:var(--color-accent-tone)}\n"] }]
+            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 button{width:100%;border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px}:host .actions button.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}\n"] }]
         }] });
 class IconSelectComponent {
@@ -665,12 +675,12 @@ class IconSelectComponent {
     #emit(data) {
         this.iconSelect.emit(data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", 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(--app-pane-padding)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", 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$2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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(--app-pane-padding)}\n"] }]
+            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 {
@@ -695,7 +705,6 @@ class PropertySelectComponent {
             ContentStreamField.RANGE
         ];
         this.objectTypeFields = [];
-        this.clearIcon = ICONS.clear;
         this.query = signal(null);
         this.objectType = input();
         this.filteredObjectTypeFields = computed(() => {
@@ -749,12 +758,13 @@ class PropertySelectComponent {
     _getLabel(otf) {
         return this.system.getLocalizedLabel(otf.id) || otf.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yvc-icon [svg]=\"clearIcon\"></yvc-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n      <div class=\"label\">{{ p.label }}</div>\n      <button (click)=\"removeProperty($event)\"><yvc-icon [svg]=\"clearIcon\"></yvc-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(--panel-background);border:1px solid var(--panel-divider-color);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--text-color-body)}:host .filter .filter-input button{width:1.5em;height:1.5em;border-radius:50%;padding:0}:host ul.properties{list-style:none;margin:0;padding:0;flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--text-color-hint);column-gap:2em;margin-block-start:var(--app-pane-padding)}:host ul.properties li{border:1px solid var(--panel-divider-color);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host ul.properties li:hover{background-color:var(--item-focus-background-color)}:host ul.properties li.baseProperty{font-style:italic}:host ul.properties li.selected{background-color:var(--color-accent);color:var(--color-accent-tone)}:host ul.properties li:not(.selected) button{display:none}:host ul.properties li .label{padding:calc(var(--app-pane-padding) / 2) var(--app-pane-padding)}:host ul.properties li button{--icon-size: 18px;color:currentColor;padding:0 calc(var(--app-pane-padding) / 2);align-self:stretch}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n      <div class=\"label\">{{ p.label }}</div>\n      <button mat-icon-button (click)=\"removeProperty($event)\">\n        <mat-icon>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 ul.properties{list-style:none;margin:0;padding:0;flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-text-color-subtle);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host ul.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 ul.properties li:hover{background-color:var(--ymt-hover-background)}:host ul.properties li.baseProperty{font-style:italic}:host ul.properties li.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host ul.properties li:not(.selected) button{display:none}:host ul.properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PropertySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, TranslateModule, YvcIconModule], 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        <yvc-icon [svg]=\"clearIcon\"></yvc-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n      <div class=\"label\">{{ p.label }}</div>\n      <button (click)=\"removeProperty($event)\"><yvc-icon [svg]=\"clearIcon\"></yvc-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(--panel-background);border:1px solid var(--panel-divider-color);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--text-color-body)}:host .filter .filter-input button{width:1.5em;height:1.5em;border-radius:50%;padding:0}:host ul.properties{list-style:none;margin:0;padding:0;flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--text-color-hint);column-gap:2em;margin-block-start:var(--app-pane-padding)}:host ul.properties li{border:1px solid var(--panel-divider-color);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host ul.properties li:hover{background-color:var(--item-focus-background-color)}:host ul.properties li.baseProperty{font-style:italic}:host ul.properties li.selected{background-color:var(--color-accent);color:var(--color-accent-tone)}:host ul.properties li:not(.selected) button{display:none}:host ul.properties li .label{padding:calc(var(--app-pane-padding) / 2) var(--app-pane-padding)}:host ul.properties li button{--icon-size: 18px;color:currentColor;padding:0 calc(var(--app-pane-padding) / 2);align-self:stretch}\n"] }]
+            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 [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\" (click)=\"selectProperty(p)\">\n      <div class=\"label\">{{ p.label }}</div>\n      <button mat-icon-button (click)=\"removeProperty($event)\">\n        <mat-icon>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 ul.properties{list-style:none;margin:0;padding:0;flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-text-color-subtle);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host ul.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 ul.properties li:hover{background-color:var(--ymt-hover-background)}:host ul.properties li.baseProperty{font-style:italic}:host ul.properties li.selected{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host ul.properties li:not(.selected) button{display:none}:host ul.properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}\n"] }]
         }] });
 /**
@@ -807,12 +817,14 @@ class TileConfigTileComponent {
                 e.classList.remove('active');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, objectConfigInput: { classPropertyName: "objectConfigInput", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = objectConfig();\n\n<div data-slot=\"icon\" [attr.disabled]=\"disableIconSlot()\" (click)=\"selectSlot('icon')\">\n  @if (oc.icon) {\n    <yvc-icon [svg]=\"oc.icon.svg\"></yvc-icon>\n  } @else {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div data-slot=\"title\" (click)=\"selectSlot('title')\">{{ oc.title?.label }}</div>\n<div data-slot=\"actions\" (click)=\"selectSlot('actions')\">\n  @for (a of actions(); track a.id) {\n    <button [title]=\"a.label\"><yvc-icon [svg]=\"a.icon\"></yvc-icon></button>\n  }\n</div>\n<div data-slot=\"description\" (click)=\"selectSlot('description')\">{{ oc.description?.label }}</div>\n<div data-slot=\"aside\" (click)=\"selectSlot('aside')\">{{ oc.aside?.label }}</div>\n<div data-slot=\"meta\" (click)=\"selectSlot('meta')\">{{ oc.meta?.label }}</div>\n@if (!disableBadgesSlot()) {\n  <div data-slot=\"badges\" (click)=\"selectSlot('badges')\">\n    <!-- {{ tile().badges }} -->\n    {{ oc.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--app-pane-padding);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--panel-background-grey);padding:.25em .5em;box-sizing:border-box;min-height:1.7em;border-radius:.25em}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active,:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--color-accent);color:var(--color-accent-tone)}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TileConfigTileComponent, isStandalone: true, selector: "yuv-tile-config-tile", inputs: { disableIconSlot: { classPropertyName: "disableIconSlot", publicName: "disableIconSlot", isSignal: true, isRequired: false, transformFunction: null }, disableBadgesSlot: { classPropertyName: "disableBadgesSlot", publicName: "disableBadgesSlot", isSignal: true, isRequired: false, transformFunction: null }, objectConfigInput: { classPropertyName: "objectConfigInput", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = objectConfig();\n\n<div data-slot=\"icon\" [attr.disabled]=\"disableIconSlot()\" (click)=\"selectSlot('icon')\">\n  @if (oc.icon) {\n    <yuv-icon [svg]=\"oc.icon.svg\"></yuv-icon>\n  } @else {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div data-slot=\"title\" (click)=\"selectSlot('title')\">{{ oc.title?.label }}</div>\n<div data-slot=\"actions\" (click)=\"selectSlot('actions')\">\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\">\n      <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div data-slot=\"description\" (click)=\"selectSlot('description')\">{{ oc.description?.label }}</div>\n<div data-slot=\"aside\" (click)=\"selectSlot('aside')\">{{ oc.aside?.label }}</div>\n<div data-slot=\"meta\" (click)=\"selectSlot('meta')\">{{ oc.meta?.label }}</div>\n@if (!disableBadgesSlot()) {\n  <div data-slot=\"badges\" (click)=\"selectSlot('badges')\">\n    <!-- {{ tile().badges }} -->\n    {{ oc.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);padding:.25em .5em;box-sizing:border-box;min-height:1.7em;border-radius:.25em}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active,:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"], dependencies: [{ kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileConfigTileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileConfigTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [YvcIconModule, CommonModule, ObjectTypeIconComponent], template: "@let oc = objectConfig();\n\n<div data-slot=\"icon\" [attr.disabled]=\"disableIconSlot()\" (click)=\"selectSlot('icon')\">\n  @if (oc.icon) {\n    <yvc-icon [svg]=\"oc.icon.svg\"></yvc-icon>\n  } @else {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div data-slot=\"title\" (click)=\"selectSlot('title')\">{{ oc.title?.label }}</div>\n<div data-slot=\"actions\" (click)=\"selectSlot('actions')\">\n  @for (a of actions(); track a.id) {\n    <button [title]=\"a.label\"><yvc-icon [svg]=\"a.icon\"></yvc-icon></button>\n  }\n</div>\n<div data-slot=\"description\" (click)=\"selectSlot('description')\">{{ oc.description?.label }}</div>\n<div data-slot=\"aside\" (click)=\"selectSlot('aside')\">{{ oc.aside?.label }}</div>\n<div data-slot=\"meta\" (click)=\"selectSlot('meta')\">{{ oc.meta?.label }}</div>\n@if (!disableBadgesSlot()) {\n  <div data-slot=\"badges\" (click)=\"selectSlot('badges')\">\n    <!-- {{ tile().badges }} -->\n    {{ oc.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--app-pane-padding);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--panel-background-grey);padding:.25em .5em;box-sizing:border-box;min-height:1.7em;border-radius:.25em}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active,:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--color-accent);color:var(--color-accent-tone)}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"] }]
+            args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [YuvIconComponent, MatButtonModule,
+                        MatTooltipModule,
+                        MatIconModule, CommonModule, ObjectTypeIconComponent], template: "@let oc = objectConfig();\n\n<div data-slot=\"icon\" [attr.disabled]=\"disableIconSlot()\" (click)=\"selectSlot('icon')\">\n  @if (oc.icon) {\n    <yuv-icon [svg]=\"oc.icon.svg\"></yuv-icon>\n  } @else {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\"></yuv-object-type-icon>\n  }\n</div>\n<div data-slot=\"title\" (click)=\"selectSlot('title')\">{{ oc.title?.label }}</div>\n<div data-slot=\"actions\" (click)=\"selectSlot('actions')\">\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\">\n      <mat-icon inert=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div data-slot=\"description\" (click)=\"selectSlot('description')\">{{ oc.description?.label }}</div>\n<div data-slot=\"aside\" (click)=\"selectSlot('aside')\">{{ oc.aside?.label }}</div>\n<div data-slot=\"meta\" (click)=\"selectSlot('meta')\">{{ oc.meta?.label }}</div>\n@if (!disableBadgesSlot()) {\n  <div data-slot=\"badges\" (click)=\"selectSlot('badges')\">\n    <!-- {{ tile().badges }} -->\n    {{ oc.badges }}\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);padding:.25em .5em;box-sizing:border-box;min-height:1.7em;border-radius:.25em}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]){cursor:pointer}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]).active,:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]):not([disabled]):hover{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"] }]
         }] });
 class TileConfigComponent {
@@ -849,15 +861,9 @@ class TileConfigComponent {
             badges: []
         };
         this.flavors = [];
-        this.icons = {
-            clear: ICONS.clear
-        };
     }
     #objectConfigService;
     #system;
-    // getObjectFlavorEffect = effect(() => {
-    //   this.flavors = this.configFlavors();
-    // });
     getConfigValue(p) {
         return this.objectConfig ? this.objectConfig[p] : undefined;
     }
@@ -936,60 +942,61 @@ class TileConfigComponent {
             this.#objectConfigService.saveObjectConfig(this.selectedType, this.objectConfig, this.bucket()).subscribe((_) => this.save.emit());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TileConfigComponent, isStandalone: true, selector: "yuv-tile-config", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, configTypes: { classPropertyName: "configTypes", publicName: "configTypes", isSignal: true, isRequired: false, transformFunction: null }, configFlavors: { classPropertyName: "configFlavors", publicName: "configFlavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: "<header>\n  <h1>{{ 'yuv.tile-config.title' | translate }}</h1>\n  <div class=\"bucket\">{{ bucketLabel() }}</div>\n  @if (cancel) {\n    <button class=\"icon\" (click)=\"cancel.emit()\">\n      <yvc-icon [svg]=\"icons.clear\"></yvc-icon>\n    </button>\n  }\n</header>\n\n<yvc-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n  <!-- list of types -->\n  <ng-template yvcSplitArea [size]=\"30\">\n    <div class=\"types\">\n      <yuv-list (itemSelect)=\"itemSelected($event)\">\n        @for (t of types() || []; track t.id) {\n          <div yuvListItem>\n            @if (t.icon) {\n              <yvc-icon [svg]=\"t.icon\"></yvc-icon>\n            } @else {\n              <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n            }\n            {{ t.id | translate }}\n          </div>\n        }\n      </yuv-list>\n    </div>\n  </ng-template>\n\n  <!-- selected type details-->\n  <ng-template yvcSplitArea [size]=\"70\">\n    <div class=\"details\">\n      @if (selectedType) {\n        <header>{{ selectedType.id | translate }}</header>\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile [disableIconSlot]=\"true\" [disableBadgesSlot]=\"true\" [objectConfig]=\"objectConfig!\" (slotSelect)=\"slotSelect($event)\"></yuv-tile-config-tile>\n        </div>\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h2>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h2>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n          } @else if (selectedSlot === 'badges') {\n            <div class=\"placeholder empty\">\n              <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n            </div>\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h2>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h2>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            ></yuv-tile-action-select>\n          } @else {\n            <h2>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h2>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            ></yuv-tile-property-select>\n          }\n        </main>\n        <footer>\n          <button class=\"primary\" (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n        </footer>\n      } @else {\n        <div class=\"placeholder empty\">\n          <h2>{{ 'yuv.tile-config.details.empty.title' | translate }}</h2>\n          <p>{{ 'yuv.tile-config.details.empty.description' | translate }}</p>\n        </div>\n      }\n    </div>\n  </ng-template>\n</yvc-split-view>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host header{flex:0 0 auto;display:grid;grid-template-rows:auto auto;grid-template-columns:1fr auto;grid-template-areas:\"title close\" \"bucket close\";padding:var(--app-pane-padding);border-block-end:1px solid var(--panel-divider-color)}:host header h1{grid-area:title;padding:0;margin:0 0 .5rem;font-size:var(--font-title);font-weight:400}:host header .bucket{grid-area:bucket}:host header button{grid-area:close;align-self:start;--icon-size: 18px}:host yvc-split-view{flex:1}:host .details{box-sizing:border-box}:host div.types{box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--panel-background-lightgrey)}:host div.types div[yuvListItem]{display:flex;gap:var(--app-pane-padding);align-items:center;padding:calc(var(--app-pane-padding) / 2) var(--app-pane-padding);cursor:pointer}:host div.types div[yuvListItem]:not([aria-selected=true]):hover,:host div.types div[yuvListItem]:not([aria-selected=true])[aria-current=true]{background-color:var(--item-focus-background-color)}:host div.types div[yuvListItem][aria-selected=true]{background-color:var(--color-accent);color:var(--color-accent-tone)}:host div.types div[yuvListItem] yvc-icon,:host div.types div[yuvListItem] yuv-object-type-icon{flex:0 0 auto;color:currentColor;opacity:.54}:host .details{height:100%;display:flex;flex-flow:column;overflow:hidden;background-color:var(--panel-background-lightgrey)}:host .details header{flex:0 0 auto;border-bottom:1px solid var(--panel-divider-color);padding:var(--app-pane-padding);font-size:var(--font-title)}:host .details .dummy-preview{flex:0 0 auto;padding:var(--app-pane-padding);background-color:var(--panel-background-grey);border-bottom:1px solid var(--panel-divider-color)}:host .details .dummy-preview yuv-tile-config-tile{border:1px solid var(--panel-divider-color);background-color:var(--panel-background)}:host .details main{flex:1;overflow-y:auto;padding:var(--app-pane-padding)}:host .details main h2{margin:0;padding-block-end:var(--app-pane-padding);font-size:var(--font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--text-color-hint)}:host .details footer{flex:0 0 auto;padding:calc(var(--app-pane-padding) / 2);display:flex;justify-content:flex-end;gap:calc(var(--app-pane-padding) / 4)}\n"], dependencies: [{ kind: "ngmodule", type: YvcSplitViewModule }, { kind: "component", type: i1$2.SplitViewComponent, selector: "yvc-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "gutterDblClickDuration", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "directive", type: i1$2.SplitAreaDirective, selector: "[yvcSplitArea]", inputs: ["size", "order", "minSize", "maxSize", "panelClass", "visible"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "objectConfig"], outputs: ["slotSelect"] }, { kind: "component", type: IconSelectComponent, selector: "yuv-icon-select", inputs: ["objectType"], outputs: ["iconSelect"] }, { kind: "component", type: PropertySelectComponent, selector: "yuv-tile-property-select", inputs: ["objectType", "selectedProperty"], outputs: ["propertySelect"] }, { kind: "component", type: ActionSelectComponent, selector: "yuv-tile-action-select", inputs: ["objectType", "selectedActionIds"], outputs: ["actionSelect"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: ListComponent, selector: "yuv-list", inputs: ["multiselect", "selfHandleSelection", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TileConfigComponent, isStandalone: true, selector: "yuv-tile-config", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, configTypes: { classPropertyName: "configTypes", publicName: "configTypes", isSignal: true, isRequired: false, transformFunction: null }, configFlavors: { classPropertyName: "configFlavors", publicName: "configFlavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n      <!-- list of types -->\n      <ng-template yuvSplitArea [size]=\"30\">\n        <div class=\"types\">\n          <yuv-list (itemSelect)=\"itemSelected($event)\">\n            @for (t of types() || []; track t.id) {\n              <div yuvListItem>\n                @if (t.icon) {\n                  <yuv-icon [svg]=\"t.icon\"></yuv-icon>\n                } @else {\n                  <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n                }\n                {{ t.id | translate }}\n              </div>\n            }\n          </yuv-list>\n        </div>\n      </ng-template>\n\n      <!-- selected type details-->\n      <ng-template yuvSplitArea [size]=\"70\">\n        <div class=\"details\">\n          @if (selectedType) {\n            <header>{{ selectedType.id | translate }}</header>\n            <div class=\"dummy-preview\">\n              <yuv-tile-config-tile\n                [disableIconSlot]=\"true\"\n                [disableBadgesSlot]=\"true\"\n                [objectConfig]=\"objectConfig!\"\n                (slotSelect)=\"slotSelect($event)\"\n              ></yuv-tile-config-tile>\n            </div>\n            <main>\n              @if (selectedSlot === 'icon') {\n                <h2>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h2>\n                <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n              } @else if (selectedSlot === 'badges') {\n                <div class=\"placeholder empty\">\n                  <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n                </div>\n              } @else if (!selectedSlot) {\n              } @else if (selectedSlot === 'actions') {\n                <h2>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h2>\n                <yuv-tile-action-select\n                  [objectType]=\"selectedType\"\n                  [selectedActionIds]=\"getSelectedActions()\"\n                  (actionSelect)=\"actionSelected($event)\"\n                ></yuv-tile-action-select>\n              } @else {\n                <h2>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h2>\n                <yuv-tile-property-select\n                  [objectType]=\"selectedType\"\n                  [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n                  (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n                ></yuv-tile-property-select>\n              }\n            </main>\n          } @else {\n            <div class=\"placeholder empty\">\n              <h2>{{ 'yuv.tile-config.details.empty.title' | translate }}</h2>\n              <p>{{ 'yuv.tile-config.details.empty.description' | translate }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </yuv-split-view>\n  </main>\n  <footer>\n    <button mat-stroked-button (click)=\"cancel.emit()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button mat-flat-button (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host .tile-config{height:100%;display:contents}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1}:host .details{box-sizing:border-box}:host div.types{box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--ymt-surface-panel)}:host div.types div[yuvListItem]{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs) var(--ymt-spacing-m);cursor:pointer}:host div.types div[yuvListItem]:not([aria-selected=true]):hover,:host div.types div[yuvListItem]:not([aria-selected=true])[aria-current=true]{background-color:var(--ymt-focus-background)}:host div.types div[yuvListItem][aria-selected=true]{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host div.types div[yuvListItem] yuv-object-type-icon{flex:0 0 auto;color:currentColor;opacity:.54}:host .details{height:100%;display:flex;flex-flow:column;overflow:hidden;background-color:var(--ymt-surface-panel)}:host .details header{flex:0 0 auto;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{border:1px solid var(--ymt-outline-variant);background-color:var(--ymt-surface-panel)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h2{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}:host .details footer{flex:0 0 auto;padding:var(--ymt-spacing-xs);display:flex;justify-content:flex-end;gap:var(--ymt-spacing-2xs)}\n"], dependencies: [{ kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1$3.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible"] }, { kind: "component", type: i1$3.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "objectConfig"], outputs: ["slotSelect"] }, { kind: "component", type: IconSelectComponent, selector: "yuv-icon-select", inputs: ["objectType"], outputs: ["iconSelect"] }, { kind: "component", type: PropertySelectComponent, selector: "yuv-tile-property-select", inputs: ["objectType", "selectedProperty"], outputs: ["propertySelect"] }, { kind: "component", type: ActionSelectComponent, selector: "yuv-tile-action-select", inputs: ["objectType", "selectedActionIds"], outputs: ["actionSelect"] }, { kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i3.ListComponent, selector: "yuv-list", inputs: ["multiselect", "selfHandleSelection", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i3.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-tile-config', standalone: true, imports: [
-                        NgClass,
-                        YvcSplitViewModule,
+                        YuvSplitViewModule,
                         ObjectTypeIconComponent,
                         TileConfigTileComponent,
                         IconSelectComponent,
                         PropertySelectComponent,
                         ActionSelectComponent,
-                        YvcIconModule,
+                        YuvIconComponent,
                         TranslateModule,
-                        ListComponent,
-                        ListItemDirective
-                    ], template: "<header>\n  <h1>{{ 'yuv.tile-config.title' | translate }}</h1>\n  <div class=\"bucket\">{{ bucketLabel() }}</div>\n  @if (cancel) {\n    <button class=\"icon\" (click)=\"cancel.emit()\">\n      <yvc-icon [svg]=\"icons.clear\"></yvc-icon>\n    </button>\n  }\n</header>\n\n<yvc-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n  <!-- list of types -->\n  <ng-template yvcSplitArea [size]=\"30\">\n    <div class=\"types\">\n      <yuv-list (itemSelect)=\"itemSelected($event)\">\n        @for (t of types() || []; track t.id) {\n          <div yuvListItem>\n            @if (t.icon) {\n              <yvc-icon [svg]=\"t.icon\"></yvc-icon>\n            } @else {\n              <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n            }\n            {{ t.id | translate }}\n          </div>\n        }\n      </yuv-list>\n    </div>\n  </ng-template>\n\n  <!-- selected type details-->\n  <ng-template yvcSplitArea [size]=\"70\">\n    <div class=\"details\">\n      @if (selectedType) {\n        <header>{{ selectedType.id | translate }}</header>\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile [disableIconSlot]=\"true\" [disableBadgesSlot]=\"true\" [objectConfig]=\"objectConfig!\" (slotSelect)=\"slotSelect($event)\"></yuv-tile-config-tile>\n        </div>\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h2>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h2>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n          } @else if (selectedSlot === 'badges') {\n            <div class=\"placeholder empty\">\n              <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n            </div>\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h2>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h2>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            ></yuv-tile-action-select>\n          } @else {\n            <h2>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h2>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            ></yuv-tile-property-select>\n          }\n        </main>\n        <footer>\n          <button class=\"primary\" (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n        </footer>\n      } @else {\n        <div class=\"placeholder empty\">\n          <h2>{{ 'yuv.tile-config.details.empty.title' | translate }}</h2>\n          <p>{{ 'yuv.tile-config.details.empty.description' | translate }}</p>\n        </div>\n      }\n    </div>\n  </ng-template>\n</yvc-split-view>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host header{flex:0 0 auto;display:grid;grid-template-rows:auto auto;grid-template-columns:1fr auto;grid-template-areas:\"title close\" \"bucket close\";padding:var(--app-pane-padding);border-block-end:1px solid var(--panel-divider-color)}:host header h1{grid-area:title;padding:0;margin:0 0 .5rem;font-size:var(--font-title);font-weight:400}:host header .bucket{grid-area:bucket}:host header button{grid-area:close;align-self:start;--icon-size: 18px}:host yvc-split-view{flex:1}:host .details{box-sizing:border-box}:host div.types{box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--panel-background-lightgrey)}:host div.types div[yuvListItem]{display:flex;gap:var(--app-pane-padding);align-items:center;padding:calc(var(--app-pane-padding) / 2) var(--app-pane-padding);cursor:pointer}:host div.types div[yuvListItem]:not([aria-selected=true]):hover,:host div.types div[yuvListItem]:not([aria-selected=true])[aria-current=true]{background-color:var(--item-focus-background-color)}:host div.types div[yuvListItem][aria-selected=true]{background-color:var(--color-accent);color:var(--color-accent-tone)}:host div.types div[yuvListItem] yvc-icon,:host div.types div[yuvListItem] yuv-object-type-icon{flex:0 0 auto;color:currentColor;opacity:.54}:host .details{height:100%;display:flex;flex-flow:column;overflow:hidden;background-color:var(--panel-background-lightgrey)}:host .details header{flex:0 0 auto;border-bottom:1px solid var(--panel-divider-color);padding:var(--app-pane-padding);font-size:var(--font-title)}:host .details .dummy-preview{flex:0 0 auto;padding:var(--app-pane-padding);background-color:var(--panel-background-grey);border-bottom:1px solid var(--panel-divider-color)}:host .details .dummy-preview yuv-tile-config-tile{border:1px solid var(--panel-divider-color);background-color:var(--panel-background)}:host .details main{flex:1;overflow-y:auto;padding:var(--app-pane-padding)}:host .details main h2{margin:0;padding-block-end:var(--app-pane-padding);font-size:var(--font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--text-color-hint)}:host .details footer{flex:0 0 auto;padding:calc(var(--app-pane-padding) / 2);display:flex;justify-content:flex-end;gap:calc(var(--app-pane-padding) / 4)}\n"] }]
+                        YuvListModule,
+                        MatIconModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        DialogComponent
+                    ], template: "<yuv-dialog [headertitel]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <yuv-split-view [gutterSize]=\"1\" [layoutSettingsID]=\"'yuv.framework.tile-config.layout'\">\n      <!-- list of types -->\n      <ng-template yuvSplitArea [size]=\"30\">\n        <div class=\"types\">\n          <yuv-list (itemSelect)=\"itemSelected($event)\">\n            @for (t of types() || []; track t.id) {\n              <div yuvListItem>\n                @if (t.icon) {\n                  <yuv-icon [svg]=\"t.icon\"></yuv-icon>\n                } @else {\n                  <yuv-object-type-icon [objectTypeId]=\"t.id\"></yuv-object-type-icon>\n                }\n                {{ t.id | translate }}\n              </div>\n            }\n          </yuv-list>\n        </div>\n      </ng-template>\n\n      <!-- selected type details-->\n      <ng-template yuvSplitArea [size]=\"70\">\n        <div class=\"details\">\n          @if (selectedType) {\n            <header>{{ selectedType.id | translate }}</header>\n            <div class=\"dummy-preview\">\n              <yuv-tile-config-tile\n                [disableIconSlot]=\"true\"\n                [disableBadgesSlot]=\"true\"\n                [objectConfig]=\"objectConfig!\"\n                (slotSelect)=\"slotSelect($event)\"\n              ></yuv-tile-config-tile>\n            </div>\n            <main>\n              @if (selectedSlot === 'icon') {\n                <h2>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h2>\n                <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\"></yuv-icon-select>\n              } @else if (selectedSlot === 'badges') {\n                <div class=\"placeholder empty\">\n                  <p>Future feature: Select badges (like: is favorite, ratings, ...)</p>\n                </div>\n              } @else if (!selectedSlot) {\n              } @else if (selectedSlot === 'actions') {\n                <h2>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h2>\n                <yuv-tile-action-select\n                  [objectType]=\"selectedType\"\n                  [selectedActionIds]=\"getSelectedActions()\"\n                  (actionSelect)=\"actionSelected($event)\"\n                ></yuv-tile-action-select>\n              } @else {\n                <h2>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h2>\n                <yuv-tile-property-select\n                  [objectType]=\"selectedType\"\n                  [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n                  (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n                ></yuv-tile-property-select>\n              }\n            </main>\n          } @else {\n            <div class=\"placeholder empty\">\n              <h2>{{ 'yuv.tile-config.details.empty.title' | translate }}</h2>\n              <p>{{ 'yuv.tile-config.details.empty.description' | translate }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </yuv-split-view>\n  </main>\n  <footer>\n    <button mat-stroked-button (click)=\"cancel.emit()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button mat-flat-button (click)=\"saveConfig()\">{{ 'yuv.tile-config.button.save' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host .tile-config{height:100%;display:contents}:host yuv-split-view{--split-gutter-background-color: var(--ymt-outline-variant);flex:1}:host .details{box-sizing:border-box}:host div.types{box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--ymt-surface-panel)}:host div.types div[yuvListItem]{display:flex;gap:var(--ymt-spacing-m);align-items:center;padding:var(--ymt-spacing-xs) var(--ymt-spacing-m);cursor:pointer}:host div.types div[yuvListItem]:not([aria-selected=true]):hover,:host div.types div[yuvListItem]:not([aria-selected=true])[aria-current=true]{background-color:var(--ymt-focus-background)}:host div.types div[yuvListItem][aria-selected=true]{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host div.types div[yuvListItem] yuv-object-type-icon{flex:0 0 auto;color:currentColor;opacity:.54}:host .details{height:100%;display:flex;flex-flow:column;overflow:hidden;background-color:var(--ymt-surface-panel)}:host .details header{flex:0 0 auto;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{border:1px solid var(--ymt-outline-variant);background-color:var(--ymt-surface-panel)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h2{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}:host .details footer{flex:0 0 auto;padding:var(--ymt-spacing-xs);display:flex;justify-content:flex-end;gap:var(--ymt-spacing-2xs)}\n"] }]
         }] });
 class TileConfigTriggerComponent {
     constructor() {
-        this.overlayService = inject(YvcOverlayService);
+        this.#dialog = inject(MatDialog);
         this.tplTileConfig = viewChild.required('tplTileConfig');
-        this.icon = input(YUV_ICONS.settings);
+        this.icon = input('settings');
         this.bucket = input();
         this.bucketLabel = input();
         this.options = input(undefined);
     }
+    #dialog;
+    #dialogRef;
     openTileConfigOverlay() {
         const popoverConfig = {
-            height: '80%',
-            width: '80%'
-            // maxWidth: '400px',
-            // data: {
-            //   bucket: this.bucket
-            // }
+            height: '80vh',
+            width: '80vw',
+            maxWidth: '80vw'
         };
-        this._oRef = this.overlayService.open(this.tplTileConfig(), null, popoverConfig);
+        this.#dialogRef = this.#dialog.open(this.tplTileConfig(), popoverConfig);
     }
     onObjectConfigSave() {
-        if (this._oRef)
-            this._oRef.close();
+        if (this.#dialogRef)
+            this.#dialogRef.close();
     }
     onObjectConfigCancel() {
-        if (this._oRef)
-            this._oRef.close();
+        if (this.#dialogRef)
+            this.#dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: TileConfigTriggerComponent, isStandalone: true, selector: "yuv-tile-config-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tplTileConfig", first: true, predicate: ["tplTileConfig"], descendants: true, isSignal: true }], ngImport: i0, template: "<button class=\"settings icon\" (click)=\"openTileConfigOverlay()\"\ntitle=\"{{ 'yuv.tile-config.trigger.tooltip' | translate }}\"\n><yvc-icon [svg]=\"icon()\"></yvc-icon></button>\n\n<ng-template #tplTileConfig>\n  <yuv-tile-config\n    (save)=\"onObjectConfigSave()\"\n    (cancel)=\"onObjectConfigCancel()\"\n    [bucket]=\"bucket() || undefined\"\n    [bucketLabel]=\"bucketLabel()\"\n    [configTypes]=\"options()?.configTypes\"\n    [configFlavors]=\"options()?.configFlavors || []\"\n  ></yuv-tile-config>\n</ng-template>\n", styles: [":host button{padding:var(--button-padding)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TileConfigComponent, selector: "yuv-tile-config", inputs: ["bucket", "bucketLabel", "configTypes", "configFlavors"], outputs: ["save", "cancel"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.11", type: TileConfigTriggerComponent, isStandalone: true, selector: "yuv-tile-config-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tplTileConfig", first: true, predicate: ["tplTileConfig"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button class=\"settings icon\" (click)=\"openTileConfigOverlay()\" [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\">\n  <mat-icon>settings</mat-icon>\n</button>\n\n<ng-template #tplTileConfig>\n  <yuv-tile-config\n    (save)=\"onObjectConfigSave()\"\n    (cancel)=\"onObjectConfigCancel()\"\n    [bucket]=\"bucket() || undefined\"\n    [bucketLabel]=\"bucketLabel()\"\n    [configTypes]=\"options()?.configTypes\"\n    [configFlavors]=\"options()?.configFlavors || []\"\n  ></yuv-tile-config>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TileConfigComponent, selector: "yuv-tile-config", inputs: ["bucket", "bucketLabel", "configTypes", "configFlavors"], outputs: ["save", "cancel"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [CommonModule, TileConfigComponent, YvcIconModule, TranslateModule$1], template: "<button class=\"settings icon\" (click)=\"openTileConfigOverlay()\"\ntitle=\"{{ 'yuv.tile-config.trigger.tooltip' | translate }}\"\n><yvc-icon [svg]=\"icon()\"></yvc-icon></button>\n\n<ng-template #tplTileConfig>\n  <yuv-tile-config\n    (save)=\"onObjectConfigSave()\"\n    (cancel)=\"onObjectConfigCancel()\"\n    [bucket]=\"bucket() || undefined\"\n    [bucketLabel]=\"bucketLabel()\"\n    [configTypes]=\"options()?.configTypes\"\n    [configFlavors]=\"options()?.configFlavors || []\"\n  ></yuv-tile-config>\n</ng-template>\n", styles: [":host button{padding:var(--button-padding)}\n"] }]
+            args: [{ selector: 'yuv-tile-config-trigger', standalone: true, imports: [CommonModule, TileConfigComponent, TranslateModule$1, MatButtonModule, MatTooltipModule, MatIcon], template: "<button mat-icon-button class=\"settings icon\" (click)=\"openTileConfigOverlay()\" [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\">\n  <mat-icon>settings</mat-icon>\n</button>\n\n<ng-template #tplTileConfig>\n  <yuv-tile-config\n    (save)=\"onObjectConfigSave()\"\n    (cancel)=\"onObjectConfigCancel()\"\n    [bucket]=\"bucket() || undefined\"\n    [bucketLabel]=\"bucketLabel()\"\n    [configTypes]=\"options()?.configTypes\"\n    [configFlavors]=\"options()?.configFlavors || []\"\n  ></yuv-tile-config>\n</ng-template>\n" }]
         }] });
 class EmailTileExtensionComponent {
@@ -1003,8 +1010,8 @@ class EmailTileExtensionComponent {
         evt.stopPropagation();
         alert(`You clicked '${a}' my friend.`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EmailTileExtensionComponent, isStandalone: true, selector: "yuv-email-tile-extension", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.attachments": "hasAttachements()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: EmailTileExtensionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: EmailTileExtensionComponent, isStandalone: true, selector: "yuv-email-tile-extension", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.attachments": "hasAttachements()" } }, ngImport: i0, template: `
     @if (hasAttachements()) {
       <span>{{ attachments().length }}</span>
       <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960">
@@ -1015,9 +1022,9 @@ class EmailTileExtensionComponent {
     }
   `, isInline: true, styles: [":host{display:flex;justify-content:end;margin-top:.5rem}:host .icon{height:1rem}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailTileExtensionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: EmailTileExtensionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-email-tile-extension', standalone: true, imports: [NgClass], template: `
+            args: [{ selector: 'yuv-email-tile-extension', standalone: true, imports: [], template: `
     @if (hasAttachements()) {
       <span>{{ attachments().length }}</span>
       <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960">