@yuuvis/client-framework 3.16.0 → 3.17.0

package/fesm2022/yuuvis-client-framework-sequence-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-client-framework-sequence-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.ts","../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.html","../../../../../libs/yuuvis/client-framework/sequence-list/src/yuuvis-client-framework-sequence-list.ts"],"sourcesContent":["import {\n  afterNextRender,\n  Component,\n  ElementRef,\n  forwardRef,\n  inject,\n  Injector,\n  input,\n  signal,\n  viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ControlValueAccessor,\n  FormArray,\n  FormControl,\n  FormGroup,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  NonNullableFormBuilder,\n  ReactiveFormsModule,\n  ValidationErrors,\n  Validator,\n  Validators\n} from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { TranslatePipe } from '@yuuvis/client-core';\nimport { OrganizationComponent } from '@yuuvis/client-framework/forms';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\nimport { SequenceItem, SequenceListAssignee } from './sequence-list.interface';\n\ntype SequenceFormItem = FormGroup<{\n  title: FormControl<string>;\n  nextAssignee: FormControl<SequenceListAssignee[]>;\n  expiryDatetime: FormControl<any>;\n}>;\ntype SequenceForm = FormGroup<{\n  items: FormArray<SequenceFormItem>;\n}>;\n\n/**\n * Task sequence list.\n */\n@Component({\n  selector: 'yuv-sequence-list',\n  standalone: true,\n  imports: [\n    TranslatePipe,\n    OrganizationComponent,\n    MatButtonModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    MatTooltipModule,\n    MatInputModule,\n    MatFormFieldModule,\n    YmtIconButtonDirective\n  ],\n  templateUrl: './sequence-list.component.html',\n  styleUrls: ['./sequence-list.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SequenceListComponent),\n      multi: true\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => SequenceListComponent),\n      multi: true\n    }\n  ],\n  host: {\n    tabindex: '0'\n  }\n})\nexport class SequenceListComponent implements ControlValueAccessor, Validator {\n  #formBuilder = inject(NonNullableFormBuilder);\n  #eleRef = inject(ElementRef);\n  #injector = inject(Injector);\n\n  readonly orgComponent = viewChild.required(OrganizationComponent);\n\n  /**\n   * Maximum number of sequence items (defaults to 100).\n   */\n  maxLength = input<number>(100);\n  /**\n   * Minimum number of sequence items that must remain (defaults to 1, matching\n   * the original behaviour where a list can never be emptied). Consumers that\n   * represent a tail of optional follow-up items (e.g. the remaining steps of\n   * an already-started routing list) can set this to 0 to allow removing the\n   * last remaining item.\n   */\n  minLength = input<number>(1);\n  maxLengthExceeded = signal<boolean>(false);\n  readonly controlCount = signal<number>(0);\n\n  // dynamic form for sequence items\n  sequenceForm: SequenceForm = this.#formBuilder.group({\n    items: this.#formBuilder.array<SequenceFormItem>([this.#generateSequenceItem()])\n  });\n\n  entries: SequenceItem[] = [];\n\n  get formItemArray(): FormArray<SequenceFormItem> {\n    return this.sequenceForm.controls.items as FormArray<SequenceFormItem>;\n  }\n\n  constructor() {\n    this.#updateState();\n    this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {\n      this.#propagate();\n    });\n  }\n\n  addItem(): void {\n    this.sequenceForm.controls.items.push(this.#generateSequenceItem());\n    this.#updateState();\n    this.#scrollToItem(this.formItemArray.length - 1);\n  }\n\n  addItemAt(idx: number): void {\n    this.sequenceForm.controls.items.insert(idx, this.#generateSequenceItem());\n    this.#updateState();\n    this.#scrollToItem(idx);\n  }\n\n  removeItem(idx: number): void {\n    this.sequenceForm.controls.items.removeAt(idx);\n    this.#updateState();\n  }\n\n  writeValue(value: SequenceItem[]): void {\n    this.entries = value || [];\n    this.formItemArray.clear();\n    if (this.entries.length === 0 && this.minLength() > 0) this.addItem();\n    this.entries.forEach((entry) => {\n      this.formItemArray.push(this.#generateSequenceItem(entry));\n    });\n    this.#updateState();\n  }\n\n  registerOnChange(fn: any): void {\n    this.propagateChange = fn;\n  }\n\n  validate(): ValidationErrors | null {\n    const maxLength = this.maxLength();\n    const mlExceeded = maxLength !== undefined && this.formItemArray.length > maxLength;\n    const valid = this.sequenceForm.valid && !mlExceeded;\n\n    return !valid\n      ? {\n          sequencelist: {\n            invalid: this.sequenceForm.invalid,\n            maxLengthExceeded: mlExceeded\n          }\n        }\n      : null;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  propagateChange = (_: any): void => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  registerOnTouched(): void {}\n\n  #updateState(): void {\n    const maxLength = this.maxLength();\n    this.maxLengthExceeded.set(maxLength !== undefined && this.formItemArray.length >= maxLength);\n    this.controlCount.set(this.sequenceForm.controls.items.length);\n  }\n\n  #generateSequenceItem(sequenceItem?: SequenceItem): SequenceFormItem {\n    return this.#formBuilder.group({\n      title: [sequenceItem?.title || '', Validators.required],\n      nextAssignee: [sequenceItem?.nextAssignee || [], Validators.required],\n      expiryDatetime: [sequenceItem?.expiryDatetime || undefined]\n    });\n  }\n\n  #propagate(): void {\n    const res: SequenceItem[] = [];\n    (this.sequenceForm.value.items || []).forEach((item: any) => {\n      const i: SequenceItem = {\n        title: item.title,\n        nextAssignee: item.nextAssignee\n      };\n      if (item.expiryDatetime) {\n        i.expiryDatetime = item.expiryDatetime;\n      }\n      res.push(i);\n    });\n\n    this.propagateChange(res);\n  }\n\n  #scrollToItem(idx: number): void {\n    afterNextRender(\n      () => {\n        const items = this.#eleRef.nativeElement.querySelectorAll('.item');\n        items[idx]?.scrollIntoView?.({ behavior: 'smooth', block: 'nearest' });\n      },\n      { injector: this.#injector }\n    );\n  }\n}\n","<form [formGroup]=\"sequenceForm\">\n  <section formArrayName=\"items\">\n    @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItemAt($index)\">\n          <mat-icon>add</mat-icon>\n        </button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button ymtIconButton icon-button-size=\"small\" class=\"remove hidden\" [class.hidden]=\"controlCount() <= minLength()\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"controlCount() <= minLength()\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.task' | translate }}</mat-label>\n            <input matInput [maxLength]=\"128\" formControlName=\"title\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.nextAssignee' | translate }}</mat-label>\n            <yuv-organization [classifications]=\"['id:organization:set[user,role]']\"\n                              [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\"\n                              [multiselect]=\"true\"\n                              [withMetadata]=\"true\"\n                              [required]=\"true\"\n                              formControlName=\"nextAssignee\">\n            </yuv-organization>\n          </mat-form-field>\n        </div>\n        @if ($last) {\n          <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n    }\n    @if (controlCount() === 0) {\n      <button mat-icon-button class=\"add empty\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </section>\n</form>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yuuvis-client-framework-sequence-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.ts","../../../../../libs/yuuvis/client-framework/sequence-list/src/lib/sequence-list.component.html","../../../../../libs/yuuvis/client-framework/sequence-list/src/yuuvis-client-framework-sequence-list.ts"],"sourcesContent":["import {\n  afterNextRender,\n  Component,\n  ElementRef,\n  forwardRef,\n  inject,\n  Injector,\n  input,\n  signal,\n  viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ControlValueAccessor,\n  FormArray,\n  FormControl,\n  FormGroup,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  NonNullableFormBuilder,\n  ReactiveFormsModule,\n  ValidationErrors,\n  Validator,\n  Validators\n} from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { TranslatePipe } from '@yuuvis/client-core';\nimport { OrganizationComponent } from '@yuuvis/client-framework/forms';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\nimport { SequenceItem, SequenceListAssignee } from './sequence-list.interface';\n\ntype SequenceFormItem = FormGroup<{\n  title: FormControl<string>;\n  nextAssignee: FormControl<SequenceListAssignee[]>;\n  expiryDatetime: FormControl<any>;\n}>;\ntype SequenceForm = FormGroup<{\n  items: FormArray<SequenceFormItem>;\n}>;\n\n/**\n * Task sequence list.\n */\n@Component({\n  selector: 'yuv-sequence-list',\n  standalone: true,\n  imports: [\n    TranslatePipe,\n    OrganizationComponent,\n    MatButtonModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    MatTooltipModule,\n    MatInputModule,\n    MatFormFieldModule,\n    YmtIconButtonDirective\n  ],\n  templateUrl: './sequence-list.component.html',\n  styleUrls: ['./sequence-list.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SequenceListComponent),\n      multi: true\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => SequenceListComponent),\n      multi: true\n    }\n  ],\n  host: {\n    tabindex: '0'\n  }\n})\nexport class SequenceListComponent implements ControlValueAccessor, Validator {\n  #formBuilder = inject(NonNullableFormBuilder);\n  #eleRef = inject(ElementRef);\n  #injector = inject(Injector);\n\n  readonly orgComponent = viewChild.required(OrganizationComponent);\n\n  /**\n   * Maximum number of sequence items (defaults to 100).\n   */\n  maxLength = input<number>(100);\n  /**\n   * Minimum number of sequence items that must remain (defaults to 1, matching\n   * the original behaviour where a list can never be emptied). Consumers that\n   * represent a tail of optional follow-up items (e.g. the remaining steps of\n   * an already-started routing list) can set this to 0 to allow removing the\n   * last remaining item.\n   */\n  minLength = input<number>(1);\n  maxLengthExceeded = signal<boolean>(false);\n  readonly controlCount = signal<number>(0);\n\n  // dynamic form for sequence items\n  sequenceForm: SequenceForm = this.#formBuilder.group({\n    items: this.#formBuilder.array<SequenceFormItem>([this.#generateSequenceItem()])\n  });\n\n  entries: SequenceItem[] = [];\n\n  get formItemArray(): FormArray<SequenceFormItem> {\n    return this.sequenceForm.controls.items as FormArray<SequenceFormItem>;\n  }\n\n  constructor() {\n    this.#updateState();\n    this.sequenceForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {\n      this.#propagate();\n    });\n  }\n\n  addItem(): void {\n    this.sequenceForm.controls.items.push(this.#generateSequenceItem());\n    this.#updateState();\n    this.#scrollToItem(this.formItemArray.length - 1);\n  }\n\n  addItemAt(idx: number): void {\n    this.sequenceForm.controls.items.insert(idx, this.#generateSequenceItem());\n    this.#updateState();\n    this.#scrollToItem(idx);\n  }\n\n  removeItem(idx: number): void {\n    this.sequenceForm.controls.items.removeAt(idx);\n    this.#updateState();\n  }\n\n  writeValue(value: SequenceItem[]): void {\n    this.entries = value || [];\n    this.formItemArray.clear();\n    if (this.entries.length === 0 && this.minLength() > 0) this.addItem();\n    this.entries.forEach((entry) => {\n      this.formItemArray.push(this.#generateSequenceItem(entry));\n    });\n    this.#updateState();\n  }\n\n  registerOnChange(fn: any): void {\n    this.propagateChange = fn;\n  }\n\n  validate(): ValidationErrors | null {\n    const maxLength = this.maxLength();\n    const mlExceeded = maxLength !== undefined && this.formItemArray.length > maxLength;\n    const valid = this.sequenceForm.valid && !mlExceeded;\n\n    return !valid\n      ? {\n          sequencelist: {\n            invalid: this.sequenceForm.invalid,\n            maxLengthExceeded: mlExceeded\n          }\n        }\n      : null;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  propagateChange = (_: any): void => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  registerOnTouched(): void {}\n\n  #updateState(): void {\n    const maxLength = this.maxLength();\n    this.maxLengthExceeded.set(maxLength !== undefined && this.formItemArray.length >= maxLength);\n    this.controlCount.set(this.sequenceForm.controls.items.length);\n  }\n\n  #generateSequenceItem(sequenceItem?: SequenceItem): SequenceFormItem {\n    return this.#formBuilder.group({\n      title: [sequenceItem?.title || '', Validators.required],\n      nextAssignee: [sequenceItem?.nextAssignee || [], Validators.required],\n      expiryDatetime: [sequenceItem?.expiryDatetime || undefined]\n    });\n  }\n\n  #propagate(): void {\n    const res: SequenceItem[] = [];\n    (this.sequenceForm.value.items || []).forEach((item: any) => {\n      const i: SequenceItem = {\n        title: item.title,\n        nextAssignee: item.nextAssignee\n      };\n      if (item.expiryDatetime) {\n        i.expiryDatetime = item.expiryDatetime;\n      }\n      res.push(i);\n    });\n\n    this.propagateChange(res);\n  }\n\n  #scrollToItem(idx: number): void {\n    afterNextRender(\n      () => {\n        const items = this.#eleRef.nativeElement.querySelectorAll('.item');\n        items[idx]?.scrollIntoView?.({ behavior: 'smooth', block: 'nearest' });\n      },\n      { injector: this.#injector }\n    );\n  }\n}\n","<form [formGroup]=\"sequenceForm\">\n  <section formArrayName=\"items\">\n    @for (item of sequenceForm.controls.items.controls; track item; let itemIndex = $index) {\n      <div class=\"item\" [formGroup]=\"item\">\n        <button mat-icon-button class=\"add before\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItemAt($index)\">\n          <mat-icon>add</mat-icon>\n        </button>\n        <span class=\"index\" [attr.data-index]=\"itemIndex + 1\"></span>\n\n        <div class=\"item-form\">\n          <button ymtIconButton icon-button-size=\"small\" class=\"remove hidden\" [class.hidden]=\"controlCount() <= minLength()\" type=\"button\" (click)=\"removeItem($index)\" [disabled]=\"controlCount() <= minLength()\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.task' | translate }}</mat-label>\n            <input matInput [maxLength]=\"128\" formControlName=\"title\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label>{{ 'yuv.sequence-list.form.nextAssignee' | translate }}</mat-label>\n            <yuv-organization [classifications]=\"['id:organization:set[user,role]']\"\n                              [matTooltip]=\"'yuv.sequence-list.form.nextAssignee' | translate\"\n                              [multiselect]=\"true\"\n                              [withMetadata]=\"true\"\n                              [required]=\"true\"\n                              formControlName=\"nextAssignee\">\n            </yuv-organization>\n          </mat-form-field>\n        </div>\n        @if ($last) {\n          <button mat-icon-button class=\"add after\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n    }\n    @if (controlCount() === 0) {\n      <button mat-icon-button class=\"add empty\" type=\"button\" [disabled]=\"maxLengthExceeded()\" (click)=\"addItem()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </section>\n</form>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -5,7 +5,7 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import * as i4 from '@angular/material/tooltip';
 import { MatTooltip, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule } from '@angular/material/tooltip';
-import { ObjectConfigService, DmsService, EventService, DmsObject, YuvEventType, BaseObjectTypeField, TranslatePipe, SystemService, ContentStreamField, Utils, Sort } from '@yuuvis/client-core';
+import { ObjectConfigService, DmsService, EventService, DmsObject, YuvEventType, BaseObjectTypeField, TranslatePipe, SystemService, ContentStreamField, Utils, Sort, LocalizationService } from '@yuuvis/client-core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/forms';
@@ -1390,6 +1390,11 @@ class PropertySelectComponent {
             untracked(() => this.getObjectTypeFields(this.objectType()));
         }, ...(ngDevMode ? [{ debugName: "objectTypesEffect" }] : /* istanbul ignore next */ []));
         this.selectedProperty = input(...(ngDevMode ? [undefined, { debugName: "selectedProperty" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the selected property may be removed from the slot. Mandatory
+         * slots (title) disable this so the slot can never be emptied.
+         */
+        this.allowRemove = input(true, ...(ngDevMode ? [{ debugName: "allowRemove" }] : /* istanbul ignore next */ []));
         this.propertySelect = output();
     }
     // fields that should not be available to be placed in the slots
@@ -1450,12 +1455,12 @@ class PropertySelectComponent {
         return this.system.getLocalizedLabel(otf.id) || otf.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 }, allowRemove: { classPropertyName: "allowRemove", publicName: "allowRemove", 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      @if (allowRemove()) {\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      }\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.20", 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 }] }], 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"] }] } });
