@yuuvis/client-framework 3.11.1 → 3.13.0

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

@@ -1376,6 +1376,11 @@ class PropertySelectComponent {
         this.objectTypeFields = [];
         this.query = signal(null, ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
         this.objectType = input(...(ngDevMode ? [undefined, { debugName: "objectType" }] : /* istanbul ignore next */ []));
+        /**
+         * Property IDs that should not be offered for selection. These are added on
+         * top of the always-excluded system/base fields (see `#excludeFields`).
+         */
+        this.excludeProperties = input([], ...(ngDevMode ? [{ debugName: "excludeProperties" }] : /* istanbul ignore next */ []));
         this.filteredObjectTypeFields = computed(() => {
             return this.query() !== null
                 ? this.objectTypeFields.filter((otf) => otf.label.toLowerCase().indexOf(this.query()?.toLocaleLowerCase() || '') !== -1)
@@ -1432,8 +1437,9 @@ class PropertySelectComponent {
                 });
             }
         }
+        const excluded = [...this.#excludeFields, ...this.excludeProperties()];
         this.objectTypeFields = [...Object.values(objectTypeProperties), ...Object.values(otf)]
-            .filter((f) => f.id && !this.#excludeFields.includes(f.id))
+            .filter((field) => field.propertyType?.toLowerCase() !== 'table' && field.id && !excluded.includes(field.id))
             // sort alphanummeric by label
             .sort(Utils.sortValues('label', Sort.ASC))
             // put base properties at the end
@@ -1444,12 +1450,12 @@ class PropertySelectComponent {
         return this.system.getLocalizedLabel(otf.id) || otf.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: PropertySelectComponent, isStandalone: true, selector: "yuv-tile-property-select", inputs: { objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, excludeProperties: { classPropertyName: "excludeProperties", publicName: "excludeProperties", isSignal: true, isRequired: false, transformFunction: null }, selectedProperty: { classPropertyName: "selectedProperty", publicName: "selectedProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelect: "propertySelect" }, ngImport: i0, template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PropertySelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-tile-property-select', standalone: true, imports: [NgClass, FormsModule, MatButtonModule, MatIconModule], template: "<!-- TODO: enable once filtering of properties makes sense -->\n<!-- <form class=\"filter\">\n  <div class=\"filter-input\">\n    <input type=\"text\" [placeholder]=\"'yuv.tile-config.property-select.filter.placeholder' | translate\" name=\"query\" [(ngModel)]=\"query\" />\n    @if (query()) {\n      <button class=\"icn\" (click)=\"query.set(null)\">\n        <yuv-icon [svg]=\"clearIcon\"></yuv-icon>\n      </button>\n    }\n  </div>\n</form> -->\n\n<ul class=\"properties\">\n  @for (p of filteredObjectTypeFields(); track $index) {\n    <li\n      tabindex=\"0\"\n      [ngClass]=\"{ baseProperty: p.baseProperty, selected: p.id === selectedProperty()?.propertyName }\"\n      (click)=\"selectProperty(p)\"\n      (keydown.enter)=\"selectPropertyOnKeydown($event, p)\"\n      (keydown.space)=\"selectPropertyOnKeydown($event, p)\"\n    >\n      <div class=\"label\">{{ p.label }}</div>\n      <button\n        mat-icon-button\n        (click)=\"removeProperty($event)\"\n        (keydown.enter)=\"removePropertyOnKeydown($event)\"\n        (keydown.space)=\"removePropertyOnKeydown($event)\"\n      >\n        <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">close</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-flow:column;max-height:100%}:host .filter{flex:0 0 auto}:host .filter .filter-input{background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);display:flex;padding:.25em;align-items:center}:host .filter .filter-input input{background-color:transparent;border:0;outline:0;flex:1;color:var(--ymt-text-color)}:host .properties{flex:1;column-count:3;column-width:30ch;column-rule:1px dotted var(--ymt-outline);column-gap:2em;margin-block-start:var(--ymt-spacing-m)}:host .properties li{border:1px solid var(--ymt-outline-variant);border-radius:0;margin-block-end:1px;display:flex;align-items:center;justify-content:space-between;cursor:default}:host .properties li:hover{background-color:var(--ymt-hover-background)}:host .properties li.baseProperty{font-style:italic}:host .properties li.selected{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host .properties li:not(.selected) button{display:none}:host .properties li .label{padding:var(--ymt-spacing-xs) var(--ymt-spacing-m)}:host .properties li button{color:currentColor}\n"] }]
-        }], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], selectedProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedProperty", required: false }] }], propertySelect: [{ type: i0.Output, args: ["propertySelect"] }] } });
+        }], propDecorators: { objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], excludeProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeProperties", required: false }] }], selectedProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedProperty", required: false }] }], propertySelect: [{ type: i0.Output, args: ["propertySelect"] }] } });
 
 class IconSelectComponent {
     constructor() {
@@ -1564,6 +1570,11 @@ class TileConfigComponent {
         this.bucketLabel = input(undefined, ...(ngDevMode ? [{ debugName: "bucketLabel" }] : /* istanbul ignore next */ []));
         this.configTypes = input(undefined, ...(ngDevMode ? [{ debugName: "configTypes" }] : /* istanbul ignore next */ []));
         this.configFlavors = input([], ...(ngDevMode ? [{ debugName: "configFlavors" }] : /* istanbul ignore next */ []));
+        /**
+         * Property IDs that should not be offered for selection in the property
+         * slots. Added on top of the always-excluded system/base fields.
+         */
+        this.excludeProperties = input([], ...(ngDevMode ? [{ debugName: "excludeProperties" }] : /* istanbul ignore next */ []));
         this.types = computed(() => {
             const configTypes = this.configTypes() || [];
             const configFlavors = [];
@@ -1748,7 +1759,7 @@ class TileConfigComponent {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TileConfigComponent, isStandalone: true, selector: "yuv-tile-config", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, configTypes: { classPropertyName: "configTypes", publicName: "configTypes", isSignal: true, isRequired: false, transformFunction: null }, configFlavors: { classPropertyName: "configFlavors", publicName: "configFlavors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitle]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <section class=\"picker\">\n      <mat-form-field>\n        <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n          @for (t of types() || []; track t.id; let i = $index) {\n            <mat-option [value]=\"t.data\">{{ getTypeLabel(t.id) }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      @if (selectedType) {\n        <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n      }\n    </section>\n\n    <section class=\"details\">\n      @if (selectedType) {\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile\n            [disableIconSlot]=\"true\"\n            [objectConfig]=\"objectConfig!\"\n            [bucket]=\"bucket()\"\n            (slotSelect)=\"slotSelect($event)\"\n          />\n        </div>\n\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\" />\n          } @else if (selectedSlot === 'badges') {\n            <h3>{{ 'yuv.tile-config.slot.badges.headline' | translate }}</h3>\n            <yuv-tile-badge-select\n              [selectedBadgeIds]=\"getSelectedBadges()\"\n              [bucket]=\"bucket()\"\n              (badgeSelect)=\"badgeSelected($event)\"\n            />\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            />\n          } @else {\n            <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            />\n          }\n        </main>\n      } @else {\n        <div class=\"placeholder empty\"></div>\n      }\n    </section>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">\n      {{ 'yuv.tile-config.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{max-width:500px;margin:auto;border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "bucket", "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: BadgeSelectComponent, selector: "yuv-tile-badge-select", inputs: ["selectedBadgeIds", "bucket"], outputs: ["badgeSelect"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 }, excludeProperties: { classPropertyName: "excludeProperties", publicName: "excludeProperties", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitle]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <section class=\"picker\">\n      <mat-form-field>\n        <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n          @for (t of types() || []; track t.id; let i = $index) {\n            <mat-option [value]=\"t.data\">{{ getTypeLabel(t.id) }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      @if (selectedType) {\n        <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n      }\n    </section>\n\n    <section class=\"details\">\n      @if (selectedType) {\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile\n            [disableIconSlot]=\"true\"\n            [objectConfig]=\"objectConfig!\"\n            [bucket]=\"bucket()\"\n            (slotSelect)=\"slotSelect($event)\"\n          />\n        </div>\n\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\" />\n          } @else if (selectedSlot === 'badges') {\n            <h3>{{ 'yuv.tile-config.slot.badges.headline' | translate }}</h3>\n            <yuv-tile-badge-select\n              [selectedBadgeIds]=\"getSelectedBadges()\"\n              [bucket]=\"bucket()\"\n              (badgeSelect)=\"badgeSelected($event)\"\n            />\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            />\n          } @else {\n            <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [excludeProperties]=\"excludeProperties()\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            />\n          }\n        </main>\n      } @else {\n        <div class=\"placeholder empty\"></div>\n      }\n    </section>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">\n      {{ 'yuv.tile-config.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{max-width:500px;margin:auto;border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TileConfigTileComponent, selector: "yuv-tile-config-tile", inputs: ["disableIconSlot", "disableBadgesSlot", "bucket", "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", "excludeProperties", "selectedProperty"], outputs: ["propertySelect"] }, { kind: "component", type: ActionSelectComponent, selector: "yuv-tile-action-select", inputs: ["objectType", "selectedActionIds"], outputs: ["actionSelect"] }, { kind: "component", type: BadgeSelectComponent, selector: "yuv-tile-badge-select", inputs: ["selectedBadgeIds", "bucket"], outputs: ["badgeSelect"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigComponent, decorators: [{
             type: Component,
@@ -1768,8 +1779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         DialogComponent,
                         MatFormFieldModule,
                         YmtButtonDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<yuv-dialog [headertitle]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <section class=\"picker\">\n      <mat-form-field>\n        <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n          @for (t of types() || []; track t.id; let i = $index) {\n            <mat-option [value]=\"t.data\">{{ getTypeLabel(t.id) }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      @if (selectedType) {\n        <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n      }\n    </section>\n\n    <section class=\"details\">\n      @if (selectedType) {\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile\n            [disableIconSlot]=\"true\"\n            [objectConfig]=\"objectConfig!\"\n            [bucket]=\"bucket()\"\n            (slotSelect)=\"slotSelect($event)\"\n          />\n        </div>\n\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\" />\n          } @else if (selectedSlot === 'badges') {\n            <h3>{{ 'yuv.tile-config.slot.badges.headline' | translate }}</h3>\n            <yuv-tile-badge-select\n              [selectedBadgeIds]=\"getSelectedBadges()\"\n              [bucket]=\"bucket()\"\n              (badgeSelect)=\"badgeSelected($event)\"\n            />\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            />\n          } @else {\n            <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            />\n          }\n        </main>\n      } @else {\n        <div class=\"placeholder empty\"></div>\n      }\n    </section>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">\n      {{ 'yuv.tile-config.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{max-width:500px;margin:auto;border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"] }]
-        }], propDecorators: { bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], bucketLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucketLabel", required: false }] }], configTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "configTypes", required: false }] }], configFlavors: [{ type: i0.Input, args: [{ isSignal: true, alias: "configFlavors", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<yuv-dialog [headertitle]=\"'yuv.tile-config.title' | translate: { bucket: bucketLabel() }\">\n  <main class=\"tile-config\">\n    <section class=\"picker\">\n      <mat-form-field>\n        <mat-select [panelWidth]=\"null\" [(ngModel)]=\"selectedType\" (ngModelChange)=\"typeSelected($event)\">\n          @for (t of types() || []; track t.id; let i = $index) {\n            <mat-option [value]=\"t.data\">{{ getTypeLabel(t.id) }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      @if (selectedType) {\n        <button ymtButton=\"secondary\" (click)=\"resetConfig()\">{{ 'yuv.tile-config.button.reset' | translate }}</button>\n      }\n    </section>\n\n    <section class=\"details\">\n      @if (selectedType) {\n        <div class=\"dummy-preview\">\n          <yuv-tile-config-tile\n            [disableIconSlot]=\"true\"\n            [objectConfig]=\"objectConfig!\"\n            [bucket]=\"bucket()\"\n            (slotSelect)=\"slotSelect($event)\"\n          />\n        </div>\n\n        <main>\n          @if (selectedSlot === 'icon') {\n            <h3>{{ 'yuv.tile-config.slot.icon.headline' | translate }}</h3>\n            <yuv-icon-select [objectType]=\"selectedType\" (iconSelect)=\"iconSelected($event)\" />\n          } @else if (selectedSlot === 'badges') {\n            <h3>{{ 'yuv.tile-config.slot.badges.headline' | translate }}</h3>\n            <yuv-tile-badge-select\n              [selectedBadgeIds]=\"getSelectedBadges()\"\n              [bucket]=\"bucket()\"\n              (badgeSelect)=\"badgeSelected($event)\"\n            />\n          } @else if (!selectedSlot) {\n          } @else if (selectedSlot === 'actions') {\n            <h3>{{ 'yuv.tile-config.slot.action.headline' | translate }}</h3>\n            <yuv-tile-action-select\n              [objectType]=\"selectedType\"\n              [selectedActionIds]=\"getSelectedActions()\"\n              (actionSelect)=\"actionSelected($event)\"\n            />\n          } @else {\n            <h3>{{ 'yuv.tile-config.slot.property.headline' | translate }}</h3>\n            <yuv-tile-property-select\n              [objectType]=\"selectedType\"\n              [excludeProperties]=\"excludeProperties()\"\n              [selectedProperty]=\"getConfigProperty(selectedSlot)\"\n              (propertySelect)=\"propertySelected(selectedSlot, $event)\"\n            />\n          }\n        </main>\n      } @else {\n        <div class=\"placeholder empty\"></div>\n      }\n    </section>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancelConfig()\">{{ 'yuv.tile-config.button.close' | translate }}</button>\n    <button ymtButton=\"primary\" [disabled]=\"!configChanged\" (click)=\"saveConfig()\">\n      {{ 'yuv.tile-config.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:flex;height:100%;flex-flow:column}:host main.tile-config{height:100%;display:contents}:host .picker{display:flex;justify-content:space-between;gap:var(--ymt-spacing-m);align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host .details{flex:1;display:flex;flex-flow:column;box-sizing:border-box;overflow:hidden}:host .details header{flex:0 0 auto;display:flex;align-items:center;border-bottom:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m);gap:var(--ymt-spacing-m)}:host .details header h2{flex:1;overflow:hidden;text-overflow:ellipsis;margin:0}:host .details .dummy-preview{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-outline-variant)}:host .details .dummy-preview yuv-tile-config-tile{max-width:500px;margin:auto;border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline);background-color:var(--ymt-surface-container)}:host .details main{flex:1;overflow-y:auto;padding:var(--ymt-spacing-m)}:host .details main h3{margin:0;padding-block-end:var(--ymt-spacing-m);font:var(--ymt-font-subhead)}:host .details .placeholder.empty{height:100%;display:grid;place-content:center;color:var(--ymt-text-color-subtle)}\n"] }]
+        }], propDecorators: { bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], bucketLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucketLabel", required: false }] }], configTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "configTypes", required: false }] }], configFlavors: [{ type: i0.Input, args: [{ isSignal: true, alias: "configFlavors", required: false }] }], excludeProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeProperties", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });
 
 class TileConfigTriggerComponent {
     constructor() {
@@ -1801,7 +1812,7 @@ class TileConfigTriggerComponent {
             this.#dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TileConfigTriggerComponent, isStandalone: true, selector: "yuv-tile-config-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tplTileConfig", first: true, predicate: ["tplTileConfig"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  ymt-icon-button\n  [icon-button-size]=\"small() ? 'small' : 'medium'\"\n  class=\"settings icon\"\n  (click)=\"openTileConfigOverlay()\"\n  [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\"\n>\n  <mat-icon>settings</mat-icon>\n</button>\n\n<ng-template #tplTileConfig>\n  <yuv-tile-config\n    (save)=\"onObjectConfigSave()\"\n    (canceled)=\"onObjectConfigCancel()\"\n    [bucket]=\"bucket() || undefined\"\n    [bucketLabel]=\"bucketLabel()\"\n    [configTypes]=\"options()?.configTypes\"\n    [configFlavors]=\"options()?.configFlavors || []\"\n  />\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: TileConfigComponent, selector: "yuv-tile-config", inputs: ["bucket", "bucketLabel", "configTypes", "configFlavors"], outputs: ["save", "canceled"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TileConfigTriggerComponent, isStandalone: true, selector: "yuv-tile-config-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, bucketLabel: { classPropertyName: "bucketLabel", publicName: "bucketLabel", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tplTileConfig", first: true, predicate: ["tplTileConfig"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  ymt-icon-button\n  [icon-button-size]=\"small() ? 'small' : 'medium'\"\n  class=\"settings icon\"\n  (click)=\"openTileConfigOverlay()\"\n  [matTooltip]=\"'yuv.tile-config.trigger.tooltip' | translate\"\n>\n  <mat-icon>settings</mat-icon>\n</button>\n\n<ng-template #tplTileConfig>\n  <yuv-tile-config\n    (save)=\"onObjectConfigSave()\"\n    (canceled)=\"onObjectConfigCancel()\"\n    [bucket]=\"bucket() || undefined\"\n    [bucketLabel]=\"bucketLabel()\"\n    [configTypes]=\"options()?.configTypes\"\n    [configFlavors]=\"options()?.configFlavors || []\"\n  />\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: TileConfigComponent, selector: "yuv-tile-config", inputs: ["bucket", "bucketLabel", "configTypes", "configFlavors", "excludeProperties"], outputs: ["save", "canceled"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TileConfigTriggerComponent, decorators: [{
             type: Component,