@yuuvis/client-framework 0.6.5

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

@@ -0,0 +1,1036 @@
+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 { 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 { 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 { 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 { 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 { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
+
+class TileExtensionService {
+    constructor() {
+        this._extensions = {};
+        // this.registerTileExtension({
+        //   // typeId: 'appSystemmail:email',
+        //   typeId: 'system:document',
+        //   cmp: EmailTileExtensionComponent
+        // });
+    }
+    registerTileExtension(ext) {
+        this._extensions[ext.typeId] = ext;
+    }
+    hasTileExtension(objectTypeId) {
+        return !!this._extensions[objectTypeId];
+    }
+    /**
+     * Get tile extensions for a certain type
+     * @param typeId ID of the type to fetch extesion for (objectTypeID or secondaryObjectTypeID)
+     * @returns
+     */
+    getTileExtension(typeId) {
+        return this._extensions[typeId];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileExtensionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class TileExtensionDirective {
+    constructor() {
+        this.#tileExtensioService = inject(TileExtensionService);
+        this.#containerRef = inject(ViewContainerRef);
+        this.yuvTileExtension = input.required();
+        this.#yuvTileExtensionEffect = effect(() => {
+            const tile = this.yuvTileExtension();
+            if (tile.typeId) {
+                const ext = this.#tileExtensioService.getTileExtension(tile.typeId);
+                if (ext)
+                    this._render(ext, tile.data);
+            }
+        });
+    }
+    #tileExtensioService;
+    #containerRef;
+    #yuvTileExtensionEffect;
+    _render(ext, data) {
+        if (this.component)
+            this.#containerRef.clear();
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileExtensionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvTileExtension]',
+                    standalone: true
+                }]
+        }] });
+
+class TileComponent {
+    constructor() {
+        this.elRef = inject(ElementRef);
+        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());
+                    if (aa)
+                        actionsList.push(aa);
+                });
+            }
+            return actionsList;
+        });
+        this.rendererInputs = computed(() => {
+            return {
+                icon: this.tile().icon,
+                title: this.tile().title,
+                description: this.tile().description,
+                meta: this.tile().meta,
+                aside: this.tile().aside
+            };
+        });
+    }
+    executeAction(a, evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        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 [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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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 [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"] }]
+        }] });
+
+/**
+ * List that renders the result of a search query as object config based tiles. It also contains a component to
+ * set up that configuration.
+ *
+ * ## Paging
+ * If the search result contains more items than the page size, the list will show a
+ * pagination control to navigate inbetween the pages.
+ *
+ * ## Staggered animation
+ * Adding a class of `staggered` to the `yuv-tile-list` component will animate
+ * the tiles in a staggered way (only if the user has not set up the OS to not
+ * play animation).
+ */
+class TileListComponent {
+    #objectConfigService;
+    #system;
+    #searchService;
+    #destroyRef;
+    #device;
+    #elRef;
+    #events;
+    #listItemsEffect;
+    #openContextMenu;
+    #contextFlag;
+    onContextMenu(event) {
+        event.preventDefault();
+        if (this.#contextFlag()) {
+            this.#contextFlag.set(false);
+            return;
+        }
+        setTimeout(() => {
+            this.ctxMenu.emit({ event, selection: this.selection() });
+        }, 200);
+    }
+    onMouseDown(event) {
+        // TODO: Clicking on the scrollbar also resets selection ... need to find a different way
+        // (event.target as HTMLElement).parentElement?.tagName === 'YUV-TILE-LIST' && this.#select(-1);
+        if (event.button === 2) {
+            this.#contextFlag.set(true);
+            this.onContextMenu(event);
+        }
+    }
+    onCopy(event) {
+        event.preventDefault();
+        if (this._selection.length)
+            this.copy.emit(this._selectionToTileData());
+    }
+    onCut(event) {
+        event.preventDefault();
+        if (this._selection.length)
+            this.cut.emit(this._selectionToTileData());
+    }
+    onKeydown(event) {
+        switch (event.code) {
+            case 'Escape': {
+                this.clearSelection();
+                break;
+            }
+            case 'Enter': {
+                // same as double click
+                const aii = this._keyManager.activeItemIndex !== null ? this._keyManager.activeItemIndex : -1;
+                if (aii >= 0) {
+                    this.itemDblClick.emit(this.items[aii]);
+                }
+                break;
+            }
+            case 'Space': {
+                // same as single click
+                const aii = this._keyManager.activeItemIndex !== null ? this._keyManager.activeItemIndex : -1;
+                if (aii >= 0) {
+                    this.select(this.items[aii], event);
+                }
+                break;
+            }
+            default: {
+                this._keyManager?.onKeydown(event);
+            }
+        }
+    }
+    #_busyEffect;
+    #query;
+    #executeQueryEffect;
+    constructor() {
+        this.#objectConfigService = inject(ObjectConfigService);
+        this.#system = inject(SystemService);
+        this.#searchService = inject(SearchService);
+        this.#destroyRef = inject(DestroyRef);
+        this.#device = inject(DeviceService);
+        this.#elRef = inject(ElementRef);
+        this.#events = inject(EventService);
+        this.emptyContent = contentChild('empty');
+        this.isTouchDevice = this.#device.isTouchEnabled;
+        this.tiles = viewChildren(TileComponent);
+        this.listItems = viewChildren(ListItemDirective);
+        this.#listItemsEffect = effect(() => {
+            if (this._keyManager)
+                this._keyManager.destroy();
+            this._keyManager = new ActiveDescendantKeyManager(this.listItems() || []).withWrap();
+        });
+        this.searchResultSubscription = new Subscription();
+        this.#openContextMenu = signal(null);
+        this.#contextFlag = signal(false);
+        this._busy = signal(false);
+        this.#_busyEffect = effect(() => {
+            this.busy.emit(this._busy());
+        });
+        this._selection = [];
+        this.selectedTile = signal([]);
+        this.empytIcon = signal(YUV_ICONS.trash);
+        /**
+         * The ID of the selected list item
+         */
+        this.selection = signal([]);
+        /**
+         * Tile configurations are stored globally for all apps. If you want a
+         * separate config for your app/component you can specify a bucket. A bucket
+         * is basically an ID where your custom tile config will be stored and
+         * retrieved. Buckets should be unique so be sure to use a unique namespace.
+         */
+        this.bucket = input();
+        /**
+         * Sets up the ability to select multile tiles
+         */
+        this.multiselect = input(false);
+        this.options = input(undefined);
+        this.flavor = input();
+        this.flavorEffect = effect(() => {
+            const f = this.flavor();
+            if (f)
+                this.applyFlavor(f);
+        });
+        /**
+         * The search query to be executed
+         */
+        this.query = input();
+        // Items to be preselected (TODO: remove after refactoring ???)
+        this.preselect = input();
+        this.highlights = input([]);
+        this.highlightStyles = computed(() => {
+            const x = {};
+            (this.highlights() || []).forEach((highlight) => {
+                highlight.ids.forEach((id) => {
+                    if (!x[id])
+                        x[id] = {};
+                    x[id] = { ...x[id], ...highlight.cssStyles };
+                });
+            });
+            return x;
+        });
+        /**
+         * Emitted when a list item has been selected
+         */
+        this.itemSelect = output();
+        this.copy = output();
+        this.cut = output();
+        this.busy = output();
+        this.queryResult = output();
+        /**
+         * Emitted when selected items changed. If 'multiselect' input is set to true, this will
+         * emit the whole selection, while 'itemSelect' will only emit the item that currently
+         * has bee added to the selection.
+         */
+        this.selectionChange = output();
+        /**
+         * Emitted when a list item has been doubleclicked
+         */
+        this.itemDblClick = output();
+        this.ctxMenu = output();
+        // the items rendered in the list
+        this.items = [];
+        this.searchExecuted = false;
+        this.#executeQueryEffect = effect(() => {
+            // execute the query each time it changes
+            this.#query = this.query();
+            if (this.#query && this.oc)
+                untracked(() => {
+                    this._executeQuery(this.#query || undefined);
+                    this.empytIcon.set(YUV_ICONS.refresh);
+                });
+        });
+        this.#events
+            .on(YuvEventType.DMS_OBJECT_UPDATED)
+            .pipe(takeUntilDestroyed())
+            .subscribe((e) => {
+            const dmsObject = e.data;
+            // check if the updated object is part of the list
+            this.items.findIndex((item) => item.id === dmsObject.id) >= 0 && this.updateTileList([dmsObject]);
+        });
+    }
+    contextMenuHandler(event, index) {
+        if (!coerceBooleanProperty(this.tiles()[index].elRef.nativeElement.ariaSelected)) {
+            this._selectByIndex(index, event);
+        }
+    }
+    select(i, evt) {
+        const idx = this.items.findIndex((item) => item.id === i.id);
+        this._selectByIndex(idx, evt);
+    }
+    onDragSelectChange(sel) {
+        if (this._keyManager.activeItemIndex !== -1)
+            this._keyManager.setActiveItem(-1);
+        this._selection = sel;
+        this._selection.sort();
+        this.listItems().forEach((item, i) => (item.selected = this._selection.includes(i)));
+    }
+    onDragSelect(sel) {
+        this.#elRef.nativeElement.focus();
+        this._selection = sel;
+        this._keyManager.setActiveItem(sel[0] || 0);
+        const tiles = this._selectionToTileData();
+        this.selectionChange.emit(tiles);
+    }
+    _selectByIndex(idx, evt) {
+        this._keyManager.setActiveItem(idx);
+        this.#select(idx, evt?.shiftKey, evt?.ctrlKey);
+    }
+    refresh() {
+        if (this.#query) {
+            if (this.pagination) {
+                this.goToPage(this.pagination.page);
+            }
+            else
+                this._executeQuery(this.query() || undefined);
+        }
+    }
+    applyFlavor(flavor) {
+        this.appliedFlavor = this.appliedFlavor?.id === flavor.id ? undefined : flavor;
+        if (this._rawResult)
+            this.items = this._mapSearchResult(this._rawResult);
+    }
+    clearSelection(silent = false) {
+        if (this._selection.length) {
+            this._selection = [];
+            this._keyManager.setActiveItem(-1);
+            this.listItems().forEach((item, i) => (item.selected = false));
+            if (!silent)
+                this.selectionChange.emit([]);
+        }
+    }
+    selectNext() {
+        if (this._lastSelection) {
+            let i = this._lastSelection + 1;
+            if (i > this.items.length)
+                i = 0;
+            this.#select(i);
+        }
+    }
+    selectPrev() {
+        if (this._lastSelection) {
+            let i = this._lastSelection - 1;
+            if (i < 0)
+                i = this.items.length - 1;
+            this.#select(this._lastSelection - 1);
+        }
+    }
+    goToPage(page) {
+        if (!this.#query)
+            return;
+        this._busy.set(true);
+        this.#searchService
+            .getPage(this.#query, page)
+            .pipe(finalize(() => this._busy.set(false)))
+            .subscribe({
+            next: (res) => {
+                this.#setupPagination(res);
+                this.items = this._mapSearchResult(res);
+            },
+            error: (err) => {
+                // TODO: how should errors be handles in case hat loading pages fail
+            }
+        });
+    }
+    #select(index, shiftKey = false, ctrlKey = false) {
+        this.#elRef.nativeElement.focus();
+        if (index === -1)
+            this._selection = [];
+        else {
+            if (this.multiselect()) {
+                this._selection = this._selection.filter((i) => i !== index);
+                if (ctrlKey) {
+                    // if ctrl key add to selection
+                    this._selection.push(index);
+                }
+                else if (shiftKey) {
+                    // add range
+                    if (this._lastSelection !== undefined) {
+                        const startIndex = this._lastSelection < index ? this._lastSelection : index;
+                        const endIndex = this._lastSelection > index ? this._lastSelection : index;
+                        for (let i = startIndex; i <= endIndex; i++) {
+                            this._selection.push(i);
+                        }
+                    }
+                    else {
+                        this._selection = [index];
+                    }
+                }
+                else {
+                    this._selection = [index];
+                }
+            }
+            else
+                this._selection = [index];
+            this._selection = [...new Set(this._selection)];
+        }
+        this._lastSelection = this._selection.length === 0 ? undefined : index;
+        this._selection.sort();
+        this.listItems().forEach((item, i) => (item.selected = this._selection.includes(i)));
+        const tiles = this._selectionToTileData();
+        this.selectionChange.emit(tiles);
+        tiles.length === 1 && this.itemSelect.emit(tiles[0]);
+        this.selectedTile.set(this._selection.map((idx) => this.items[idx]));
+    }
+    _selectionToTileData() {
+        return this._selection.map((idx) => this.items[idx]);
+    }
+    _executeQuery(q) {
+        if (q && this.#system.system) {
+            this.searchExecuted = false;
+            // reset items to avoid old data being shown while new stuff is loaded
+            this.items = [];
+            // q.fields = Object.keys(this.#system.system.allFields);
+            q.fields = undefined;
+            this._busy.set(true);
+            this.searchResultSubscription = this.#searchService
+                .search(q)
+                .pipe(finalize(() => this._busy.set(false)))
+                .subscribe({
+                next: (res) => {
+                    this.#setupPagination(res);
+                    this.items = this._mapSearchResult(res);
+                    this.queryResult.emit({ totalCount: res.items.length });
+                    const preselect = this.preselect();
+                    if (preselect) {
+                        preselect.forEach((id) => {
+                            const idx = this.items.findIndex((item) => item.id === id);
+                            if (idx >= 0)
+                                this._selectByIndex(idx);
+                        });
+                    }
+                },
+                error: (err) => console.error(err)
+            });
+        }
+    }
+    #setupPagination(searchResult) {
+        this.pagination = undefined;
+        if (this.#query && searchResult.totalNumItems > (this.#query.size || SearchService.DEFAULT_QUERY_SIZE)) {
+            this.pagination = {
+                total: searchResult.totalNumItems,
+                pages: Math.ceil(searchResult.totalNumItems / (this.#query?.size || SearchService.DEFAULT_QUERY_SIZE)),
+                page: (!this.#query?.from ? 0 : this.#query.from / (this.#query?.size || SearchService.DEFAULT_QUERY_SIZE)) + 1
+            };
+        }
+    }
+    #mapToTileData(objects) {
+        return objects.map((dmsObject) => {
+            const sots = dmsObject.sots || [];
+            let oc = this.oc[dmsObject.objectTypeId];
+            // check if result oitem matches virtual config type
+            const cfgTypes = this.options()?.configTypes || [];
+            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)
+                    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];
+            if (ownAppliedFlavor) {
+                oc = this.oc[this.appliedFlavor.id];
+            }
+            if (!oc)
+                oc = this.#objectConfigService.getDefaultConfig(dmsObject.objectTypeId);
+            const tli = {
+                objectTypeId: dmsObject.objectTypeId,
+                id: dmsObject.id,
+                actions: oc.actions,
+                badges: oc.badges,
+                instanceData: dmsObject.data,
+                dmsObject,
+                title: oc.title ? this.#getResolvedObjectConfigItem(oc.title.propertyName, dmsObject.data) : { propertyName: '', value: '' }
+            };
+            tli.icon = oc.icon
+                ? {
+                    rendererType: 'icon',
+                    propertyName: 'custom',
+                    value: oc.icon.svg
+                }
+                : {
+                    rendererType: 'icon',
+                    propertyName: BaseObjectTypeField.OBJECT_TYPE_ID,
+                    value: ownAppliedFlavor && this.appliedFlavor ? this.appliedFlavor.sot : dmsObject.objectTypeId
+                };
+            if (oc.description)
+                tli.description = this.#getResolvedObjectConfigItem(oc.description.propertyName, dmsObject.data);
+            if (oc.meta)
+                tli.meta = this.#getResolvedObjectConfigItem(oc.meta.propertyName, dmsObject.data);
+            if (oc.aside)
+                tli.aside = this.#getResolvedObjectConfigItem(oc.aside.propertyName, dmsObject.data);
+            return tli;
+        });
+    }
+    _mapSearchResult(res) {
+        this.searchExecuted = true;
+        this._rawResult = res;
+        return this.oc ? this.#mapToTileData(res.items.map((i) => new DmsObject(i))) : [];
+    }
+    #getResolvedObjectConfigItem(propertyName, instanceData) {
+        const item = {
+            propertyName: propertyName,
+            value: instanceData[propertyName]
+        };
+        // Meta data are considered properties that start with the property name followed by an underscore.
+        // Organization fields for example have an additional property 'xyz_title' that contains the resolved
+        // name of a user while the value itself is the users ID.
+        const metaData = Object.keys(instanceData)
+            .filter((key) => key.startsWith(propertyName + '_'))
+            .map((key) => ({ [key.substring(key.indexOf('_') + 1)]: instanceData[key] }));
+        // If there are meta data properties, they'll be merged into a Record where the
+        // key is the property name without the underscore and the actual properties name.
+        // So { 'xyz_title': 'John Doe' } will be merged into { title: 'John Doe' }
+        if (metaData.length) {
+            const meta = metaData.reduce((acc, cur) => ({ ...acc, ...cur }), {});
+            item.meta = meta;
+        }
+        return item;
+    }
+    updateTileList(listItems) {
+        listItems.forEach((item) => {
+            const idx = this.items.findIndex((listItem) => listItem.id === item.id);
+            if (idx >= 0 && this.oc) {
+                const mappedTileData = this.#mapToTileData([item]);
+                this.items[idx] = mappedTileData[0];
+            }
+        });
+    }
+    ngOnInit() {
+        this.#objectConfigService
+            .getObjectConfigs$(this.bucket() || '', true)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe({
+            next: (res) => {
+                this.oc = res;
+                const q = this.query();
+                q && this._executeQuery(q);
+            }
+        });
+    }
+    ngOnDestroy() {
+        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]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-tile-list', standalone: true, providers: [], imports: [
+                        NgClass,
+                        NgStyle,
+                        TileComponent,
+                        TranslateModule,
+                        ReactiveFormsModule,
+                        YvcOverlayModule,
+                        PaginationComponent,
+                        YvcIconModule,
+                        ListItemDirective,
+                        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"] }]
+        }], ctorParameters: () => [], propDecorators: { onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onCopy: [{
+                type: HostListener,
+                args: ['keydown.control.c', ['$event']]
+            }], onCut: [{
+                type: HostListener,
+                args: ['keydown.control.x', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], pagination: [{
+                type: HostBinding,
+                args: ['class.pagination']
+            }] } });
+
+class ActionSelectComponent {
+    constructor() {
+        this.actionService = inject(ActionsService);
+        this.objectType = input.required();
+        this.actions = computed(() => (this.objectType() ? this.actionService.getActionsForType(this.objectType().id) : []));
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class IconSelectComponent {
+    constructor() {
+        this.objectType = input();
+        this.iconSelect = output();
+    }
+    async createIcon(inputEl) {
+        const file = inputEl.files ? inputEl.files[0] : undefined;
+        if (file) {
+            const text = await file.text();
+            this.#emit(text);
+        }
+        else
+            this.#emit(null);
+    }
+    reset() {
+        this.#emit(null);
+    }
+    #emit(data) {
+        this.iconSelect.emit(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class PropertySelectComponent {
+    constructor() {
+        this.system = inject(SystemService);
+        // fields that should not be available to be placed in the slots
+        this.#excludeFields = [
+            BaseObjectTypeField.PARENT_ID,
+            BaseObjectTypeField.PARENT_OBJECT_TYPE_ID,
+            BaseObjectTypeField.OBJECT_ID,
+            BaseObjectTypeField.OBJECT_TYPE_ID,
+            BaseObjectTypeField.BASE_TYPE_ID,
+            BaseObjectTypeField.PARENT_VERSION_NUMBER,
+            BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS,
+            BaseObjectTypeField.TAGS,
+            BaseObjectTypeField.TENANT,
+            BaseObjectTypeField.TRACE_ID,
+            ContentStreamField.REPOSITORY_ID,
+            ContentStreamField.DIGEST,
+            ContentStreamField.ARCHIVE_PATH,
+            ContentStreamField.ID,
+            ContentStreamField.RANGE
+        ];
+        this.objectTypeFields = [];
+        this.clearIcon = ICONS.clear;
+        this.query = signal(null);
+        this.objectType = input();
+        this.filteredObjectTypeFields = computed(() => {
+            return this.query() !== null
+                ? this.objectTypeFields.filter((otf) => otf.label.toLowerCase().indexOf(this.query()?.toLocaleLowerCase() || '') !== -1)
+                : this.getObjectTypeFields(this.objectType());
+        });
+        this.objectTypesEffect = effect(() => {
+            untracked(() => this.getObjectTypeFields(this.objectType()));
+        });
+        this.selectedProperty = input();
+        this.propertySelect = output();
+    }
+    // fields that should not be available to be placed in the slots
+    #excludeFields;
+    selectProperty(field) {
+        this.propertySelect.emit(field);
+    }
+    removeProperty(evt) {
+        evt.stopPropagation();
+        this.propertySelect.emit(undefined);
+    }
+    getObjectTypeFields(type) {
+        if (!type)
+            return [];
+        // load properties
+        const otf = [];
+        if (type.sots && type.sots.length > 0) {
+            type.sots.forEach((s) => {
+                const sot = this.system.getSecondaryObjectType(s);
+                if (sot)
+                    sot.fields.forEach((of) => otf.push({
+                        id: of.id,
+                        label: this._getLabel(of)
+                    }));
+            });
+        }
+        let objectTypeProperties = [];
+        if (type.objectType) {
+            const ot = this.system.getObjectType(type.objectType);
+            objectTypeProperties = (ot?.fields || []).map((otf) => ({ ...otf, label: this._getLabel(otf), baseProperty: true }));
+        }
+        this.objectTypeFields = [...objectTypeProperties, ...otf]
+            .filter((f) => f.id && !this.#excludeFields.includes(f.id))
+            // sort alphanummeric by label
+            .sort(Utils.sortValues('label', Sort.ASC))
+            // put base properties at the end
+            .sort(Utils.sortValues('baseProperty', Sort.ASC));
+        return this.objectTypeFields;
+    }
+    _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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+/**
+ * Component for setting up a tile config
+ */
+class TileConfigTileComponent {
+    constructor() {
+        this.actionService = inject(ActionsService);
+        this.elRef = inject(ElementRef);
+        this.#system = inject(SystemService);
+        this.disableIconSlot = input();
+        this.disableBadgesSlot = input();
+        this.objectConfigInput = input.required({ alias: 'objectConfig' });
+        this.objectConfig = computed(() => {
+            const oc = this.objectConfigInput();
+            if (oc) {
+                [oc.title, oc.description, oc.meta, oc.aside].forEach((field) => {
+                    if (field) {
+                        const label = this.#system.getLocalizedLabel(field.propertyName);
+                        field.label = label || field.label || field.propertyName;
+                    }
+                });
+            }
+            return oc;
+        });
+        this.actions = computed(() => {
+            const actionsList = [];
+            const ocActions = this.objectConfig();
+            if (ocActions.actions?.length) {
+                ocActions.actions?.forEach((a) => {
+                    const aa = this.actionService.getActionById(a.id);
+                    if (aa)
+                        actionsList.push(aa);
+                });
+            }
+            return actionsList;
+        });
+        this.slotSelect = output();
+    }
+    #system;
+    selectSlot(slot) {
+        if (this.disableIconSlot() && slot === 'icon')
+            return;
+        this.slotSelect.emit(slot);
+        // set active state
+        this.elRef.nativeElement.querySelectorAll('[data-slot]').forEach((e) => {
+            if (e.getAttribute('data-slot') === slot)
+                e.classList.add('active');
+            else
+                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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class TileConfigComponent {
+    constructor() {
+        this.#objectConfigService = inject(ObjectConfigService);
+        this.#system = inject(SystemService);
+        /**
+         * Tile configurations are stored globally for all apps. If you want a
+         * separate config for your app/component you can specify a bucket. A bucket
+         * is basically an ID where your custom tile config will be stored and
+         * retrieved. Buckets should be unique so be sure to use a unique namespace.
+         */
+        this.bucket = input(undefined);
+        this.bucketLabel = input(undefined);
+        this.configTypes = input(undefined);
+        this.configFlavors = input([]);
+        this.types = computed(() => {
+            const ct = this.configTypes() || [];
+            const cf = [];
+            // TODO: enable when flavors are supported in tile config
+            // const cf = this.configFlavors() || [];
+            return [...ct.map((t) => ({ id: t.id, icon: t.icon, data: t })), ...cf.map((f) => ({ id: f.id, icon: f.icon, flavor: true, data: f }))];
+        });
+        this.save = output();
+        this.cancel = output();
+        this.selectedTypeProperties = [];
+        this._emptyObjectConfig = {
+            objectTypeId: '',
+            title: { propertyName: '', label: '' },
+            description: { propertyName: '', label: '' },
+            meta: { propertyName: '', label: '' },
+            aside: { propertyName: '', label: '' },
+            actions: [],
+            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;
+    }
+    getConfigProperty(p) {
+        return this.getConfigValue(p);
+    }
+    getSelectedActions() {
+        return this.objectConfig?.actions ? this.objectConfig.actions.map((a) => a.id) : [];
+    }
+    slotSelect(item) {
+        this.selectedSlot = item;
+    }
+    itemSelected(idx) {
+        const t = this.types()[idx[0]];
+        if (!t)
+            return;
+        if (t.flavor)
+            this.#selectFlavor(t.data);
+        else
+            this.#selectType(t.data);
+    }
+    #selectFlavor(flavor) {
+        const t = this.#system.getObjectType(flavor.sot);
+        if (t)
+            this.#selectType({
+                id: flavor.id,
+                objectType: flavor.objectTypeID,
+                sots: [flavor.sot]
+            });
+    }
+    async #selectType(t) {
+        this.selectedType = t;
+        // load tile config
+        this.objectConfig = await this.#objectConfigService.getObjectConfig(t, this.bucket() || '');
+        if (!this.objectConfig) {
+            this.objectConfig = {
+                ...this._emptyObjectConfig,
+                objectTypeId: t.id
+            };
+        }
+    }
+    iconSelected(icon) {
+        if (this.objectConfig)
+            this.objectConfig.icon = icon ? { svg: icon } : undefined;
+    }
+    propertySelected(tileSlot, field) {
+        const p = {};
+        p[tileSlot] = field
+            ? {
+                label: field.label,
+                propertyName: field.id
+            }
+            : undefined;
+        this.objectConfig = structuredClone({
+            ...this.objectConfig,
+            ...p
+        });
+    }
+    actionSelected(action) {
+        if (this.objectConfig) {
+            if (!this.objectConfig?.actions)
+                this.objectConfig.actions = [];
+            const idx = this.objectConfig.actions.findIndex((a) => a.id === action.id);
+            if (idx !== -1)
+                this.objectConfig.actions.splice(idx, 1);
+            else
+                this.objectConfig.actions.push({ id: action.id });
+            this.objectConfig = structuredClone(this.objectConfig);
+        }
+    }
+    saveConfig() {
+        this._saveTileConfig();
+    }
+    _saveTileConfig() {
+        if (this.selectedType && this.objectConfig) {
+            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", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-tile-config', standalone: true, imports: [
+                        NgClass,
+                        YvcSplitViewModule,
+                        ObjectTypeIconComponent,
+                        TileConfigTileComponent,
+                        IconSelectComponent,
+                        PropertySelectComponent,
+                        ActionSelectComponent,
+                        YvcIconModule,
+                        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"] }]
+        }] });
+
+class TileConfigTriggerComponent {
+    constructor() {
+        this.overlayService = inject(YvcOverlayService);
+        this.tplTileConfig = viewChild.required('tplTileConfig');
+        this.icon = input(YUV_ICONS.settings);
+        this.bucket = input();
+        this.bucketLabel = input();
+        this.options = input(undefined);
+    }
+    openTileConfigOverlay() {
+        const popoverConfig = {
+            height: '80%',
+            width: '80%'
+            // maxWidth: '400px',
+            // data: {
+            //   bucket: this.bucket
+            // }
+        };
+        this._oRef = this.overlayService.open(this.tplTileConfig(), null, popoverConfig);
+    }
+    onObjectConfigSave() {
+        if (this._oRef)
+            this._oRef.close();
+    }
+    onObjectConfigCancel() {
+        if (this._oRef)
+            this._oRef.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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class EmailTileExtensionComponent {
+    constructor() {
+        this.data = input.required();
+        this.attachments = computed(() => this.data()['appSystemmail:attachments'] || []);
+        this.hasAttachements = computed(() => !!this.data()['appSystemmail:attachmentCount']);
+    }
+    onClick(a, evt) {
+        evt.preventDefault();
+        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: `
+    @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">
+        <path
+          d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"
+        />
+      </svg>
+    }
+  `, 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: [{
+            type: Component,
+            args: [{ selector: 'yuv-email-tile-extension', standalone: true, imports: [NgClass], 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">
+        <path
+          d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"
+        />
+      </svg>
+    }
+  `, host: {
+                        '[class.attachments]': 'hasAttachements()'
+                    }, styles: [":host{display:flex;justify-content:end;margin-top:.5rem}:host .icon{height:1rem}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionSelectComponent, EmailTileExtensionComponent, PropertySelectComponent, TileComponent, TileConfigComponent, TileConfigTriggerComponent, TileExtensionDirective, TileExtensionService, TileListComponent };
+//# sourceMappingURL=yuuvis-client-framework-tile-list.mjs.map