+            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      @if (allowRemove()) {\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      }\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 }] }], excludeProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeProperties", required: false }] }], selectedProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedProperty", required: false }] }], allowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemove", required: false }] }], propertySelect: [{ type: i0.Output, args: ["propertySelect"] }] } });
 
 class IconSelectComponent {
     constructor() {
@@ -1493,6 +1498,7 @@ class TileConfigTileComponent {
         this.#actionService = inject(ActionsService);
         this.#elRef = inject(ElementRef);
         this.#system = inject(SystemService);
+        this.#localization = inject(LocalizationService);
         this.#badges = inject(BadgeRegistryService);
         this.disableIconSlot = input(false, ...(ngDevMode ? [{ debugName: "disableIconSlot" }] : /* istanbul ignore next */ []));
         this.disableBadgesSlot = input(false, ...(ngDevMode ? [{ debugName: "disableBadgesSlot" }] : /* istanbul ignore next */ []));
@@ -1502,7 +1508,7 @@ class TileConfigTileComponent {
             const objectConfig = this.objectConfig();
             [objectConfig.title, objectConfig.description, objectConfig.meta, objectConfig.aside].forEach((field) => {
                 if (field) {
-                    const label = this.#system.getLocalizedLabel(field.propertyName);
+                    const label = this.#localization.getLocalizedLabel(field.propertyName);
                     field.label = label || field.label || field.propertyName;
                 }
             });
@@ -1535,6 +1541,7 @@ class TileConfigTileComponent {
     #actionService;
     #elRef;
     #system;
+    #localization;
     #badges;
     selectSlot(slot) {
         if (this.disableIconSlot() && slot === 'icon')
@@ -1548,17 +1555,18 @@ class TileConfigTileComponent {
             : element.classList.remove('active'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\" />\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    @for (badge of badges(); track badge.id) {\n      <yuv-badge-chip [badge]=\"badge\" />\n    }\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}: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]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}: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{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;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: 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: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: BadgeChipComponent, selector: "yuv-badge-chip", inputs: ["badge", "showLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, objectConfig: { classPropertyName: "objectConfig", publicName: "objectConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slotSelect: "slotSelect" }, ngImport: i0, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\" />\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  [class.title-missing]=\"!oc?.title?.propertyName\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    @for (badge of badges(); track badge.id) {\n      <yuv-badge-chip [badge]=\"badge\" />\n    }\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=title].title-missing{border:1px solid var(--ymt-danger)}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}: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]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}: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{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;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: 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: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: BadgeChipComponent, selector: "yuv-badge-chip", inputs: ["badge", "showLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, ObjectTypeIconComponent, BadgeChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\" />\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    @for (badge of badges(); track badge.id) {\n      <yuv-badge-chip [badge]=\"badge\" />\n    }\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}: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]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}: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{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"] }]
+            args: [{ selector: 'yuv-tile-config-tile', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, ObjectTypeIconComponent, BadgeChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let oc = _objectConfig();\n\n<div\n  data-slot=\"icon\"\n  [attr.disabled]=\"disableIconSlot()\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('icon')\"\n  (keydown.enter)=\"selectSlot('icon')\"\n  (keydown.space)=\"selectSlot('icon'); $event.preventDefault()\"\n>\n  @if (oc && oc.icon) {\n    <mat-icon aria-hidden=\"true\" [attr.inert]=\"true\">{{ oc.icon.svg }}</mat-icon>\n  } @else if (oc && oc.objectTypeId) {\n    <yuv-object-type-icon [objectTypeId]=\"oc.objectTypeId\" />\n  }\n</div>\n<div\n  data-slot=\"title\"\n  tabindex=\"0\"\n  [class.title-missing]=\"!oc?.title?.propertyName\"\n  (click)=\"selectSlot('title')\"\n  (keydown.enter)=\"selectSlot('title')\"\n  (keydown.space)=\"selectSlot('title'); $event.preventDefault()\"\n>\n  {{ oc?.title?.label }}\n</div>\n<div\n  data-slot=\"actions\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('actions')\"\n  (keydown.enter)=\"selectSlot('actions')\"\n  (keydown.space)=\"selectSlot('actions'); $event.preventDefault()\"\n>\n  @for (a of actions(); track a.id) {\n    <button mat-icon-button [matTooltip]=\"a.label\" [attr.inert]=\"true\" aria-hidden=\"true\">\n      <mat-icon inert=\"true\" aria-hidden=\"true\">{{ a.icon }}</mat-icon>\n    </button>\n  }\n</div>\n<div\n  data-slot=\"description\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('description')\"\n  (keydown.enter)=\"selectSlot('description')\"\n  (keydown.space)=\"selectSlot('description'); $event.preventDefault()\"\n>\n  {{ oc?.description?.label }}\n</div>\n<div\n  data-slot=\"aside\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('aside')\"\n  (keydown.enter)=\"selectSlot('aside')\"\n  (keydown.space)=\"selectSlot('aside'); $event.preventDefault()\"\n>\n  {{ oc?.aside?.label }}\n</div>\n<div\n  data-slot=\"meta\"\n  tabindex=\"0\"\n  (click)=\"selectSlot('meta')\"\n  (keydown.enter)=\"selectSlot('meta')\"\n  (keydown.space)=\"selectSlot('meta'); $event.preventDefault()\"\n>\n  {{ oc?.meta?.label }}\n</div>\n\n@if (!disableBadgesSlot()) {\n  <div\n    data-slot=\"badges\"\n    tabindex=\"0\"\n    (click)=\"selectSlot('badges')\"\n    (keydown.enter)=\"selectSlot('badges')\"\n    (keydown.space)=\"selectSlot('badges'); $event.preventDefault()\"\n  >\n    @for (badge of badges(); track badge.id) {\n      <yuv-badge-chip [badge]=\"badge\" />\n    }\n  </div>\n}\n", styles: [":host{--tile-item-gap: .5em;--tile-background: transparent;--tile-icon-fill: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:3rem 1fr auto;grid-template-areas:\"icon title title actions\" \"icon description aside aside\" \"icon meta meta badges\";gap:var(--tile-item-gap);padding:var(--ymt-spacing-m);background-color:var(--tile-background)}:host:hover [data-slot=actions]{opacity:1}:host [data-slot=icon]{grid-area:icon;display:flex;align-items:center;justify-content:center}:host [data-slot=title]{grid-area:title;font-weight:700}:host [data-slot=title].title-missing{border:1px solid var(--ymt-danger)}:host [data-slot=description]{grid-area:description}:host [data-slot=meta]{grid-area:meta}:host [data-slot=aside]{flex:0 0 auto;grid-area:aside}:host [data-slot=actions]{flex:0 0 auto;display:flex;justify-self:end;grid-area:actions}:host [data-slot=actions] button{padding:0;gap:2px}:host [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta]){display:flex;align-items:center;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline);padding:.25em .5em;box-sizing:border-box;min-height:2.2em;border-radius:var(--ymt-corner-xs)}: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]):hover{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}: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{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host :where([data-slot=badges],[data-slot=actions],[data-slot=aside],[data-slot=icon],[data-slot=title],[data-slot=description],[data-slot=meta])[disabled]{border:none;background-color:transparent}:host :where([data-slot=badges],[data-slot=actions]){min-width:3em}:host :where([data-slot=badges],[data-slot=actions]) button{width:24px;height:24px;pointer-events:none;color:currentColor}:host [data-slot=aside]{min-width:4em}:host [data-slot=icon]{height:3em;width:100%}\n"] }]
         }], propDecorators: { disableIconSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableIconSlot", required: false }] }], disableBadgesSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBadgesSlot", required: false }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], objectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectConfig", required: true }] }], slotSelect: [{ type: i0.Output, args: ["slotSelect"] }] } });
 
 class TileConfigComponent {
     constructor() {
         this.#objectConfigService = inject(ObjectConfigService);
         this.#system = inject(SystemService);
+        this.#localization = inject(LocalizationService);
         this.#translate = inject(TranslateService);
         /**
          * Tile configurations are stored globally for all apps. If you want a
@@ -1608,12 +1616,24 @@ class TileConfigComponent {
     }
     #objectConfigService;
     #system;
+    #localization;
     #translate;
     get configChanged() {
         return Object.keys(this.changes).length > 0;
     }
-    get isConfigEmpty() {
-        return !!this.selectedType && this.#isEmptyConfig(this.objectConfig);
+    /**
+     * The title slot is mandatory. Edited configs without a title block the
+     * save. Entries set to `undefined` mark the stored config for deletion and
+     * are always valid.
+     */
+    get titleMissing() {
+        return Object.values(this.changes).some((config) => config && !config.title?.propertyName);
+    }
+    get titleMissingTypeLabels() {
+        return Object.keys(this.changes)
+            .filter((typeId) => this.changes[typeId] && !this.changes[typeId]?.title?.propertyName)
+            .map((typeId) => this.getTypeLabel(typeId))
+            .join(', ');
     }
     #typesEffeconfigTypes;
     #emptyObjectConfig;
@@ -1694,16 +1714,8 @@ class TileConfigComponent {
         }
     }
     saveConfig() {
-        Object.keys(this.changes).forEach((typeId) => {
-            if (!this.#isEmptyConfig(this.changes[typeId]))
-                return;
-            const substitute = this.#substituteEmptyConfig(typeId, this.changes[typeId]);
-            const effectiveConfig = this.#objectConfigService.getObjectConfig({ id: typeId }, this.bucket());
-            if (this.#deepEqual(substitute, effectiveConfig))
-                delete this.changes[typeId];
-            else
-                this.changes[typeId] = substitute;
-        });
+        if (this.titleMissing)
+            return;
         if (Object.keys(this.changes).length) {
             this.#objectConfigService.saveObjectConfigs(this.changes, this.bucket()).subscribe((_) => this.save.emit());
         }
@@ -1712,18 +1724,26 @@ class TileConfigComponent {
         }
     }
     resetConfig() {
-        if (this.selectedType) {
-            const defaults = this.#getDefaults(this.selectedType.id) ?? this.#emptyObjectConfig;
-            this.changes[this.selectedType.id] = { ...defaults };
+        if (!this.selectedType)
+            return;
+        const typeId = this.selectedType.id;
+        const defaults = this.#getDefaults(typeId);
+        const originalConfig = this.#objectConfigService.getObjectConfig(this.selectedType, this.bucket());
+        if (defaults) {
             this.objectConfig = { ...defaults };
-            const originalConfig = this.#objectConfigService.getObjectConfig(this.selectedType, this.bucket());
-            if (this.#deepEqual(defaults, originalConfig)) {
-                this.changes[this.selectedType.id] = undefined;
-                delete this.changes[this.selectedType.id];
-            }
-            else {
-                this.changes[this.selectedType.id] = { ...defaults };
-            }
+            if (this.#deepEqual(defaults, originalConfig))
+                delete this.changes[typeId];
+            else
+                this.changes[typeId] = { ...defaults };
+        }
+        else {
+            // no defaults: reset removes the stored config so the render-time
+            // fallback chain applies again
+            this.objectConfig = { ...this.#emptyObjectConfig, objectTypeId: typeId };
+            if (originalConfig)
+                this.changes[typeId] = undefined;
+            else
+                delete this.changes[typeId];
         }
     }
     cancelConfig() {
@@ -1733,34 +1753,12 @@ class TileConfigComponent {
     getTypeLabel(typeId) {
         return !this.#translate.instant(typeId).includes('!missing key')
             ? this.#translate.instant(typeId)
-            : this.#system.getLocalizedResource(typeId);
-    }
-    /**
-     * An empty config must not be persisted. Replace it with the type's default
-     * (keeping the user's icon/actions/badges where set). If no default exists at
-     * all, return `undefined` so the stored entry gets deleted on save and the
-     * fallback chain applies at render time.
-     */
-    #substituteEmptyConfig(typeId, userConfig) {
-        const defaults = this.#getDefaults(typeId);
-        if (!defaults || this.#isEmptyConfig(defaults))
-            return undefined;
-        const merged = { ...defaults };
-        if (userConfig?.icon)
-            merged.icon = userConfig.icon;
-        if (userConfig?.actions?.length)
-            merged.actions = userConfig.actions;
-        if (userConfig?.badges?.length)
-            merged.badges = userConfig.badges;
-        return merged;
+            : this.#localization.getLocalizedResource(typeId);
     }
     #getDefaults(typeId) {
         const registered = this.#objectConfigService.getRegisteredDefault(typeId, this.bucket());
         return registered ?? this.#objectConfigService.getDefaultConfig(typeId);
     }
-    #isEmptyConfig(config) {
-        return !config || ['title', 'description', 'meta', 'aside'].every((slot) => !config[slot]?.propertyName);
-    }
     #selectFlavor(flavor) {
         const type = this.#system.getObjectType(flavor.sot);
         if (type)
@@ -1772,16 +1770,12 @@ class TileConfigComponent {
     }
     #selectType(type) {
         this.selectedType = type;
-        const alreadyChanged = this.changes[type.id];
-        // load tile config
-        // if the type has been changed before load that config instead of the persisted one
-        this.objectConfig = { ...(alreadyChanged || this.#objectConfigService.getObjectConfig(type, this.bucket() || '')) };
-        if (!this.objectConfig) {
-            this.objectConfig = {
-                ...this.#emptyObjectConfig,
-                objectTypeId: type.id
-            };
-        }
+        // if the type has been changed in this session use that config instead of
+        // the persisted one; an explicit `undefined` entry marks a pending deletion
+        const config = type.id in this.changes
+            ? this.changes[type.id]
+            : this.#objectConfigService.getObjectConfig(type, this.bucket() || '');
+        this.objectConfig = config ? { ...config } : { ...this.#emptyObjectConfig, objectTypeId: type.id };
     }
     #deepEqual(valueA, valueB) {
         if (valueA === valueB)
@@ -1801,7 +1795,7 @@ class TileConfigComponent {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TileConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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        @if (isConfigEmpty) {\n          <section class=\"config-warning\">{{ 'yuv.tile-config.warning.empty' | translate }}</section>\n        }\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)}:host .config-warning{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-warning-container);color:var(--ymt-on-warning-container);border-top:1px solid var(--ymt-outline-variant)}\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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        @if (titleMissing) {\n          <section class=\"config-error\">\n            {{ 'yuv.tile-config.error.title-required' | translate }} ({{ titleMissingTypeLabels }})\n          </section>\n        }\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              [allowRemove]=\"selectedSlot !== 'title'\"\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 || titleMissing\" (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 .config-error{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);border-bottom:1px solid var(--ymt-outline-variant)}: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", "allowRemove"], 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.20", ngImport: i0, type: TileConfigComponent, decorators: [{
             type: Component,
@@ -1821,7 +1815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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        @if (isConfigEmpty) {\n          <section class=\"config-warning\">{{ 'yuv.tile-config.warning.empty' | translate }}</section>\n        }\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)}:host .config-warning{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-warning-container);color:var(--ymt-on-warning-container);border-top:1px solid var(--ymt-outline-variant)}\n"] }]
+                    ], 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        @if (titleMissing) {\n          <section class=\"config-error\">\n            {{ 'yuv.tile-config.error.title-required' | translate }} ({{ titleMissingTypeLabels }})\n          </section>\n        }\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              [allowRemove]=\"selectedSlot !== 'title'\"\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 || titleMissing\" (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 .config-error{flex:0 0 auto;padding:var(--ymt-spacing-m);background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);border-bottom:1px solid var(--ymt-outline-variant)}: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 {